怎么用html5实现蘑菇与熊游戏

这篇文章主要讲解了"怎么用html5实现蘑菇与熊游戏"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"怎么用html5实现蘑菇与熊游戏"吧！

一、添加开始按钮

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

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);去掉

二、添加生命数条

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
三、添加得分
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
F、绘制分数
//描绘分数      function DrawScore()      {          ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板          ctx.font = "12pt Arial";          ctx.fillText("" + score, 425, 25);  //得分      }
综合上面的代码， 到此第八回的完整代码如下：
                                                                                         
                               浏览器不支持html5,请下载支持html5的浏览器来观看                           
                                     
感谢各位的阅读，以上就是"怎么用html5实现蘑菇与熊游戏"的内容了，经过本文的学习后，相信大家对怎么用html5实现蘑菇与熊游戏这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！