蘑菇与熊游戏开发第五回（熊碰撞蘑菇处理）

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

10余年的鼓楼网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整鼓楼建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“鼓楼网站设计”,“鼓楼网站推广”以来，每个客户项目都认真落实执行。

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

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

 
 
   
  
  //方法用途：检测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;        
  
  }

二、熊碰撞蘑菇发生的事件以及处理

 
 
   
  
  //动物碰撞蘑菇        
  
  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()尾部中加入熊碰撞蘑菇函数，如下

 
 
   
  
  //游戏功能循环        
  
     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();        
  
         }

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

 
 
   
  
            
  
            
  
            
  
            
  
  蘑菇动起来-html5中文网          
  
         
  
            
  
            
  
      //全局变量           
  
      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;//水平速度,随着熊的碰撞会发生改变        
  
      var verticalSpeed = -speed; //垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变        
  
      var bearAngle = 2;//熊旋转的速度        
  
      //公用 定义一个游戏物体戏对象           
  
      function GameObject()           
  
      {           
  
          this.x = 0;           
  
          this.y = 0;           
  
          this.image = null;           
  
      }           
  
                 
  
      //定义蘑菇Mushroom 继承游戏对象GameObject           
  
      function Mushroom() {};           
  
      Mushroom.prototype = new GameObject();//游戏对象GameObject           
  
      //蘑菇实例           
  
      var mushroom = new Mushroom();        //循环描绘物体          
  
               
  
      //定义动物熊 Animal 继承 游戏对象GameObject        
  
      function Animal() {};        
  
      Animal.prototype = new GameObject();//游戏对象GameObject        
  
      Animal.prototype.angle = 0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）        
  
      //定义熊实例         
  
      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;        
  
          //以当前熊的中心位置为基准        
  
          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();        
  
          }           
  
      //加载图片           
  
      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()           
  
      {           
  
          //鼠标移动则蘑菇跟着移动           
  
          $("#container").mousemove(function(e){           
  
              mushroom.x = e.pageX - (mushroom.image.width/2);           
  
          });            
  
                     
  
      }         
  
      //方法用途：检测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;        
  
      }        
  
      //动物碰撞蘑菇        
  
      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;//改变垂直速度。也即动物向上移动        
  
               
  
          }        
  
      }        
  
      //初始化           
  
      $(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坐标          
  
          mushroom.y = screenHeight - 40;//蘑菇Y坐标           
  
          //初始化熊        
  
          animal.x = parseInt(screenWidth/2);        
  
          animal.y = parseInt(screenHeight/2);         
  
          setInterval(GameLoop, 10);           
  
      });           
  
           
  
            
  
            
  
            
  
            
  
            
  
                
  
                   
  
          浏览器不支持html5,请下载支持html5的浏览器来观看

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

【编辑推荐】

蘑菇与熊游戏开发第一回（游戏分析）
蘑菇与熊游戏开发第二回（让蘑菇动起来）
蘑菇与熊游戏开发第三回（让熊动起来）
蘑菇与熊游戏开发第四回（熊碰撞边界处理）
蘑菇与熊游戏开发第六回（绘制奖品）
蘑菇与熊游戏开发第七回（熊碰到奖品处理）
蘑菇与熊游戏开发第八回（完善游戏）

网站栏目：蘑菇与熊游戏开发第五回（熊碰撞蘑菇处理）
文章分享：http://www.shufengxianlan.com/qtweb/news13/531213.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联