Improving the Snake Game - Learn HTML5 by Creating Fun Games - page 258

that value, and display it to the screen. If the new value is not higher than the existing
value, we don't persist anything, but display the saved value, since that is the real
high score at the time.
Taking screenshots of the game
This feature is not as trivial as saving the user's high score, but is nonetheless very
straightforward to implement. Since we don't care about snapshots that we captured
more than one game ago, we'll use sessionStorage to save data from the game,
in real time as the player progresses.
Behind the scenes, all we do to take these snapshots is save the game state into
sessionStorage , then at the end of the game we retrieve all of the pieces that
we'd been saving, and reconstruct the game at those points in time into an invisible
canvas. We then use the canvas.toDataURL() function to extract that data as an
image:
function saveEvent(event, snake, fruit) {
var eventObj = sessionStorage.getItem(event);
// If this is the first time the event is
set, create its structure
if (!eventObj) {
eventObj = {
snake: new Array(),
fruit: new Array()
};
eventObj.snake.push(snake);
eventObj.fruit.push(fruit);
eventObj = JSON.stringify(eventObj);
sessionStorage.setItem(event, eventObj);
} else {
eventObj = JSON.parse(eventObj);
eventObj.snake.push(snake);
eventObj.fruit.push(fruit);
eventObj = JSON.stringify(eventObj);
sessionStorage.setItem(event, eventObj);
}