蘑菇与熊游戏开发第八回（完善游戏）-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

蘑菇与熊游戏开发第八回（完善游戏）

第八回合中主要是完善游戏，给游戏加上开始按钮、生命数、得分

成都网站建设哪家好，找创新互联公司！专注于网页设计、成都网站建设、微信开发、微信平台小程序开发、集团成都企业网站建设等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：成都食品包装袋等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞扬！

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

一、添加开始按钮

A、html代码中加入开始按钮，并定位他于画布的中间

开始图片下载地址：http://www.html5china.com/html5games/mogu/images/START-Button.png

B、全局变量

 
 
 
  
  
  var gameRunning = false;//游戏运行状态        
  
  var gameloopId;//记住循环的变量

C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数

 
 
 
  
  
  //开始或者暂停游戏        
  
  function ToggleGameplay()        
  
  {        
  
      gameRunning = !gameRunning;        
  
      if(gameRunning)        
  
      {        
  
          $("#BtnImgStart").hide();        
  
           gameloopId = setInterval(GameLoop, 10);         
  
      }else        
  
      {        
  
          clearInterval(gameloopId);        
  
      }        
  
  }

D、添加开始按钮事件

 
 
 
  
  
  //事件处理           
  
  function AddEventHandlers()           
  
  {           
  
      //鼠标移动则蘑菇跟着移动           
  
      $("#container").mousemove(function(e){           
  
          mushroom.x = e.pageX - (mushroom.image.width/2);           
  
      });         
  
      //开始按钮           
  
      $("#BtnImgStart").click(function (){                
  
          ToggleGameplay();        
  
      });        
  
  }

注意，要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉

#p#

二、添加生命数条

A、需要的全局变量

 
 
 
  
  
  var lives=3;//3条生命数        
  
  var livesImages = new Array();//生命图片数组

B、生命图片初始化

 
 
 
  
  
  //生命图片因为只有6个，所以最多只能6个        
  
  for(var x=0; x<6; x++)        
  
  {        
  
      livesImages[x] = new Image();           
  
      livesImages[x].src = "images/lives" + x + ".png";        
  
  }

C、绘制生命条

 
 
 
  
  
  //描绘生命条        
  
  function DrawLives()        
  
  {        
  
      ctx.drawImage(livesImages[lives], 0, 0);        
  
  }

D、当熊碰到底线时，减一条生命

 
 
 
  
  
  //熊碰到下面边界        
  
  if(animal.y>screenHeight - animal.image.height)        
  
  {        
  
      lives -=1;//生命减1       
  
      //当还有生命条时，暂停游戏，熊回到中间位置，显出开始按钮      
  
      if(lives>0)        
  
      {        
  
          horizontalSpeed = speed; //初始化水平速度       
  
          verticalSpeed = -speed; //初始化垂直速度      
  
          animal.x = parseInt(screenWidth/2); //初始化熊的x坐标      
  
          animal.y = parseInt(screenHeight/2); //初始化熊的y坐标        
  
          $("#BtnImgStart").show(); //显示开始按钮       
  
          ToggleGameplay(); //暂停游戏       
  
          GameLoop(); //初始化绘图       
  
      }        
  
  }

E、当生命条数等于0或者奖品消灭完，游戏结束

 
 
 
  
  
  //结束游戏        
  
  function GameOver()        
  
  {        
  
      gameRunning = false;        
  
      clearInterval(gameloopId);        
  
      alert("游戏结束!");        
  
  }

在熊撞到底线的代码中，加入判断，当生命数=0时，游戏结束

 
 
 
  
  
  if(lives<=0)        
  
      GameOver();

