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

第四回主要讲熊移动碰到边界时的反弹处理
预期达到效果：http://www.html5china.com/html5games/mogu/index3.html
一、写一个碰撞处理函数
JavaScript Code复制内容到剪贴板
1. function HasAnimalHitEdge()
2. {
3. //熊碰到右边边界
4. if(animal.x>screenWidth - animal.image.width)
5. {
6. if(horizontalSpeed > 0)//假如向右移动
7. horizontalSpeed =-horizontalSpeed;//改变水平速度方向
8. }
9. //熊碰到左边边界
10. if(animal.x<-10)
11. {
12. if(horizontalSpeed < 0)//假如向左移动
13. horizontalSpeed = -horizontalSpeed;//改变水平速度方向
14. }
15. //熊碰到下面边界
16. if(animal.y>screenHeight - animal.image.height)
17. {
18. //2秒钟后从新开始
19. setTimeout(function(){
20. horizontalSpeed = speed;
21. verticalSpeed = -speed;
22. animal.x = parseInt(screenWidth/2);
23. animal.y = parseInt(screenHeight/2);
24. gameLoop();
25. }, 2000);
26. }
27. //熊碰到上边边界
28. if(animal.y<0)
29. {
30. verticalSpeed = -verticalSpeed;
31. }
32. }
二、在游戏循环GameLoop()尾部中加入检测边界函数，如下
JavaScript Code复制内容到剪贴板
1. function GameLoop()
2. {
3. //清除屏幕
4. ctx.clearRect(0, 0, screenWidth, screenHeight);
5. ctx.save();
6. //绘制背景
7. ctx.drawImage(backgroundForestImg, 0, 0);
8. //绘制蘑菇
9. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
10. //绘制熊
11. //改变移动动物X和Y位置
12. animal.x += horizontalSpeed;
13. animal.y += verticalSpeed;
14. //改变翻滚角度
15. animal.angle += bearAngle;
16. //以当前熊的中心位置为基准
17. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
18. //根据当前熊的角度轮换
19. ctx.rotate(animal.angle * Math.PI/180);
20. //描绘熊
21. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
22. ctx.restore();
23. //检测是否碰到边界
24. HasAnimalHitEdge();
25. }