一.简介

1976年，Gremlin平台推出了一款经典街机游戏Blockade。游戏中，两名玩家分别控制一个角色在屏幕上移动，所经之处砌起围栏。角色只能向左、右方向90度转弯，游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂？其实就是下面这个样子：

基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋，玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。

Blockade 很受欢迎，类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏——Snake。

 

 

 

二.相关算法

a.移动,蛇尾去掉，蛇头加一个元素

      p.push({ x: p[p.length - 1].x + 1, y: p[p.length - 1].y });                          p.shift();  

  b.生成蛇的食物（这里可以加一个递归，如果生成的位置和蛇的位置重叠，重新生成，一直递归下去直到没有重叠）

   var MR = Math.random;          function drawSnakeAndFood(p) {              if (foodPositions.x == -1 && foodPositions.y == -1) {                  //random____0----39                  foodPositions.x = MR() * 40 | 0;                  foodPositions.y = MR() * 40 | 0;              }              cxt.fillStyle = randomColor();              cxt.fillRect(foodPositions.x * width, foodPositions.y * height, height, width);          }  

  c.吃食物，如果蛇头的位置和食物的位置是相同的话，代表吃到了食物，不进行p.shift()，这样的话蛇身就变长

     if (p[p.length - 1].x == foodPositions.x && p[p.length - 1].y == foodPositions.y) {                              foodPositions.x = -1;                              foodPositions.y = -1;                          } else {                              clearColor(p[0]);                              p.shift();                          }  

  d.GameOver判断

gameover分两种，

第一种是撞到墙壁的障碍物

if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) { gameOver = true; }

第二种是撞到自己的身体

  function IsInSnake(bodyPositions, p) {              for (i = 0; i < bodyPositions.length - 1; i++) {                  if (bodyPositions[i].x == p.x && bodyPositions[i].y == p.y ) {                      return true;                  }              }              return false;          }

d.控制核心（Jscex）

    var gameAsync = eval(Jscex.compile("async", function (p) {              while (true) {                  $await(Jscex.Async.sleep(100));                  if (p[p.length - 1].x < 0 || p[p.length - 1].x > 39 || p[p.length - 1].y < 0 || p[p.length - 1].y > 39) {                      gameOver = true;                  }                 ``````                 ``````                 ``````                  if (IsInSnake(p, { x: p[p.length - 1].x, y: p[p.length - 1].y })) {                      gameOver = true;                  }                  drawSnakeAndFood(p);                  if (gameOver) {                        drawGameOver();                      document.getElementById("btnReset").disabled = "";                      break;                  }              }          }));  

  that’s all！就这么简单。这可谓是html5 canvas编程入门最合适不过的游戏了。