HTML and CSS Reference
In-Depth Information
Instant HTML5
2D Platformer
Welcome to
Instant HTML5 2D Platformer
. The purpose of this topic is to outline the necessary
steps taken in order to produce a 2D HTML5 Platformer, which is playable through a user's
browser on their mobile or tablet device. In order to undertake the tasks within this topic you
must have a basic understanding of HTML and JavaScript as these will be the primary markup
and programming languages used throughout the topic.
Setting up your HTML5 canvas (Should
know)
This recipe will show you how to irst of all set up your own HTML5 canvas. With the canvas
set up, we can then move on to look at some of the basic elements the canvas has to offer
and how we would go about implementing them. For this task we will be creating a series of
primitives such as circles and rectangles. Modern video games make use of these types of
primitives in many different forms. For example, both circles and rectangles are commonly
used within collision-detection algorithms such as bounding circles or bounding boxes.
How to do it...
As previously mentioned we will begin by creating our own HTML5 canvas.
1. We will start by creating a blank HTML ile. To do this, you will need some form of text
editor such as Microsoft Notepad (available for Windows) or the TextEdit application
(available on Mac OS). Once you have a basic webpage set up, all that is left to do in
order to create a canvas is to place the following between both body tags:
<canvas id="canvas" width="800" height="600"></canvas>
