The way this game was laid out is actually quite simple. The HTML has only three widgets: the title of the game, a score board for the player's current score, and a score board for the overall high score across multiple games. This last score board is not used in this version of the game, and we'll get more into it in the next game (see Chapter 5, Improving the Snake Game).
<h1>HTML5 Snake</h1> <section id="scores"> <h3>Score: <span>0</span></h3> <h3>High Score: <span>0</span></h3> </section> <section id="gameMenu" class="hide"> <h3>Ready!</h3> <button>Play</button> </section>
In order to separate the various responsibilities from all the different components in the game, we abstracted out all the rendering for the entire game into a single Renderer class. This class is in charge of drawing data to a canvas reference that is given to it. The data that it draws, be it a snake or any other objects, is passed in to it as a typed array, representing the coordinates where the entity is to be drawn, along with the image resource that is drawn at the location specified by the typed array. The Renderer class also includes a few helper functions to help us easily clear the canvas, and convert an x and y point into an index used to traverse the flat array representing a 2D one.
var Renderer = function(canvas) {
var canvas = canvas;
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var getIndex = function(x, y) {
return width * y + x;
};
var getPosition = function(index) {
return {
x: index % width,
y: parseInt(index / width)
};
};
this.clear = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
};
this.draw = function(points, img) {
for (var i = 0, len = points.length; i < len; i += 2) {
ctx.drawImage(img, points[i] * img.width, points[i + 1] * img.height, img.width, img.height);
}
};
};Next, we create a Snake
class that encapsulates all of the data and behavior associated with the snake. The data that this class stores is the current position of the snake's head, the current length of the snake's body, the image that is to be drawn representing the snake, and whether the snake is alive or not. The behavior that it handles includes the moving of the snake and the handling of user input (which is included in this class for simplicity and brevity). There are a few helper functions that allow us to delegate other behaviors to the client. For example, through the API exposed, the client can check at each frame whether the snake has gone outside the world grid, if it has eaten a fruit, or if the snake ran into its own body. The client can also use the API provided, to take action on the snake, such as setting its life attribute (dead or alive), as well as reset the image used to draw the snake, or any other attribute of it.
var Snake = function(x, y, width, height, maxSize) {
var isAlive = true;
var size = 0;
var body = new Int8Array(maxSize * 2);
for (var i = 0, len = body.length; i < len; i++)
body[i] = -1;
body[0] = x, body[1] = y;
var worldWidth = width;
var worldHeight = height;
var skin;
var dir = { 38: false, 40: false, 37: false, 39: false };
var keys = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 };
// To move the snake, we first move each body part to where the
// part before it used to be, starting at the tail and moving
// towards the head. Lastly, we update the head's position
var move = function() {
// Traverse the snake backwards and shift each piece one spot
for (var i = size * 2 + 1; i > 1; i -= 2) {
body[i] = body[i - 2];
body[i - 1] = body[i - 3];
}
if (dir[keys.UP]) {
body[1]--;
} else if (dir[keys.DOWN]) {
body[1]++;
} else if (dir[keys.LEFT]) {
body[0]--;
} else if (dir[keys.RIGHT]) {
body[0]++;
}
};
// Update the snake's position vectors on key presses
this.doOnKeyDown = function(event) {
var key = event.which;
// Don't process a key that's already down
if (dir[key])
return;
dir[keys.UP] = false;
dir[keys.DOWN] = false;
dir[keys.LEFT] = false;
dir[keys.RIGHT] = false;
if (key == keys.UP && !dir[keys.DOWN]) {
return dir[keys.UP] = true;
} else if (key === keys.DOWN && !dir[keys.UP]) {
return dir[keys.DOWN] = true;
} else if (key === keys.LEFT && !dir[keys.RIGHT]) {
return dir[keys.LEFT] = true;
} else if (key === keys.RIGHT && !dir[keys.LEFT]) {
return dir[keys.RIGHT] = true;
}
};
// This allows us to use different images to represent the snake
this.setSkin = function(img) {
skin = new Image();
skin.onload = function() {
skin.width = this.width;
skin.height = this.height;
};
skin.src = img;
};
this.move = move;
this.getSkin = function() { return skin; };
this.setDead = function(isDead) { isAlive = !isDead; };
this.isAlive = function() { return isAlive; };
this.getBody = function() { return body; };
this.getHead = function() { return {x: body[0], y: body[1]}; };
this.grow = function() { if (size * 2 < body.length) return size++; };
// Check if the snake is at a certain position on the grid
this.isAt = function(x, y, includeHead) {
var offset = includeHead ? 0 : 2;
for (var i = 2, len = body.length; i < len; i += 2) {
if (body[i] == x && body[i + 1] == y)
return true;
}
return false;
};
this.reset = function(x, y) {
for (var i = 0, len = body.length; i < len; i++)
body[i] = -1;
body[0] = x;
body[1] = y;
size = 0;
isAlive = true;
dir[keys.UP] = false;
dir[keys.DOWN] = false;
dir[keys.LEFT] = false;
dir[keys.RIGHT] = false;
};
};Similar to the snake class, we also create a class to encapsulate the fruit that the snake will eat. The only difference between the
snake class and the fruit
class is that the fruit class will not do anything other than show up in the map. For all practical purposes, the fruit class shares a common entity interface with the snake class, which allows them to be reset to a default state, set their position, and check for collision.
var fruit = {
position: new Int8Array(2),
reset: function() {
this.position[0] = -1;
this.position[1] = -1;
},
isAt: function(x, y) {
return this.position[0] == x && this.position[1] == y;
},
img: null
};Finally, in the main code, we perform the following setup task:
We also use the game loop to hook into the score board widgets, to add to the user experience. The complete source code for the game available at the book's page on the website of Packt Publishing also includes extra menus, but these have been left out of the code snippets shown here for brevity.
The other thing we take advantage of in this game loop is the requestAnimationFrame API. In order to assure that different CPUs and GPUs, all render the game at the same pace, we added a simple frame rate controller inside the game loop. The frame rate is controlled by a variable that specified how many fps the game should attempt to run.
function gameLoop() {
// Only do anything here if the snake is not dead
if (snake.isAlive()) {
// Make the frame rate no faster than what we determine (30 fps)
renderTime.now = Date.now();
if (renderTime.now - renderTime.last >= renderTime.fps) {
// If there is no fruit on the grid, place one somewhere. Here we
// use a web worker to calculate an empty square on the map
if (fruit.position[0] < 0) {
cellGen.postMessage({
points: snake.getBody(),
width: worldWidth,
height: worldHeight
});
} else {
snake.move();
head = snake.getHead();
// Check if the snake has ran into itself, or gone outside the grid
if (snake.isAt(head.x, head.y, false) ||
head.x < 0 || head.y < 0 ||
head.x >= worldWidth || head.y >= worldHeight) {
snake.setDead(true);
}
// Check if the snake has eaten a fruit
if (fruit.isAt(head.x, head.y)) {
fruit.reset();
snake.grow();
score.up();
}
renderTime.last = renderTime.now;
}
}
// Render everything: clear the screen, draw the fruit, draw the snake,
// and register the callback with rAF
renderer.clear();
renderer.draw(fruit.position, fruit.img);
renderer.draw(snake.getBody(), snake.getSkin());
requestAnimationFrame(gameLoop);
}
// If the snake is dead, stop rendering and disable
// the key handlers that controlled the snake
else {
document.body.removeEventListener("keydown", snake.doOnKeyDown);
}
}