html5 手把手教你做游戏《熊和蘑菇》(五)
熊碰撞蘑菇处理
第五回主要讲熊碰到蘑菇之后向上反弹的效果
预期达到的效果：http://www.html5china.com/html5games/mogu/index4.html
一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函数
JavaScript Code复制内容到剪贴板
1.//方法用途：检测2个物体是否碰撞
2.//参数object1：物体1
3.//参数object1：物体2
4.//参数overlap：可重叠的区域值
5.//返回布尔值：碰撞返回true，不碰撞返回false
6.function CheckIntersect(object1, object2, overlap)
7.{
8. // x-轴 x-轴
9. // A1------>B1 C1 A2------>B2 C2
10. // +--------+ ^ +--------+ ^
11. // | object1| | y-轴 | object2| | y-轴
12. // | | | | | |
13. // +--------+ D1 +--------+ D2
14. // 看图可知两物体各4个点的位置
15. A1 = object1.x + overlap;
16. B1 = object1.x + object1.image.width - overlap;
17. C1 = object1.y + overlap;
18. D1 = object1.y + object1.image.height - overlap;
19.
20. A2 = object2.x + overlap;
21. B2 = object2.x + object2.image.width - overlap;
22. C2 = object2.y + overlap;
23. D2 = object2.y + object2.image.width - overlap;
24.
25. //假如他们在x-轴重叠
26. if(A1 > A2 && A1 < B2
27. || B1 > A2 && B1 < B2)
28. {
29. //判断y-轴重叠
30. if(C1 > C2 && C1 < D1
31. || D1 > C2 && D1 < D2)
32. {
33. //碰撞
34. return true;
35. }
36. }
37. return false;
38.}
二、熊碰撞蘑菇发生的事件以及处理
JavaScript Code复制内容到剪贴板
1.//动物碰撞蘑菇
2.function HasAnimalHitMushroom()
3.{
4. //假如碰撞
5. if(CheckIntersect(animal, mushroom, 5))
6. {
7. //假如碰撞的位置属于蘑菇的左下位置
8. if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))
9. {
10. horizontalSpeed = -speed;//反弹
11. }
12. //假如碰撞的位置属于蘑菇的左上位置
13. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))
14. {
15. //反弹速度减半
16. horizontalSpeed = -speed/2;
17. }
18. //假如碰撞的位置属于蘑菇的右上位置
19. else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))
20. {
21. horizontalSpeed = speed/2;
22. }
23. else
24. {
25. horizontalSpeed = speed;
26. }
27. verticalSpeed = -speed;//改变垂直速度。也即动物向上移动
28.
29. }
30.}
三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数，如下
JavaScript Code复制内容到剪贴板
1.//游戏功能循环
2. function GameLoop()
3. {
4. //清除屏幕
5. ctx.clearRect(0, 0, screenWidth, screenHeight);
6. ctx.save();
7. //绘制背景
8. ctx.drawImage(backgroundForestImg, 0, 0);
9. //绘制蘑菇
10. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
11. //绘制熊
12. //改变移动动物X和Y位置
13. animal.x += horizontalSpeed;
14. animal.y += verticalSpeed;
15. //改变翻滚角度
16. animal.angle += bearAngle;
17. //以当前熊的中心位置为基准
18. ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
19. //根据当前熊的角度轮换
20. ctx.rotate(animal.angle * Math.PI/180);
21. //描绘熊
22. ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
23. ctx.restore();
24. //检测是否碰到边界
25. HasAnimalHitEdge();
26. //检测熊碰撞蘑菇
27. HasAnimalHitMushroom();
28. }
到此第五回的完整代码如下：
展开XML/HTML Code复制内容到剪贴板
第五回就讲到这了，第六回讲描绘奖品
