Week 2

This week we integrated keyboard input into our game. We created a function that will redraw the screen at 60 frames per second, where we now clear the screen before drawing another frame. Here is the updated code:

var x = 10;
var y = 10;

window.onload = function() {
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");

	document.addEventListener("keydown", keydown);
	setInterval(main, 1/60 * 1000);
}

function main() {
	//render
	ctx.fillStyle = "#FFF";
	ctx.fillRect(0,0,100,100);
	ctx.fillStyle = "#000";
	ctx.fillRect(x, y, 20, 20);
}

function keydown(e) {
	switch(e.keyCode) {
		case 37:
			x -= 1;
			break;
		case 38:
			y -= 1;
			break;
		case 39:
			x += 1;
			break;
		case 40:
			y += 1;
			break;
	}
}

Since we have added a lot of code since last week, I'll try my best to break it down into smaller sections to dissect.

The window.onload() function

var x = 10;
var y = 10;

window.onload = function() {
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");

	document.addEventListener("keydown", keydown);
	setInterval(main, 1/60 * 1000);
}

We are now using variables, called x and y, to change where our square is drawn. More on that later. We get rid of "var" before canvas and ctx because we want them to be global variables. Previously, they only existed in that function, window.onload. Now, we can use them anywhere in our document.

document.addEventListener("keydown", keydown);

document.addEventListener() is used to call a function when an event happens. Here we use the event "keydown" (the first one, in quotes), and call the keydown function that we define later. Here is a list of all Javascript events.

setInterval(main, 1/60 * 1000);

The setInterval() function is used to call a function at a set interval, defined in milliseconds. Here, we call the main function every 0.016 seconds. Here is the relevant MDN article about setInterval().

The main() function

function main() {
	//render
	ctx.fillStyle = "#FFF";
	ctx.fillRect(0,0,100,100);
	ctx.fillStyle = "#000";
	ctx.fillRect(x, y, 20, 20);
}

Here, we draw our square, using the x and y variables to specify location. I have also included an additional fillRect() function to clear the canvas back to white in a 100x100 square, which is the size of our canvas. This is like stacking layers of paint on top of each other. The computer is now constantly drawing a white square on top of the previous frame.

The keydown(e) function

function keydown(e) {
	switch(e.keyCode) {
		case 37:
			x -= 1;
			break;
		case 38:
			y -= 1;
			break;
		case 39:
			x += 1;
			break;
		case 40:
			y += 1;
			break;
	}
}

This function is called when a key is pressed. This is our first function with an argument, "e". We can call it anything, although I chose "e" as short for "event." This variable contains information about the event that occured. Since we have a keydown event, e.keyCode will contain information about which button is pressed. We use a switch statement to update x or y according to which button is pressed. For interactive information on key codes, click here.