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复制内容到剪贴板
第五回就讲到这了，第六回讲描绘奖品