最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

10余年的鼓樓網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鼓樓建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“鼓樓網(wǎng)站設(shè)計(jì)”,“鼓樓網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

預(yù)期達(dá)到的效果：http://www.html5china.com/html5games/mogu/index4.html

一、由于碰撞的地方比較多，所以定義一個(gè)通用的判斷2個(gè)物體是否碰撞的函數(shù)

 
 
 
  
  
  
//方法用途：檢測2個(gè)物體是否碰撞      
  
  
  
//參數(shù)object1：物體1      
  
  
  
//參數(shù)object1：物體2      
  
  
  
//參數(shù)overlap：可重疊的區(qū)域值      
  
  
  
//返回布爾值：碰撞返回true，不碰撞返回false      
  
  
  
function CheckIntersect(object1, object2, overlap)      
  
  
  
{      
  
  
  
    //    x-軸                      x-軸      
  
  
  
    //  A1------>B1 C1              A2------>B2 C2      
  
  
  
    //  +--------+   ^              +--------+   ^      
  
  
  
    //  | object1|   | y-軸         | object2|   | y-軸      
  
  
  
    //  |        |   |              |        |   |      
  
  
  
    //  +--------+  D1              +--------+  D2      
  
  
  
    //  看圖可知兩物體各4個(gè)點(diǎn)的位置      
  
  
  
    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;      
  
  
  
}    
 
 

二、熊碰撞蘑菇發(fā)生的事件以及處理

 
 
 
  
  
  
//動(dòng)物碰撞蘑菇      
  
  
  
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;//改變垂直速度。也即動(dòng)物向上移動(dòng)      
  
  
  
       
  
  
  
    }      
  
  
  
}    
 
 

三、在游戲循環(huán)GameLoop()尾部中加入熊碰撞蘑菇函數(shù)，如下

 
 
 
  
  
  
//游戲功能循環(huán)      
  
  
  
   function GameLoop()         
  
  
  
   {         
  
  
  
       //清除屏幕         
  
  
  
       ctx.clearRect(0, 0, screenWidth, screenHeight);         
  
  
  
       ctx.save();         
  
  
  
       //繪制背景         
  
  
  
       ctx.drawImage(backgroundForestImg, 0, 0);         
  
  
  
       //繪制蘑菇         
  
  
  
       ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  
  
  
    //繪制熊      
  
  
  
    //改變移動(dòng)動(dòng)物X和Y位置      
  
  
  
    animal.x += horizontalSpeed;      
  
  
  
    animal.y += verticalSpeed;      
  
  
  
    //改變翻滾角度      
  
  
  
    animal.angle += bearAngle;      
  
  
  
    //以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
    //根據(jù)當(dāng)前熊的角度輪換      
  
  
  
    ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
    //描繪熊      
  
  
  
    ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  
  
  
       ctx.restore();      
  
  
  
    //檢測是否碰到邊界      
  
  
  
    HasAnimalHitEdge();      
  
  
  
    //檢測熊碰撞蘑菇      
  
  
  
    HasAnimalHitMushroom();      
  
  
  
       }       
 
 

