有声小说打包下载,《完美世界》txt全集

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

蘑菇與熊游戲開發(fā)第四回（熊碰撞邊界處理）

第四回主要講熊移動碰到邊界時的反彈處理

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

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

 
 
   
  
  function HasAnimalHitEdge()        
  
  {        
  
      //熊碰到右邊邊界        
  
      if(animal.x>screenWidth - animal.image.width)        
  
      {        
  
          if(horizontalSpeed > 0)//假如向右移動        
  
              horizontalSpeed =-horizontalSpeed;//改變水平速度方向        
  
      }        
  
      //熊碰到左邊邊界        
  
      if(animal.x<-10)        
  
      {        
  
          if(horizontalSpeed < 0)//假如向左移動        
  
              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;        
  
      }        
  
  }

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

 
 
   
  
    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;        
  
  //以當(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();        
  
        }

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

 
 
   
  
            
  
            
  
            
  
            
  
  蘑菇動起來-html5中文網(wǎng)          
  
         
  
            
  
            
  
      //全局變量           
  
      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;//水平速度,隨著熊的碰撞會發(fā)生改變        
  
      var verticalSpeed = -speed; //垂直速度,開始肯定是要向上飄，所以要負(fù)數(shù)，隨著熊的碰撞會發(fā)生改變        
  
      var bearAngle = 2;//熊旋轉(zhuǎn)的速度        
  
      //公用 定義一個游戲物體戲?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)描繪物體          
  
               
  
      //定義動物熊 Animal 繼承 游戲?qū)ο驡ameObject        
  
      function Animal() {};        
  
      Animal.prototype = new GameObject();//游戲?qū)ο驡ameObject        
  
      Animal.prototype.angle = 0;//動物的角度，目前中（即作為動物它在屏幕上旋轉(zhuǎn)退回）        
  
      //定義熊實(shí)例         
  
      var animal = new Animal();        
  
              
  
      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;        
  
          //以當(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();        
  
          }           
  
      //加載圖片           
  
      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)//假如向右移動        
  
                  horizontalSpeed =-horizontalSpeed;//改變水平速度方向        
  
          }        
  
          //熊碰到左邊邊界        
  
          if(animal.x<-10)        
  
          {        
  
              if(horizontalSpeed < 0)//假如向左移動        
  
                  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)移動則蘑菇跟著移動           
  
          $("#container").mousemove(function(e){           
  
              mushroom.x = e.pageX - (mushroom.image.width/2);           
  
          });            
  
                     
  
      }         
  
      //初始化           
  
      $(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的瀏覽器來觀看

第四回就講到這了，第五回講熊碰撞蘑菇的事件

【編輯推薦】

蘑菇與熊游戲開發(fā)***回（游戲分析）
蘑菇與熊游戲開發(fā)第二回（讓蘑菇動起來）
蘑菇與熊游戲開發(fā)第三回（讓熊動起來）
蘑菇與熊游戲開發(fā)第五回（熊碰撞蘑菇處理）
蘑菇與熊游戲開發(fā)第六回（繪制獎品）
蘑菇與熊游戲開發(fā)第七回（熊碰到獎品處理）
蘑菇與熊游戲開發(fā)第八回（完善游戲）

當(dāng)前標(biāo)題：蘑菇與熊游戲開發(fā)第四回（熊碰撞邊界處理）
文章網(wǎng)址：http://fisionsoft.com.cn/article/dhcgpgj.html

新聞中心

其他資訊