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

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

一、添加开始按钮

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

<img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./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);去掉

二、添加生命数条

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<prizes.length; 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<prizes.length; c++)          {              checkPrize = prizes[c];              if(checkPrize.hit == false)                  return false;                            }          return true;      }

三、添加得分

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<prizes.length; 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);  //得分      }

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

<!DOCTYPE>        <html>        <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>绘制奖品-html5中文网</title>        <!-- 要记得引用jquery-1.4.2.js -->     <script type="text/javascript" src="./js/jquery-1.4.2.js"></script>        <script type="text/javascript" >            //全局变量             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行              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++;                  }              }          }          //绘制奖品，把奖品显示在画布上          function DrawPrizes()          {              for(var x=0; x<prizes.length; x++)              {                  currentPrize = prizes[x];                             //假如没有被撞击，则描绘                  if(!currentPrize.hit)                  {                      ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);                  }              }              if(AllPrizesHit())              {                  GameOver();              }          }                    //撞到奖品          function HasAnimalHitPrize()          {              //取出所有奖品              for(var x=0; x<prizes.length; x++)              {                  var prize = prizes[x];                  //假如没有碰撞过                  if(!prize.hit)                  {                      //判断碰撞                      if(CheckIntersect(prize, animal, 0))                      {                          prize.hit = true;                          //熊反弹下沉                          verticalSpeed = speed;                          //总分增加                          score += prize.point;                      }                  }              }               }          //判断是否撞完奖品，假如其中有一个          function AllPrizesHit()          {              for(var c=0; c<prizes.length; c++)              {                  checkPrize = prizes[c];                  if(checkPrize.hit == false)                      return false;                                    }              return true;          }          //开始或者暂停游戏          function ToggleGameplay()          {              gameRunning = !gameRunning;              if(gameRunning)              {                  $("#BtnImgStart").hide();                   gameloopId = setInterval(GameLoop, 10);               }else              {                  clearInterval(gameloopId);              }          }          //结束游戏          function GameOver()          {              gameRunning = false;              clearInterval(gameloopId);              alert("游戏结束!");          }          //描绘生命条          function DrawLives()          {              ctx.drawImage(livesImages[lives], 0, 0);          }          //描绘分数          function DrawScore()          {              ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板              ctx.font = "12pt Arial";              ctx.fillText("" + score, 425, 25);  //得分          }          //初始化             $(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);               //初始化奖品              InitPrizes();                        });                        </script>        </head>                <body>            <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">                <canvas id="canvas" width="480" height="320" >               浏览器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">请下载</a>支持html5的浏览器来观看               </canvas>            </div>               <img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">              </body>        </html>

感谢各位的阅读，以上就是“怎么用html5实现蘑菇与熊游戏”的内容了，经过本文的学习后，相信大家对怎么用html5实现蘑菇与熊游戏这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！