It's a game.

This newer version of the game includes enhancements to two previously existing aspects. To begin, we are now able to record and save the greatest score that a player has ever obtained and keep track of it using local storage. This value will always be securely saved in the player's hard drive, and it will be loaded when the game is restarted, even if the player exits the browser program or switches off the computer. Second, anytime the player kills a snake or eats a fruit in the game, the game state is saved using session storage. This is also the case when the player consumes a fruit in the game. This is utilized as an additional touch of awesomeness, and when the player has lost, we display a picture of all of the individual level ups the player accomplished in that game, as well as a snapshot of when the player struck a wall or run the snake into itself, as demonstrated in the following screenshot:

At the conclusion of each game, a picture is displayed depicting the exact instant that the player reached the next level and also a photograph depicting the exact second that the player lost their life. These images are generated with the help of the canvas API (by calling the toDataURL function), and the data that makes up each image is saved as the game progresses and stored with the assistance of the web storage API.

We are able to significantly increase both the enjoyment factor and the possibilities for player interaction by implementing a feature such as this one into the game. Imagine how powerful the game would be if in addition to the player being able to publish their top score on their preferred social networking website, they were also able to post images of themselves playing the game at important points. Obviously, this essay only includes the basic structure of this functionality as its implementation (in other words, we only take the snapshots of these critical moments in the game). It will be up to the reader to figure out how to implement the actual functionality required to deliver that data to a genuine social network application.

The following sections will provide both a broad description and a demonstration of each of the application programming interfaces (APIs) that are utilized in the game. You should look at the code section if you want an explanation of how each piece of feature was implemented into the game's final version. Check out the book's page on the Packt Publishing website in order to obtain the full source code for this game.

Web Messaging

Web messaging gives us the ability to connect with other instances of HTML documents, regardless of whether or not they are located in the same domain as ourselves. For instance, let's say that our snake game, is embedded into a social website through the use of iframe. In this scenario, our snake game would appear on the social website. We would like the player's new high score to be posted immediately into the host page from the snake game once it is achieved by the player (the page with iframe from which the game is loaded). This can be accomplished natively by utilizing the web messaging API, and there is no requirement for any kind of server-side coding at all.

Before the advent of web messaging, documents could not communicate with one another or with documents housed in different domains, primarily due to security concerns. If we just accept messages from any application without question, then it stands to reason that online apps will still be susceptible to attack by malicious third-party programs. On the other hand, the application programming interface for online messaging offers several reliable safety precautions that protect the page that is reading the message. For instance, we can choose which domains the message is sent to, preventing any other domains from reading it in the process and preventing any confusion. On the receiving end, we are also able to examine the origin from where the message originated. This allows us to ignore any communications that come from domains that are not trustworthy. Last but not least, the Document Object Model (DOM) is never directly exposed through this API, which adds an additional layer of safety.