Game Development Reference
In-Depth Information
saveEvent("eat", snake.getBody(),
fruit.position);
fruit.reset();
snake.grow();
score.up();
// Save high score if needed
setHighScore(document.querySelector("#scores
h3:first-child span").textContent);
}
// …
if (!snake.isAlive()) {
saveEvent("die", snake.getBody(),
fruit.position);
}
Finally, whenever we wish to display all of these snapshots, we just need to create a
separate canvas with the same dimensions as the one used in the game (so that the
buffers we saved don't go out of bounds), and draw the buffers to that canvas. The
reason we need a separate canvas element is because we don't want to draw on
the same canvas that the player can see. This way, the process of producing these
snapshots is more seamless and natural. Once each state is drawn, we can extract
each image, resize it, and display it back to the user as shown in the following code:
// Use each cached buffer to generate each
screen shot
function getEventPictures(event, canvas) {
// Take the buffer from session storage
var obj = sessionStorage.getItem(event);
// Create an array to hold the generated
images
var screenShots = new Array();
if (!obj)
return screenShots
obj = JSON.parse(obj);
var canvas = canvas.cloneNode();
var renderer = new Renderer(canvas);
// Go through each game state, and simply