到此第五回的完整代碼如下：

 
 
 
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
    //全局變量         
  
  
  
    var backgroundForestImg = new Image();//森林背景圖         
  
  
  
    var mushroomImg = new Image();//蘑菇       
  
  
  
    var bearEyesClosedImg = new Image();//閉著眼睛的熊熊       
  
  
  
    var ctx;//2d畫布         
  
  
  
    var screenWidth;//畫布寬度         
  
  
  
    var screenHeight;//畫布高度       
  
  
  
    var speed = 2;//不變常量,從新開始的速度        
  
  
  
    var horizontalSpeed = speed;//水平速度,隨著熊的碰撞會(huì)發(fā)生改變      
  
  
  
    var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負(fù)數(shù)，隨著熊的碰撞會(huì)發(fā)生改變      
  
  
  
    var bearAngle = 2;//熊旋轉(zhuǎn)的速度      
  
  
  
    //公用 定義一個(gè)游戲物體戲?qū)ο?nbsp;        
  
  
  
    function GameObject()         
  
  
  
    {         
  
  
  
        this.x = 0;         
  
  
  
        this.y = 0;         
  
  
  
        this.image = null;         
  
  
  
    }         
  
  
  
             
  
  
  
    //定義蘑菇Mushroom 繼承游戲?qū)ο驡ameObject         
  
  
  
    function Mushroom() {};         
  
  
  
    Mushroom.prototype = new GameObject();//游戲?qū)ο驡ameObject         
  
  
  
    //蘑菇實(shí)例         
  
  
  
    var mushroom = new Mushroom();        //循環(huán)描繪物體        
  
  
  
           
  
  
  
    //定義動(dòng)物熊 Animal 繼承 游戲?qū)ο驡ameObject      
  
  
  
    function Animal() {};      
  
  
  
    Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject      
  
  
  
    Animal.prototype.angle = 0;//動(dòng)物的角度，目前中（即作為動(dòng)物它在屏幕上旋轉(zhuǎn)退回）      
  
  
  
    //定義熊實(shí)例       
  
  
  
    var animal = new Animal();      
  
  
  
    //游戲功能循環(huán)      
  
  
  
    function GameLoop()         
  
  
  
    {         
  
  
  
        //清除屏幕         
  
  
  
        ctx.clearRect(0, 0, screenWidth, screenHeight);         
  
  
  
        ctx.save();         
  
  
  
        //繪制背景         
  
  
  
        ctx.drawImage(backgroundForestImg, 0, 0);         
  
  
  
        //繪制蘑菇         
  
  
  
        ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);       
  
  
  
        //繪制熊      
  
  
  
        //改變移動(dòng)動(dòng)物X和Y位置      
  
  
  
        animal.x += horizontalSpeed;      
  
  
  
        animal.y += verticalSpeed;      
  
  
  
        //改變翻滾角度      
  
  
  
        animal.angle += bearAngle;      
  
  
  
        //以當(dāng)前熊的中心位置為基準(zhǔn)      
  
  
  
        ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));      
  
  
  
        //根據(jù)當(dāng)前熊的角度輪換      
  
  
  
        ctx.rotate(animal.angle * Math.PI/180);      
  
  
  
        //描繪熊      
  
  
  
        ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));      
  
  
  
        ctx.restore();      
  
  
  
        //檢測是否碰到邊界      
  
  
  
        HasAnimalHitEdge();      
  
  
  
        //檢測熊碰撞蘑菇      
  
  
  
        HasAnimalHitMushroom();      
  
  
  
        }         
  
  
  
    //加載圖片         
  
  
  
    function LoadImages()         
  
  
  
    {         
  
  
  
        mushroomImg.src = "images/mushroom.png";//蘑菇         
  
  
  
        backgroundForestImg.src = "images/forest1.jpg";//森林背景圖        
  
  
  
        bearEyesClosedImg.src = "images/bear_eyesclosed.png";//閉著眼睛的      
  
  
  
              
  
  
  
        mushroom.image = mushroomImg;         
  
  
  
        animal.image = bearEyesClosedImg;      
  
  
  
    }       
  
  
  
    //熊碰撞邊界      
  
  
  
    function HasAnimalHitEdge()      
  
  
  
    {      
  
  
  
        //熊碰到右邊邊界      
  
  
  
        if(animal.x>screenWidth - animal.image.width)      
  
  
  
        {      
  
  
  
            if(horizontalSpeed > 0)//假如向右移動(dòng)      
  
  
  
                horizontalSpeed =-horizontalSpeed;//改變水平速度方向      
  
  
  
        }      
  
  
  
        //熊碰到左邊邊界      
  
  
  
        if(animal.x<-10)      
  
  
  
        {      
  
  
  
            if(horizontalSpeed < 0)//假如向左移動(dòng)      
  
  
  
                horizontalSpeed = -horizontalSpeed;//改變水平速度方向      
  
  
  
        }      
  
  
  
        //熊碰到下面邊界      
  
  
  
        if(animal.y>screenHeight - animal.image.height)      
  
  
  
        {      
  
  
  
            //2秒鐘后從新開始      
  
  
  
            setTimeout(function(){      
  
  
  
                horizontalSpeed = speed;      
  
  
  
                verticalSpeed = -speed;      
  
  
  
                animal.x = parseInt(screenWidth/2);      
  
  
  
                animal.y = parseInt(screenHeight/2);      
  
  
  
                gameLoop();      
  
  
  
            }, 2000);      
  
  
  
        }      
  
  
  
        //熊碰到上邊邊界      
  
  
  
        if(animal.y<0)      
  
  
  
        {      
  
  
  
            verticalSpeed = -verticalSpeed;      
  
  
  
        }      
  
  
  
    }      
  
  
  
    //事件處理         
  
  
  
    function AddEventHandlers()         
  
  
  
    {         
  
  
  
        //鼠標(biāo)移動(dòng)則蘑菇跟著移動(dòng)         
  
  
  
        $("#container").mousemove(function(e){         
  
  
  
            mushroom.x = e.pageX - (mushroom.image.width/2);         
  
  
  
        });          
  
  
  
                 
  
  
  
    }       
  
  
  
    //方法用途：檢測2個(gè)物體是否碰撞      
  
  
  
    //參數(shù)object1：物體1      
  
  
  
    //參數(shù)object1：物體2      
  
  
  
    //參數(shù)overlap：可重疊的區(qū)域值      
  
  
  
    //返回布爾值：碰撞返回true，不碰撞返回false      
  
  
  
    function CheckIntersect(object1, object2, overlap)      
  
  
  
    {      
  
  
  
        //    x-軸                      x-軸      
  
  
  
        //  A1------>B1 C1              A2------>B2 C2      
  
  
  
        //  +--------+   ^              +--------+   ^      
  
  
  
        //  | object1|   | y-軸         | object2|   | y-軸      
  
  
  
        //  |        |   |              |        |   |      
  
  
  
        //  +--------+  D1              +--------+  D2      
  
  
  
        //  看圖可知兩物體各4個(gè)點(diǎn)的位置      
  
  
  
        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;      
  
  
  
    }      
  
  
  
    //動(dòng)物碰撞蘑菇      
  
  
  
    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;//改變垂直速度。也即動(dòng)物向上移動(dòng)      
  
  
  
           
  
  
  
        }      
  
  
  
    }      
  
  
  
    //初始化         
  
  
  
    $(window).ready(function(){          
  
  
  
        AddEventHandlers();//添加事件        
  
  
  
        LoadImages();                 
  
  
  
        ctx = document.getElementById('canvas').getContext('2d'); //獲取2d畫布            
  
  
  
        screenWidth = parseInt($("#canvas").attr("width")); //畫布寬度       
  
  
  
        screenHeight = parseInt($("#canvas").attr("height"));         
  
  
  
        //初始化蘑菇      
  
  
  
        mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐標(biāo)        
  
  
  
        mushroom.y = screenHeight - 40;//蘑菇Y(jié)坐標(biāo)         
  
  
  
        //初始化熊      
  
  
  
        animal.x = parseInt(screenWidth/2);      
  
  
  
        animal.y = parseInt(screenHeight/2);       
  
  
  
        setInterval(GameLoop, 10);         
  
  
  
    });         
  
  
  
       
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
            
  
  
  
               
  
  
  
        瀏覽器不支持html5,請下載支持html5的瀏覽器來觀看