在绘制奖品函数中加入判断，当奖品被消灭完时，游戏结束

 
 
 
  
  
  //绘制奖品，把奖品显示在画布上        
  
  function DrawPrizes()        
  
  {        
  
      for(var x=0; x  
  
  
    {        
  
          currentPrize = prizes[x];                   
  
          //假如没有被撞击，则描绘        
  
          if(!currentPrize.hit)        
  
          {        
  
              ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);        
  
          }        
  
      }        
  
      if(AllPrizesHit())        
  
      {        
  
          GameOver();        
  
      }        
  
  }        
  
  //判断是否撞完奖品，假如其中有一个        
  
  function AllPrizesHit()        
  
  {        
  
      for(var c=0; c  
  
  
    {        
  
          checkPrize = prizes[c];        
  
          if(checkPrize.hit == false)        
  
              return false;        
  
                      
  
      }        
  
      return true;        
  
  }

#p#

三、添加得分

A、定义全局变量

 
 
 
  
  
  var score = 0;//分数        
  
  var scoreImg = new Image();//分数板

B、初始化分数板

 
 
 
  
  
  scoreImg.src = "images/score.png";//分数板

C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分

 
 
 
  
  
  function Prize() {};        
  
  Prize.prototype = new GameObject();//继承游戏对象GameObject        
  
  Prize.prototype.row = 0;//奖品行位置        
  
  Prize.prototype.col = 0;//奖品列位置        
  
  Prize.prototype.hit = false;//是否被撞过        
  
  Prize.prototype.point = 0;//分数

D、在初始化奖品数组中加入分数

 
 
 
  
  
  //创建奖品数组        
  
  function InitPrizes()        
  
  {        
  
      var count=0;        
  
      //一共3行        
  
      for(var x=0; x<3; x++)        
  
      {        
  
          //一共23列        
  
          for(var y=0; y<23; y++)        
  
          {        
  
              prize = new Prize();        
  
              if(x==0)        
  
              {        
  
                  prize.image = flowerImg;//鲜花放在***行        
  
                  prize.point = 3;//鲜花3分        
  
              }        
  
              if(x==1)        
  
              {        
  
                  prize.image = acornImg;//豫子刚在第2行        
  
                  prize.point = 2;//橡子2分        
  
              }        
  
              if(x==2)        
  
              {        
  
                  prize.image = leafImg;//叶子放在第3行        
  
                  prize.point = 1;//叶子1分        
  
              }        
  
                          
  
              prize.row = x;        
  
              prize.col = y;        
  
              prize.x = 20 * prize.col + 10;//x轴位置        
  
              prize.y = 20 * prize.row + 40;//y轴位置        
  
              //装入奖品数组，用来描绘        
  
              prizes[count] = prize;        
  
              count++;        
  
          }        
  
      }        
  
  }

E、当熊撞到奖品时，根据碰撞奖品的分数增加总分

 
 
 
  
  
  //撞到奖品        
  
  function HasAnimalHitPrize()        
  
  {        
  
      //取出所有奖品        
  
      for(var x=0; x  
  
  
    {        
  
          var prize = prizes[x];        
  
          //假如没有碰撞过        
  
          if(!prize.hit)        
  
          {        
  
              //判断碰撞        
  
              if(CheckIntersect(prize, animal, 0))        
  
              {        
  
                  prize.hit = true;        
  
                  //熊反弹下沉        
  
                  verticalSpeed = speed;        
  
                  //总分增加        
  
                  score += prize.point;        
  
              }        
  
          }        
  
      }        
  
         
  
  }

F、绘制分数

 
 
 
  
  
  //描绘分数        
  
  function DrawScore()        
  
  {        
  
      ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板        
  
      ctx.font = "12pt Arial";        
  
      ctx.fillText("" + score, 425, 25);  //得分        
  
  }

#p#

综合上面的代码，到此第八回的完整代码如下：

 
 
 
  
  
            
  
            
  
            
  
            
  
  绘制奖品-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;//熊旋转的速度        
  
      var flowerImg = new Image();//奖品鲜花        
  
      var leafImg = new Image();//奖品叶子        
  
      var acornImg = new Image();//奖品橡子        
  
      var gameRunning = false;//游戏运行状态        
  
      var gameloopId;//记住循环的变量        
  
      var lives=3;//3条生命数        
  
      var livesImages = new Array();//生命图片数组        
  
      var score = 0;//分数        
  
      var scoreImg = new Image();//分数板        
  
      //公用 定义一个游戏物体戏对象           
  
      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();        
  
              
  
      //定义奖品数组Prizes和对象Prize，继承游戏对象GameObject        
  
      var prizes = new Array();        
  
      function Prize() {};        
  
      Prize.prototype = new GameObject();//继承游戏对象GameObject        
  
      Prize.prototype.row = 0;//奖品行位置        
  
      Prize.prototype.col = 0;//奖品列位置        
  
      Prize.prototype.hit = false;//是否被撞过        
  
      Prize.prototype.point = 0;//分数        
  
              
  
      function GameLoop()           
  
      {           
  
          //清除屏幕           
  
          ctx.clearRect(0, 0, screenWidth, screenHeight);           
  
          ctx.save();           
  
          //绘制背景           
  
          ctx.drawImage(backgroundForestImg, 0, 0);           
  
          //绘制蘑菇           
  
          ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);         
  
          //绘制奖品        
  
          DrawPrizes();        
  
          //绘制生命条        
  
          DrawLives();        
  
          //绘制分数板        
  
          DrawScore();                
  
          //绘制熊        
  
          //改变移动动物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();        
  
          //检测熊碰撞奖品        
  
          HasAnimalHitPrize();        
  
          }           
  
      //加载图片           
  
      function LoadImages()           
  
      {           
  
          mushroomImg.src = "images/mushroom.png";//蘑菇           
  
          backgroundForestImg.src = "images/forest1.jpg";//森林背景图          
  
          bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的        
  
          flowerImg.src = "images/flower.png";//奖品花        
  
          acornImg.src = "images/acorn.png";//奖品橡子        
  
          leafImg.src = "images/leaf.png";//奖品叶子        
  
          scoreImg.src = "images/score.png";//分数板        
  
          //生命图片因为只有6个，所以最多只能6个        
  
          for(var x=0; x<6; x++)        
  
          {        
  
              livesImages[x] = new Image();           
  
              livesImages[x].src = "images/lives" + x + ".png";        
  
          }        
  
                  
  
          mushroom.image = mushroomImg;           
  
          animal.image = bearEyesClosedImg;        
  
          backgroundForestImg.onload = function(){GameLoop(); };        
  
      }         
  
      //熊碰撞边界        
  
      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)        
  
          {        
  
              lives -=1;//生命减1        
  
              if(lives>0)        
  
              {        
  
                  horizontalSpeed = speed;        
  
                  verticalSpeed = -speed;        
  
                  animal.x = parseInt(screenWidth/2);        
  
                  animal.y = parseInt(screenHeight/2);        
  
                  $("#BtnImgStart").show();        
  
                  ToggleGameplay();        
  
                  GameLoop();        
  
              }        
  
          }        
  
          //熊碰到上边边界        
  
          if(animal.y<0)        
  
          {        
  
              verticalSpeed = -verticalSpeed;        
  
          }        
  
          if(lives<=0)        
  
              GameOver();        
  
      }        
  
      //事件处理           
  
      function AddEventHandlers()           
  
      {           
  
          //鼠标移动则蘑菇跟着移动           
  
          $("#container").mousemove(function(e){           
  
              mushroom.x = e.pageX - (mushroom.image.width/2);           
  
          });         
  
          //开始按钮           
  
          $("#BtnImgStart").click(function (){                
  
              ToggleGameplay();        
  
          });        
  
      }         
  
      //检测2个物体是否碰撞        
  
      function CheckIntersect(object1, object2, overlap)        
  
      {        
  
          //    x-轴                      x-轴        
  
          //  A1------>B1 C1              A2------>B2 C2        
  
          //  +--------+   ^              +--------+   ^        
  
          //  | object1|   | y-轴         | object2|   | y-轴        
  
          //  |        |   |              |        |   |        
  
          //  +--------+  D1              +--------+  D2        
  
          //        
  
          //overlap是重叠的区域值        
  
          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;//改变垂直速度。也即动物向上移动        
  
               
  
          }        
  
      }        
  
      //创建奖品数组        
  
      function InitPrizes()        
  
      {        
  
          var count=0;        
  
          //一共3行                                                   

                                                当前标题：蘑菇与熊游戏开发第八回（完善游戏）                                                

                                                当前路径：http://jxjierui.cn/article/codcspc.html

新闻中心

其他资讯