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