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

预期达到的效果：http://www.html5china.com/html5games/mogu/index4.html

一、由于碰撞的地方比较多，所以定义一个通用的判断2个物体是否碰撞的函数

JavaScript Code复制内容到剪贴板
//方法用途：检测2个物体是否碰撞   
//参数object1：物体1   
//参数object1：物体2   
//参数overlap：可重叠的区域值   
//返回布尔值：碰撞返回true，不碰撞返回false   
function CheckIntersect(object1, object2, overlap)   
{   
    //    x-轴                      x-轴   
    //  A1------>B1 C1              A2------>B2 C2   
    //  +--------+   ^              +--------+   ^   
    //  | object1|   | y-轴         | object2|   | y-轴   
    //  |        |   |              |        |   |   
    //  +--------+  D1              +--------+  D2   
    //  看图可知两物体各4个点的位置   
    A1 = object1.x + overlap;   
    B1 = object1.x + object1.image.width - overlap;   
    C1 = object1.y + overlap;   
    D1 = object1.y + object1.image.height - overlap;   
    
    A2 = object2.x + overlap;   
    B2 = object2.x + object2.image.width - overlap;   
    C2 = object2.y + overlap;   
    D2 = object2.y + object2.image.width - overlap;   
    
    //假如他们在x-轴重叠   
    if(A1 > A2 && A1 < B2   
       || B1 > A2 && B1 < B2)   
    {   
        //判断y-轴重叠   
        if(C1 > C2 && C1 < D1   
       || D1 > C2 && D1 < D2)   
        {   
            //碰撞   
            return true;   
        }   
    }   
    return false;   
}  
二、熊碰撞蘑菇发生的事件以及处理

JavaScript Code复制内容到剪贴板
//动物碰撞蘑菇   
function HasAnimalHitMushroom()   
{   
    //假如碰撞   
    if(CheckIntersect(animal, mushroom, 5))   
    {   
        //假如碰撞的位置属于蘑菇的左下位置   
        if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.25))   
        {   
            horizontalSpeed = -speed;//反弹   
        }   
        //假如碰撞的位置属于蘑菇的左上位置   
        else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.5))   
        {   
            //反弹速度减半   
            horizontalSpeed = -speed/2;   
        }   
        //假如碰撞的位置属于蘑菇的右上位置   
        else if((animal.x + animal.image.width/2) < (mushroom.x + mushroom.image.width*0.75))   
        {   
            horizontalSpeed = speed/2;   
        }   
        else  
        {   
            horizontalSpeed = speed;   
        }   
        verticalSpeed = -speed;//改变垂直速度。也即动物向上移动   
    
    }   
}  
三、在游戏循环GameLoop()尾部中加入熊碰撞蘑菇函数，如下

JavaScript Code复制内容到剪贴板
//游戏功能循环   
   function GameLoop()      
   {      
       //清除屏幕      
       ctx.clearRect(0, 0, screenWidth, screenHeight);      
       ctx.save();      
       //绘制背景      
       ctx.drawImage(backgroundForestImg, 0, 0);      
       //绘制蘑菇      
       ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);    
    //绘制熊   
    //改变移动动物X和Y位置   
    animal.x += horizontalSpeed;   
    animal.y += verticalSpeed;   
    //改变翻滚角度   
    animal.angle += bearAngle;   
    //以当前熊的中心位置为基准   
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));   
    //根据当前熊的角度轮换   
    ctx.rotate(animal.angle * Math.PI/180);   
    //描绘熊   
    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));   
       ctx.restore();   
    //检测是否碰到边界   
    HasAnimalHitEdge();   
    //检测熊碰撞蘑菇   
    HasAnimalHitMushroom();   
       }     
到此第五回的完整代码如下：

 

展开XML/HTML Code复制内容到剪贴板
第五回就讲到这了，第六回讲描绘奖品

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

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


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com