完善游戏
第八回合中主要是完善游戏,给游戏加上开始按钮、生命数、得分
预期达到的效果: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. }