HTML5制作贪吃蛇游戏

互联网 17-8-7

本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了H5 canvas实现贪吃蛇小游戏，分享给大家，具体如下：

实现效果如下

实现思路：

ps：这个只是思路，详细可看代码注释

一、先把蛇画出来

定义一下蛇的结构，用一个数组保存一堆矩形，包含蛇头（红）和蛇身（灰）。
画蛇（初始状态）

二、蛇能动（重点）

蛇移动方式：自始至终都只有蛇头在动

画一个灰色的方块，位置与蛇头重叠
将这个方块插到数组中蛇头后面一个的位置arrar.splice(0,1,rect)
砍去末尾的方块array.pop()
将蛇头向设定方向移动一格

需要一个保存方向的变量(direction)
根据方向进行移动，一次移动一个格
根据按键改方向

三、随机投放食物

需要随机食物的位置
需要判断食物在不在蛇身上。

四、吃食物

判断食物是否与蛇头重叠
数组加一个元素（少删除一个元素就是加一个元素）
生成新的食物

五、gameover

撞墙判定

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Document</title>      <style>          #canvas{              box-shadow: 0 5px 40px black;          }      </style>  </head>  <body>      <canvas id="canvas" width="800" height="500"></canvas>  </body>  <script>      var canvas = document.getElementById('canvas');      var context = canvas.getContext('2d');        //构造对象方块      function Rect (x,y,w,h,color) {          this.x = x;          this.y = y;          this.w = w;          this.h = h;          this.color = color;      }      //画方块的方法      Rect.prototype.draw = function () {          context.beginPath();          context.fillStyle = this.color;          context.rect(this.x,this.y,this.w,this.h);          context.fill();          context.stroke();      }        //构造对象蛇      function Snake () {            //定义一个空数组存放组成整蛇的方块对象          var snakeArray = [];            //画出4个方块，设置成灰色          for (var i = 0; i < 4; i++) {              var rect = new Rect(i*20,0,20,20,"gray");              //之所以用splice（往前加）而不是用push（往后加），是为了让蛇头出现在数组第一个位置              snakeArray.splice(0,0,rect);               }            //把数组第一个作为蛇头，蛇头设成红色          var head = snakeArray[0];          head.color = "red";            //此处将两个后面常用的东西定为属性，方便后面调用          this.head = snakeArray[0];  //蛇头          this.snakeArray = snakeArray;  //整蛇数组            //给定初始位置向右(同keyCode右箭头)          this.direction = 39;      }      //画蛇的方法      Snake.prototype.draw = function () {          for (var i = 0; i < this.snakeArray.length; i++) {              this.snakeArray[i].draw();          }       }      //蛇移动的方法      Snake.prototype.move = function () {            //此处是核心部分，蛇的 移动方式          //1、画一个灰色的方块，位置与蛇头重叠          //2、将这个方块插到数组中蛇头后面一个的位置          //3、砍去末尾的方块          //4、将蛇头向设定方向移动一格          var rect = new Rect(this.head.x,this.head.y,this.head.w,this.head.h,"gray");          this.snakeArray.splice(1,0,rect);            //判断是否吃到食物，isEat判定函数写在最后了          //吃到则食物重新给位置，不砍去最后一节，即蛇变长          //没吃到则末尾砍掉一节，即蛇长度不变          if (isEat()){              food = new getRandomFood();          }else{              this.snakeArray.pop();          }            //设置蛇头的运动方向，37 左，38 上，39 右，40 下          switch (this.direction) {              case 37:                  this.head.x -= this.head.w                  break;              case 38:                  this.head.y -= this.head.h                  break;              case 39:                  this.head.x += this.head.w                  break;              case 40:                  this.head.y += this.head.h                  break;              default:                      break;          }            // gameover判定          // 撞墙          if (this.head.x > canvas.width || this.head.x < 0 || this.head.y > canvas.height || this.head.y < 0){              clearInterval(timer);          }            // 撞自己，循环从1开始，避开蛇头与蛇头比较的情况          for (var i = 1; i < this.snakeArray.length; i++) {              if (this.snakeArray[i].x == this.head.x && this.snakeArray[i].y == this.head.y){                  clearInterval(timer);              }          }      }        //画出初始的蛇      var snake = new Snake()      snake.draw();        //画出初始的食物      var food = new getRandomFood()        //定时器      var timer = setInterval(function () {          context.clearRect(0,0,canvas.width,canvas.height);          food.draw();          snake.move();          snake.draw();      }, 100)        //键盘事件，其中的if判定是为了让蛇不能直接掉头      document.onkeydown = function (e) {          var ev = e||window.event;          switch(ev.keyCode){              case 37:{                  if (snake.direction !== 39){                      snake.direction = 37;                  }                  break;              }              case 38:{                  if (snake.direction !== 40){                      snake.direction = 38;                  }                  break;              }              case 39:{                  if (snake.direction !== 37){                      snake.direction = 39;                  }                  break;              }              case 40:{                  if (snake.direction !== 38){                      snake.direction = 40;                  }                  break;              }              }          ev.preventDefault();      }        //随机函数，获得[min,max]范围的值      function getNumberInRange (min,max) {          var range = max-min;           var r = Math.random();          return Math.round(r*range+min)      }        //构建食物对象      function getRandomFood () {            //判定食物是否出现在蛇身上，如果是重合，则重新生成一遍          var isOnSnake = true;            //设置食物出现的随机位置          while(isOnSnake){              //执行后先将判定条件设置为false，如果判定不重合，则不会再执行下列语句              isOnSnake = false;              var indexX = getNumberInRange(0,canvas.width/20-1);              var indexY = getNumberInRange(0,canvas.height/20-1);              var rect = new Rect(indexX*20, indexY*20, 20, 20, "green");              for (var i = 0; i < snake.snakeArray.length; i++) {                  if(snake.snakeArray[i].x == rect.x && snake.snakeArray[i].y == rect.y){                      //如果判定重合，将其设置为true，使随机数重给                      isOnSnake = true;                      break;                  }              }          }          //返回rect，使得实例化对象food有draw的方法          return rect;      }        //判定吃到食物，即蛇头坐标与食物坐标重合      function isEat () {          if (snake.head.x == food.x && snake.head.y == food.y){              return true;          } else {              return false;          }      }    </script>  </html>

以上就是HTML5制作贪吃蛇游戏的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：游戏