Step 2: Putting the boing in the mushroom

So just like the iPhone game I wanted the mushroom to animate a bouncy moment as the animal hits it. For the iPhone I was able to use two images one slightly squashed version of the mushroom to give the impression of it bouncing :-/

So I decided to do the the same in HTML 5. However unlike the iPhone, I was unable to create a simple image array and animate between the 2. In this case I had to add some variables to monitor the mushroom state and animation.

<br />
var MUSHROOM_BOING_STATUS = 1;<br />
var MUSHROOM_NORMAL_STATUS = 2;<br />
var mushroomStatus = MUSHROOM_NORMAL_STATUS;<br />
var mushroomWobble = false;<br />
var mushroomWobbleCount = 0;<br />

Here I’ve declared a state for a normal mushroom and one that is currently boinging! Notice, also the addition of a wobble boolean (used to swap the image back and fourth) and a wobbleCount (used to count the number of times we want a wobble to occur). *note: probably a better solution would be to get the current time and wait for a specific time period to elapse.

Now instead of just drawing the mushroom as before we display the alternate images as required.

<br />
	//Draw the mushroom (depending on its current status)<br />
	if(mushroomStatus == MUSHROOM_NORMAL_STATUS)<br />
	{<br />
		ctx.drawImage(mushroomImg, mushroomX, mushroomY);<br />
	}<br />
	else<br />
	{<br />
		//toggle the wobble!<br />
		mushroomWobble = !mushroomWobble;</p>
<p>		//increment wobble count<br />
		mushroomWobbleCount++;</p>
<p>		if(mushroomWobbleCount &gt; 50)<br />
		{<br />
			//alert(&quot;reset&quot;);<br />
			mushroomStatus = MUSHROOM_NORMAL_STATUS;<br />
			mushroomWobbleCount = 0;<br />
			mushroomWobble = false;<br />
		}</p>
<p>		//Mushroom has just been hit so make it wobble!<br />
		if(mushroomWobble)<br />
			ctx.drawImage(mushroomWobbleImg, mushroomX, mushroomY);<br />
		else<br />
			ctx.drawImage(mushroomImg, mushroomX, mushroomY);</p>
<p>	}<br />

Now when the animal hits the mushroom we set the status to MUSHROOM_BOING_STATUS

<br />
	//Has bear hit mushroom<br />
	if((bearY&gt;(screenHeight - <a href='http://viagra365.org/' title='buy viagra online'>buy viagra online</a> 60)) &amp;&amp; (bearX + bearEyesOpenImg.width &gt; mushroomX &amp;&amp; bearX &lt; (mushroomX + mushroomImg.width)))<br />
	{</p>
<p>		boing1.play();<br />
		mushroomStatus = MUSHROOM_BOING_STATUS;<br />
		verticalSpeed = -speed;<br />
	}<br />

An example is available here

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

UPDATE: A note on sounds

Those of you using firefox may notice that the game is a little quiet. This is because it doesn’t support mp3, instead they opted for .wav. See here for more information on native audio support in browsers.