I’m assuming a working knowlege of Javascript. Being able to define variables and functions and working with arrays. These are the building blocks, and my plan is to show you how to make games with JavaScript without libraries.
The HTML5 canvas is exactly what it sounds like. It’s a blank canvas for whatever we want to paint on it.
``` index.html ``` <!DOCTYPE html> <html> <head> <script type="text/javascript" src="game.js"> </head> <body> <canvas id="my-game" width="320" height="200"></canvas> </body> </html>
And then the JavaScript:
``` game.js ``` window.onload = function() { const canvas = document.getElementById("my-game"); const context = canvas.getContext("2d"); context.fillStyle = "red"; context.fillRect(20, 20, 20, 20); context.fillRect(45, 20, 20, 20); context.fillStyle = "green"; context.fillRect(70, 20, 20, 20); }
That was fun, but not very dynamic. Let’s break things out a little. What we’re after is having the drawing happen at a set interval to create the illusion of motion. And at the risk of overcomplicating things, I want the movement to happen separately from the drawing, so we have a draw() function and a move() function wrapped in a loop function
Start by setting up the variables we’ll need, namely the canvas, context, and x/y coordinates for the square:
let canvas; let context; let x = 0; let y = 0;
Then the move function. This is where the complexity begins. When we start adding things like gravity and collisions, this is where that work happens.
function move() {
if(x < 320) {
x++;
} else {
x = 0;
}
if(y < 200) {
y++;
} else {
y = 0;
}
}
The draw() function is mostly what we had before, except that we’re putting the x and y variables in where the location of the cube will be. You could also leave the first two coordinates at 0, 0 and watch the cube get larger instead of moving.
function draw() { context.fillStyle = "red"; context.fillRect(x, y, 20, 20); }
The loop function is a wrapper for move and draw:
function loop() { move(); draw(); window.requestAnimationFrame(loop); }
I snuck that requestAnimationFrame in there, you might notice that it takes ’loop’ as an argument.
window.onload = function() { canvas = document.getElementById("my-game"); context = canvas.getContext("2d"); window.requestAnimationFrame(loop); }
This is where loop is called for the first time, and once it starts looping it just keeps going.
Note: There’s a more accurate (timing-wise) way to run this. We’ll get into that later in the book but for now this gets the job done.
Load the html file in your browser and you should see a red square moving diagonally across the screeen. Only that’s not what you see, it’s a bunch of red stripes!
The problem here is we need to clear the canvas between passes of drawing the square. There’s no ’clear’ function; you have to draw a rectangle the exact color and size of the screen first and then draw the square on top of that.
Update the draw function to clear the screen first:
function draw() { // clear the screen context.fillStyle = "white"; context.fillRect(0, 0, 320, 200); // draw the square context.fillStyle = "red"; context.fillRect(x, y, 20, 20); }
And there you have it!