Game Setup

In the next several lessons, we'll be building a game where you play as a blue square and dodge obstacles that get faster and faster.

Project Setup

Open a new project in replit using the HTML, CSS, and JavaScript template. Add a canvas tag to your HTML; we'll be using this for all the game's graphics. The canvas will need an ID as well as a set width and height. You can make the width and height whatever you'd like.

Link your HTML file with your JavaScript and CSS files

JavaScript

Nothing goes in the CSS for now. In our JavaScript, we'll need variables for the canvas, the context (the drawing tool), the dimensions of the canvas, and the game background color in order to draw anything.

The characters in this game are a blue square for the player and a red square for the obstacle. We'll need x, y, width, and height variables to draw both on the screen. Since we're using squares, however, width and height will be the same. This means we can use a size variable instead.

Testing

If everything was done correctly, we should be able to draw the player and background color to the screen using context.fillRect(). Remember, the arguments for context.fillRect() are the x, y, width, and height of whatever we are wanting to draw.

Note: We don't need to draw the obstacle yet since it starts off the screen.

The finished product should look like this.

Obstacle Dodging Game - Setup