日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

第四回主要講熊移動(dòng)碰到邊界時(shí)的反彈處理

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

一、寫一個(gè)碰撞處理函數(shù)

 
 
 
  
  
  
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秒鐘后從新開(kāi)始      
  
  
  
        setTimeout(function(){      
  
  
  
            horizontalSpeed = speed;      
  
  
  
            verticalSpeed = -speed;      
  
  
  
            animal.x = parseInt(screenWidth/2);      
  
  
  
            animal.y = parseInt(screenHeight/2);      
  
  
  
            gameLoop();      
  
  
  
        }, 2000);      
  
  
  
    }      
  
  
  
    //熊碰到上邊邊界      
  
  
  
    if(animal.y<0)      
  
  
  
    {      
  
  
  
        verticalSpeed = -verticalSpeed;      
  
  
  
    }      
  
  
  
}    
 
 

二、在游戲循環(huán)GameLoop()尾部中加入檢測(cè)邊界函數(shù)，如下

 
 
 
  
  
  
  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();      
  
  
  
//檢測(cè)是否碰到邊界      
  
  
  
HasAnimalHitEdge();      
  
  
  
      }       
 
 

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

 
 
 
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
     
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
        
  
  
  
            
  
  
  
               
  
  
  
        瀏覽器不支持html5,請(qǐng)下載支持html5的瀏覽器來(lái)觀看