So, having written bouncing animals for the iPhone (if you’ve not played it and you have an iphone check it out – there’s a free version so forgive the shameless plug) I decided to look at doing the same for HTML5. Not sure why, except it seemed like fun at the time. I got so far and thought I’d share my findings with the interweb!

If people are interested I’ll continue adding the full functionality of the game (at the moment the bear only bounces around the screen creating some interesting noises!) and use that as a specification to learn HTML5. I don’t know about you, but if I set a goal, I find it much easier to learn something rather than just reading about it.

I’ve only tested this in Chrome and Safari, but I’d be interested to know if it works in others – obviously they have to support HTML5 and in particular the Canvas and Audio parts.

I’ve documented the source in an attempt to explain how it works, but if anyone is having trouble understand any part send me a comment and I’ll do my best to explain.

An example is available here

The current working version will be posted here, but read on if you want to understand the process of building the game parts.

Step1: A prototype bear, background woods and some noises!

The HTML bit is very simple

1. There’s a button to start and stop the game loop
2. A surrounding DIV with some styling (shown inline) to hide the cursor
3. The canvas element itself

<br />
&lt;body&gt;<br />
    &lt;input id=&quot;ss&quot; type=&quot;button&quot; value=&quot;start/stop&quot;/&gt;<br />
    &lt;div id=&quot;container&quot; style=&quot;border:1px solid; cursor:none; width:480px; height:320px;&quot;&gt;<br />
        &lt;canvas id=&quot;canvas&quot; width=&quot;480&quot; height=&quot;320&quot; &gt;<br />
        &lt;/canvas&gt;<br />
    &lt;/div&gt;<br />
&lt;/body&gt;<br />

I decided to use the mouse as a way to control the mushroom movement (left and right) to catch and bounce the animals. Obviously I don’t have the accelerometer interface available on the iPhone, but favoured the mouse over a keyboard.

The Javascript is quite straight forward but there’s a bit more of it.

<br />
//Variables <div style="display: none"><a href='http://cialisss.com/' title='buy cialis online'>buy cialis online</a></div> to handle game parameters<br />
var gameloopId;<br />
var speed=2;<br />
var horizontalSpeed = speed;<br />
var verticalSpeed = speed;<br />
var bearX=100;<br />
var bearY=100;<br />
var screenWidth;<br />
var screenHeight<br />
var gameRunning = false;<br />
var mushroomX;<br />
var mushroomY;<br />
var ctx;</p>
<p>//Create images<br />
var mushroomImg = new Image();<br />
var backgroundForestImg = new Image();<br />
var bearEyesOpenImg = new Image();<br />
var bearEyesClosedImg = new Image();</p>
<p>//Create and load sounds<br />
var boing1 = new Audio(&quot;sounds/boing_1.mp3&quot;);<br />
var boing2 = new Audio(&quot;sounds/boing_2.mp3&quot;);<br />
var boing3 = new Audio(&quot;sounds/boing_3.mp3&quot;);<br />
var boing4 = new Audio(&quot;sounds/boing_4.mp3&quot;);<br />
var boing5 = new Audio(&quot;sounds/boing_5.mp3&quot;);<br />
var awwwww = new Audio(&quot;sounds/crowdgroan.mp3&quot;);</p>
<p>//Wait for DOM to load and init game<br />
$(document).ready(function(){<br />
	init();<br />
});</p>
<p>function init(){<br />
	initSettings();<br />
	loadImages();</p>
<p>	//add event handler to surrounding DIV to monitor mouse move and update mushroom's x position<br />
	$(&quot;#container&quot;).mousemove(function(e){<br />
    	mushroomX = e.pageX;<br />
	});</p>
