一步一步学做游戏 第五回：熊碰撞蘑菇处理

第五回主要讲熊碰到 蘑菇 之后向上反弹的效果 预期达到的效果： http://www.html5china.com/html5games/mogu/index4.html 一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函…

第五回主要讲熊碰到蘑菇之后向上反弹的效果

预期达到的效果：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 复制内容到剪贴板

第五回就讲到这了，第六回讲描绘奖品

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

 --作者：深邃老马    

-----------------逆水行舟，不进则退