html5（熊与蘑菇）一步一步学做游戏 第八回：完善游戏

第八回合中主要是完善游戏，给 游戏 加上开始按钮、生命数、得分 预期达到的效果： http://www.html5china.com/html5games/mogu/index7.html 一、添加开始按钮 A、html代码中加入开始按钮，并定位他…

第八回合中主要是完善游戏，给游戏加上开始按钮、生命数、得分

预期达到的效果：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);去掉

二、添加生命数条

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. }  

综合上面的代码， 到此第八回的完整代码如下：

展开 XML/HTML Code 复制内容到剪贴板

第八回讲完，整个游戏功能的基本已经做出来了。

到这里教程先告一段落先。

其实整个游戏其实还可以继续完善，比如说蘑菇被碰到后颤抖几下、碰撞声音、加入游戏帧数、加入关数、不同的关数、不同的动物和奖品、难度。。等等

假如后面有空的话我再继续完善这个游戏

大家有什么好建议的话，可以到论坛留言讨论交流：http://bbs.html5china.com/read.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

 --作者：深邃老马