html5 手把手教你做游戏《熊和蘑菇》(八)

完善游戏
第八回合中主要是完善游戏，给游戏加上开始按钮、生命数、得分
预期达到的效果：http://www.html5china.com/html5games/mogu/index7.html
一、添加开始按钮
A、html代码中加入开始按钮，并定位他于画布的中间
XML/HTML Code复制内容到剪贴板
1. <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">  
开始图片下载地址：http://www.html5china.com/html5games/mogu/images/START-Button.png
B、全局变量
JavaScript Code复制内容到剪贴板
1. var gameRunning = false;//游戏运行状态  
2. var gameloopId;//记住循环的变量 
C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数
XML/HTML Code复制内容到剪贴板
1. //开始或者暂停游戏  
2. function ToggleGameplay()  
3. {  
4.     gameRunning = !gameRunning;  
5.     if(gameRunning)  
6.     {  
7.         $("#BtnImgStart").hide();  
8.          gameloopId = setInterval(GameLoop, 10);   
9.     }else  
10.     {  
11.         clearInterval(gameloopId);  
12.     }  
13. } 
D、添加开始按钮事件
JavaScript Code复制内容到剪贴板
1. //事件处理     
2. function AddEventHandlers()     
3. {     
4.     //鼠标移动则蘑菇跟着移动     
5.     $("#container").mousemove(function(e){     
6.         mushroom.x = e.pageX - (mushroom.image.width/2);     
7.     });   
8.     //开始按钮     
9.     $("#BtnImgStart").click(function (){          
10.         ToggleGameplay();  
11.     });  
12. }  
注意，要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉
二、添加生命数条
http://wjlgryx.iteye.com
A、需要的全局变量
JavaScript Code复制内容到剪贴板
1. var lives=3;//3条生命数  
2. var livesImages = new Array();//生命图片数组 
B、生命图片初始化
JavaScript Code复制内容到剪贴板
1. //生命图片因为只有6个，所以最多只能6个  
2. for(var x=0; x<6; x++)  
3. {  
4.     livesImages[x] = new Image();     
5.     livesImages[x].src = "images/lives" + x + ".png";  
6. } 
C、绘制生命条
JavaScript Code复制内容到剪贴板
1. //描绘生命条  
2. function DrawLives()  
3. {  
4.     ctx.drawImage(livesImages[lives], 0, 0);  
5. } 
D、当熊碰到底线时，减一条生命
JavaScript Code复制内容到剪贴板
1. //熊碰到下面边界  
2. if(animal.y>screenHeight - animal.image.height)  
3. {  
4.     lives -=1;//生命减1 
5.     //当还有生命条时，暂停游戏，熊回到中间位置，显出开始按钮
6.     if(lives>0)  
7.     {  
8.         horizontalSpeed = speed; //初始化水平速度 
9.         verticalSpeed = -speed; //初始化垂直速度
10.         animal.x = parseInt(screenWidth/2); //初始化熊的x坐标
11.         animal.y = parseInt(screenHeight/2); //初始化熊的y坐标  
12.         $("#BtnImgStart").show(); //显示开始按钮 
13.         ToggleGameplay(); //暂停游戏 
14.         GameLoop(); //初始化绘图 
15.     }  
16. } 
E、当生命条数等于0或者奖品消灭完，游戏结束
游戏结束函数
JavaScript Code复制内容到剪贴板
1. //结束游戏  
2. function GameOver()  
3. {  
4.     gameRunning = false;  
5.     clearInterval(gameloopId);  
6.     alert("游戏结束!");  
7. } 
在熊撞到底线的代码中，加入判断，当生命数=0时，游戏结束
JavaScript Code复制内容到剪贴板
1. if(lives<=0)  
2.     GameOver(); 
在绘制奖品函数中加入判断，当奖品被消灭完时，游戏结束
JavaScript Code复制内容到剪贴板
1. //绘制奖品，把奖品显示在画布上  
2. function DrawPrizes()  
3. {  
4.     for(var x=0; x<prizes.length; x++)  
5.     {  
6.         currentPrize = prizes[x];             
7.         //假如没有被撞击，则描绘  
8.         if(!currentPrize.hit)  
9.         {  
10.             ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);  
11.         }  
12.     }  
13.     if(AllPrizesHit())  
14.     {  
15.         GameOver();  
16.     }  
17. }  
18. //判断是否撞完奖品，假如其中有一个  
19. function AllPrizesHit()  
20. {  
21.     for(var c=0; c<prizes.length; c++)  
22.     {  
23.         checkPrize = prizes[c];  
24.         if(checkPrize.hit == false)  
25.             return false;  
26.               
27.     }  
28.     return true;  
29. } 
三、添加得分
A、定义全局变量
JavaScript Code复制内容到剪贴板
1. var score = 0;//分数  
2. var scoreImg = new Image();//分数板 
B、初始化分数板
JavaScript Code复制内容到剪贴板
1. scoreImg.src = "images/score.png";//分数板 
C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分
JavaScript Code复制内容到剪贴板
1. function Prize() {};  
2. Prize.prototype = new GameObject();//继承游戏对象GameObject  
3. Prize.prototype.row = 0;//奖品行位置  
4. Prize.prototype.col = 0;//奖品列位置  
5. Prize.prototype.hit = false;//是否被撞过  
6. Prize.prototype.point = 0;//分数 
D、在初始化奖品数组中加入分数
JavaScript Code复制内容到剪贴板
1. //创建奖品数组  
2. function InitPrizes()  
3. {  
4.     var count=0;  
5.     //一共3行  
6.     for(var x=0; x<3; x++)  
7.     {  
8.         //一共23列  
9.         for(var y=0; y<23; y++)  
10.         {  
11.             prize = new Prize();  
12.             if(x==0)  
13.             {  
14.                 prize.image = flowerImg;//鲜花放在第一行  
15.                 prize.point = 3;//鲜花3分  
16.             }  
17.             if(x==1)  
18.             {  
19.                 prize.image = acornImg;//豫子刚在第2行  
20.                 prize.point = 2;//橡子2分  
21.             }  
22.             if(x==2)  
23.             {  
24.                 prize.image = leafImg;//叶子放在第3行  
25.                 prize.point = 1;//叶子1分  
26.             }  
27.                   
28.             prize.row = x;  
29.             prize.col = y;  
30.             prize.x = 20 * prize.col + 10;//x轴位置  
31.             prize.y = 20 * prize.row + 40;//y轴位置  
32.             //装入奖品数组，用来描绘  
33.             prizes[count] = prize;  
34.             count++;  
35.         }  
36.     }  
37. } 
E、当熊撞到奖品时，根据碰撞奖品的分数增加总分
JavaScript Code复制内容到剪贴板
1. //撞到奖品  
2. function HasAnimalHitPrize()  
3. {  
4.     //取出所有奖品  
5.     for(var x=0; x<prizes.length; x++)  
6.     {  
7.         var prize = prizes[x];  
8.         //假如没有碰撞过  
9.         if(!prize.hit)  
10.         {  
11.             //判断碰撞  
12.             if(CheckIntersect(prize, animal, 0))  
13.             {  
14.                 prize.hit = true;  
15.                 //熊反弹下沉  
16.                 verticalSpeed = speed;  
17.                 //总分增加  
18.                 score += prize.point;  
19.             }  
20.         }  
21.     }  
22.  
23. } 
F、绘制分数
JavaScript Code复制内容到剪贴板
1. //描绘分数  
2. function DrawScore()  
3. {  
4.     ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板  
5.     ctx.font = "12pt Arial";  
6.     ctx.fillText("" + score, 425, 25);  //得分  
7. }