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. &nbs