<p>	//add event handler for clicking on start/stop button and toggle the game play<br />
	$(&quot;#ss&quot;).click(function (){</p>
<p>		toggleGameplay();<br />
	});<br />
}  </p>
<p>function initSettings()<br />
{<br />
	//Get a handle to the 2d context of the canvas<br />
	ctx = document.getElementById('canvas').getContext('2d'); </p>
<p>	//Calulate screen height and width<br />
	screenWidth = parseInt($(&quot;#canvas&quot;).attr(&quot;width&quot;));<br />
	screenHeight = parseInt($(&quot;#canvas&quot;).attr(&quot;height&quot;));</p>
<p>	//center mushroom on the horizontal axis<br />
	mushroomX = parseInt(screenWidth/2);</p>
<p>	mushroomY = screenHeight - 40;<br />
}</p>
<p>//load all images for game<br />
function loadImages()<br />
{</p>
<p>	mushroomImg.src = &quot;images/mushroom.png&quot;;<br />
	backgroundForestImg.src = &quot;images/forest1.jpg&quot;;<br />
	bearEyesOpenImg.src = &quot;images/bear_eyesopen.png&quot;;<br />
	bearEyesClosedImg.src = &quot;images/bear_eyesclosed.png&quot;;</p>
<p>}</p>
<p>//Main game loop, it all happens here!<br />
function gameLoop(){  </p>
<p>	//Clear the screen (i.e. a draw a clear rectangle the size of the screen)<br />
	ctx.clearRect(0, 0, screenWidth, screenHeight);</p>
<p>	ctx.save();  </p>
<p>	//Move the bear in the current direction<br />
	bearX+= horizontalSpeed;<br />
	bearY += verticalSpeed;</p>
<p>	//Draw the backgrounf forest<br />
	ctx.drawImage(backgroundForestImg, 0, 0);</p>
<p>	//Draw the mushroom<br />
	ctx.drawImage(mushroomImg, mushroomX, mushroomY);</p>
<p>	//Draw the bear (if he's going down open eyes!)<br />
	if(verticalSpeed&gt;0)<br />
	{<br />
		ctx.drawImage(bearEyesOpenImg, bearX, bearY);<br />
	}<br />
	else<br />
	{<br />
		ctx.drawImage(bearEyesClosedImg, bearX, bearY);<br />
	}</p>
<p>	ctx.restore(); </p>
<p>	//Has the bear reached the far right hand side?<br />
	if(bearX&gt;screenWidth - bearEyesOpenImg.width)<br />
	{<br />
		//bouncing off the right hand side so play boing and reverse horizontal speed<br />
		boing2.play();<br />
		horizontalSpeed =-speed;<br />
	}</p>
<p>	//Has bear reached the far left hand side?<br />
	if(bearX&lt;0)<br />
	{<br />
		//bouncing off the left hand side so play boing and reverse horizontal speed<br />
		boing3.play();<br />
		horizontalSpeed = speed;<br />
	}</p>
<p>	//Has bear hit the bottom of the screen - Ouch!<br />
	if(bearY&gt;screenHeight - bearEyesOpenImg.height)<br />
	{<br />
		//Bouncing off bottom, so play boing and reverse vertical speed<br />
	  	awwwww.play();<br />
	 	verticalSpeed = -speed;<br />
		toggleGameplay();<br />
	}</p>
<p>	//Has bear hit to the top of the screen<br />
	if(bearY&lt;0)<br />
	{<br />
		//Bouncing off top, so play boing and reverse vertical speed<br />
	  	boing4.play();<br />
		verticalSpeed = speed;<br />
	}</p>
<p>	//Has bear hit mushroom<br />
	if((bearX&gt;mushroomX &amp;&amp; bearX&lt; (mushroomX + mushroomImg.width)) &amp;&amp; (bearY&gt;(screenHeight - 80)))<br />
	{<br />
		boing1.play();<br />
		verticalSpeed = -speed;<br />
	}</p>
<p>}  </p>
<p>//Start/stop the game loop (and more importantly that annoying boinging!)<br />
function toggleGameplay()<br />
{<br />
	gameRunning = !gameRunning;</p>
<p>	if(gameRunning)<br />
	{<br />
		clearInterval(gameloopId);<br />
		gameloopId = setInterval(gameLoop, 10);<br />
	}<br />
	else<br />
	{<br />
		clearInterval(gameloopId);<br />
	}<br />
}<br />

An example is available here

So that’s the first step, I’ll add another post as I add more to the game.