js实现贪吃蛇

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

展示

ZefGGDPR - 码上掘金 (juejin.cn)

详细设计

游戏思路：

• 创建方块、控制按钮（showBlock）
• 方块移动（点击开始，不断创建并移除前面的方块，用到队列先进先出）
• 控制移动（doUp\doDown\doLeft\doRight，加入用键盘控制）
• 产生食物方块(generateFood)
• 吃到食物变长（当方块位置相同时，吃食物）
• 判断撞墙、撞到自己游戏结束
• 设置积分

核心方法解析

贪吃蛇大家都玩过，但你会制作嘛？听起来好像很难的样子，其实非常的简单，话不多说直接上代码

我们先把dom结构写出来

 <div id="content" class="content">
 </div>
  <button onclick="start()">开始游戏</button>
 <button onclick="doUp()">上</button>
 <button onclick="doDown()">下</button>
 <button onclick="doLeft()">左</button>
 <button onclick="doRight()">右</button>
 <div id="score">0</div>

其中，content为整个布局的大盒子，start()进行开始游戏，其他的方法就是对其的操作等.

 //定义参数
 var snackBlock = {};
 snackBlock.top = 20;
 snackBlock.left = 20;
 var firstDiv = showBlock(snackBlock.left, snackBlock.top, "red");
 var snackDivArray = [];//装方块的数组
 snackDivArray.push(firstDiv);

其中push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度

好的这样我们就得到了一条可爱的小蛇(然鹅并没有看出来哪里可爱- -)。什么？你问我他的头哪去了，很简单，在给元素加了定位以后后面的元素会覆盖掉前面的元素，所以只是头部和身体重叠了你看不到而已。

 function showBlock(left, top, color) {//产生方块
  var content = document.getElementById("content");
  var snackDiv = document.createElement("div");
  snackDiv.style.width = "20px";
  snackDiv.style.height = "20px";
  snackDiv.style.left = left + "px";
  snackDiv.style.top = top + "px";
  snackDiv.style.background = color;
  snackDiv.style.position = "absolute";
  content.appendChild(snackDiv);
  return snackDiv;
 }

随后咱们得让这条蛇动起来是吧，那么我们怎么让他动起来呢？原理很简单，我们可以设置一个定时器setInterval()，而怎么让他动呢，只需要设置一个数值，让这个值每动一下就+=20，然后通过判断是上下动还是左右动，来给元素的left与top赋值。我们把逻辑写成代码，就出来了如下的代码

 function start() {
  var interval = setInterval(function () {
  var newBlock = {};
  switch (direction) {
   case up:
   newBlock.top = snackBlock.top - 20;
   newBlock.left = snackBlock.left;
   break;
   case down:
   newBlock.top = snackBlock.top + 20;
   newBlock.left = snackBlock.left;
   break;
   case left:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left - 20;
   break;
   case right:
   newBlock.top = snackBlock.top;
   newBlock.left = snackBlock.left + 20;
   break;

  }

下面就是对产生的方块进行加入到数组中，并且移除产生的方块，再产生新的方块，其中主要设置了一个标志位`eat`

//吃食物
  if (currentLeft == food.left && currentTop == food.top) {
   removeBlock(food);
   food = generateFood();
   eat = true;
   hasEat = true;
   score += 10;//吃一个加10分
   document.getElementById("score").innerHTML = score;//写入div
  }

以及设计一些逻辑代码用于设置规则

 //是否撞墙
  if (currentLeft < 0 || currentLeft >= 800 || currentTop < 0 || currentTop >= 400) {
   alert("game over!");
   clearInterval(interval);
   return;
  }
  if (eat == false) {
   //移除尾巴
   removeBlock(snackDivArray.shift(div));
  }
  //是否撞到自己
  snackDivArray.forEach(function (item, index, array) {
   if (item.top == currentTop && item.left == currentLeft) {
   alert("game over!");
   clearInterval(interval);
   return;
   }