Step 3: Spinning bears!
So again, like the iPhone game, I wanted the bear to spin in the direction he was flying. This meant a couple of things:
1. I needed to make him bounce off the mushroom depending on which part of the mushroom he hit.
2. I needed to get to grips with the HTML5 canvas transformations.
Where? There….There on mushroom…
So to keep things simple I decided to break the mushroom into 4 areas across the horizontal. very left, left, right, very right. Depending on which part the bear hit I would send him flying very left, left, right or very right!
<br />
//Has bear hit mushroom<br />
if((bearY>(screenHeight - 60)) && (bearX + bearEyesOpenImg.width > mushroomX && bearX < (mushroomX + mushroomImg.width)))<br />
{<br />
if(bearX < mushroomX + mushroomImg.width*0.25)<br />
{<br />
horizontalSpeed = -speed;<br />
}<br />
else if(bearX < mushroomX + mushroomImg.width*0.5)<br />
{<br />
horizontalSpeed = -parseInt(speed/2);<br />
}<br />
else if(bearX < mushroomX + mushroomImg.width*0.75)<br />
{<br />
horizontalSpeed = parseInt(speed/2);<br />
}<br />
else<br />
{<br />
horizontalSpeed = speed;<br />
}<br />
boing1.play();<br />
mushroomStatus = MUSHROOM_BOING_STATUS;<br />
verticalSpeed = -speed;<br />
}<br />
So as can be seen above depending on where the bear hit the mushroom I would adjust the horizontal speed to:-
very left = -speed
left = -speed/2
right = speed/2
very right = speed
Not exactly a realistic physics engine, but serves the cialis purpose in giving a varied gameplay.
You make me dizzy!
So to make the bear spin we need to understand a few of points about transformation in HTML5 canvas element.
1. When ever you do any transformation it’s very wise to the save the current state of your 2d context. That way, when you’ve finished making the transformation you can return to the previous state before carrying on (in this case when each call of the game loop occurs).
2. Translate the canvas to a position in the center of the bear
3. Adjust the angle
4. Draw the bear but based on the new X,Y coordinates in relation to the translation performed earlier
5. Finally restore the canvas to its previous state.
<br />
//Save the current state<br />
ctx.save(); </p>
<p> //Translate to the center of the bear (i.e. the point about which we are going to perform the rotation<br />
ctx.translate(bearX + (bearEyesOpenImg.width/2), bearY + (bearEyesOpenImg.height/2));</p>
<p> //Adjust the angle according to the horizontal speed<br />
bearAngle += horizontalSpeed;<br />
if(bearAngle < 0) bearAngle=360;<br />
else if(bearAngle>360) bearAngle=0;</p>
<p> //Perform the rotation based on the current bear angle<br />
ctx.rotate(bearAngle * Math.PI/180);</p>
<p> //Draw the bear (if he's going down open eyes!)<br />
//Also note that the X,Y coordinates are based on the moving out from the center of the bear and not the original bearX and bearY<br />
//This is because of the translate function we performed earlier<br />
if(verticalSpeed>0)<br />
{<br />
ctx.drawImage(bearEyesOpenImg, - (bearEyesOpenImg.width/2), - (bearEyesOpenImg.width/2));<br />
}<br />
else<br />
{<br />
ctx.drawImage(bearEyesClosedImg, - (bearEyesOpenImg.width/2), - (bearEyesOpenImg.width/2));<br />
}</p>
<p> //Phew, no back to normal after our rotation and the world is restored!<br />
ctx.restore();<br />
An example is available here
So that’s step 3, I’ll add another post as I add more to the game.