Setting up your HTML5 canvas (Should know) gives an overview of how to set up the HTML5 canvas as well as some of the basic functionality the canvas has to offer and how we would go about implementing that functionality.

Implementing the game framework (Should know) is a step-by-step guide to the creation of a basic 2D game framework that takes advantage of polymorphism and which will be incrementally improved in each of the recipe. This framework will be responsible for updating and rendering game objects.

Creating the player (Must know) will look at the steps taken to implement a player class that will fit seamlessly with our game framework in order to load and draw the necessary assets to the canvas.

Handling user input (Must know) will improve upon the game framework introduced in an earlier task as well as enhance our player class to respond to the user's input. By responding to the user's input, we can move our player freely around the canvas.

Animating the player (Must know) will introduce an animation manager, which will allow us to load and render sprite sheet animations. We will also adjust the player class to take advantage of the animation manager so that we can animate the player.

Creating the level (Must know) will introduce a level class that will be responsible for loading and drawing a 2D tile-based level. With this level we can specify the layout of our level as well as the positioning of collectible items and the spawn locations of enemies.

Implementing a parallax background (Must know) will implement a new class, which will be responsible for drawing and updating each of the textures that make up the background. This updating will involve moving each of the background layers at differing speeds to produce a sense of depth within our game.

Implementing physics (Must know) explains how no game would be complete without some form of physics therefore we will implement this in the basic form of jumping. By introducing jumping we can implement more imaginative levels for the player to traverse as well as a means of avoiding enemy units.

Creating enemies (Must know) will improve upon the level class and implement an enemy class therefore allowing for the spawning of enemy units and updating their positions as they move around the level.

Adding pickups (Must know) will introduce the ability to collect items as a means of scoring points, which can also be a great way to compare your score with your friends.

Adding sounds (Must know) will look at implementing audio into our game that will be played each time the player collects an item or when the player take damage from an enemy.

Creating a graphical user interface (Must know) will draw a basic user interface to the canvas, which will be updated in real time to show the player's score and remaining health.

As this book is intended to be used for the creation of a web-based game it is therefore necessary to have some form of text editor or an integrated development environment to work with. Readers who use a Microsoft-based operating system will be able to use Notepad whereas Mac readers will be able to use TextEdit. However, there are alternative development tools freely available online that are recommended rather than using a basic text editor. These tools include:

This book has been written as a means of showing those with an interest in games development and who have a basic to intermediate understanding of the workings of HTML and JavaScript how to produce a 2D HTML5 platformer-based game. Therefore this book will not discuss the inner workings of either of these languages but will instead attempt to explain how the code within this book functions.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: " In order for our scripts to have any effect on our canvas we must create a separate file called canvas example."

A block of code is set as follows:

context.beginPath();
context.arc(350,150,40,0,2 * Math.PI);
context.stroke(); 

New terms and important words are shown in bold.

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.