日期:2014-05-17  浏览次数:20624 次

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