学习资料来源：
贪吃蛇(HTML+JS/英文字幕)
源码

页面布局

<head>
    <title>Snake Game</title>
    <style>
        canvas{
            display: block;
            margin: 0 auto; // 水平居中
        }
    </style>
</head>

// 规定大小
<canvas id="snake" width="608" height="608"></canvas>

<script src="snake.js"></script>

逻辑处理

获取canvas

1 2	const cvs = document.getElementById("snake"); const ctx = cvs.getContext("2d");

定义盒子大小

const box = 32;

加载图片资源

const ground = new Image();
ground.src = "img/ground.png";

const foodImg = new Image();
foodImg.src = "img/food.png";

加载音频资源

let dead = new Audio();
let eat = new Audio();
let up = new Audio();
let right = new Audio();
let left = new Audio();
let down = new Audio();

dead.src = "audio/dead.mp3";
eat.src = "audio/eat.mp3";
up.src = "audio/up.mp3";
right.src = "audio/right.mp3";
left.src = "audio/left.mp3";
down.src = "audio/down.mp3";

定义蛇的位置

let snake = []; // 一个数组

snake[0] = { // 起始位置
    x : 9 * box,
    y : 10 * box
};

定义食物的位置

let food = {
    x : Math.floor(Math.random()*17+1) * box,
    y : Math.floor(Math.random()*15+3) * box
}

定义得分

let score = 0;

获取键盘按键信息

let d;
document.addEventListener("keydown",direction);

function direction(event){
    let key = event.keyCode;
    if( key == 37 && d != "RIGHT"){
        left.play();
        d = "LEFT";
    }else if(key == 38 && d != "DOWN"){
        d = "UP";
        up.play();
    }else if(key == 39 && d != "LEFT"){
        d = "RIGHT";
        right.play();
    }else if(key == 40 && d != "UP"){
        d = "DOWN";
        down.play();
    }
}

碰撞检测

循环 - 头比较每一个地方。

function collision(head,array){
  for(let i = 0; i < array.length; i++){
      if(head.x == array[i].x && head.y == array[i].y){
          return true;
      }
  }
  return false;
}

绘制内容

function draw(){
  
  ctx.drawImage(ground,0,0); // 绘制地面
  
	// 绘制蛇
  for( let i = 0; i < snake.length ; i++){
		// 头是绿色，身体白色。
      ctx.fillStyle = ( i == 0 )? "green" : "white";
		// 绘制
      ctx.fillRect(snake[i].x,snake[i].y,box,box);
    // 增加边框
      ctx.strokeStyle = "red";
      ctx.strokeRect(snake[i].x,snake[i].y,box,box);
  }
  
	// 绘制食物
  ctx.drawImage(foodImg, food.x, food.y);
  
  // old head position - 当前头部位置
  let snakeX = snake[0].x;
  let snakeY = snake[0].y;
  
  // which direction - 改变后头部位置 - 依据x y 轴
  if( d == "LEFT") snakeX -= box;
  if( d == "UP") snakeY -= box;
  if( d == "RIGHT") snakeX += box;
  if( d == "DOWN") snakeY += box;
  
  // if the snake eats the food - 碰到食物
  if(snakeX == food.x && snakeY == food.y){
      score++; // 得分 ++
      eat.play(); // 加载音频
      food = { // 持续生成食物位置
          x : Math.floor(Math.random()*17+1) * box,
          y : Math.floor(Math.random()*15+3) * box
      }
      // we don't remove the tail
  }else{
      // remove the tail  移出尾部 - 移动。
      snake.pop();
  }
  
  // add new Head
  
  let newHead = {
      x : snakeX,
      y : snakeY
  }
  
  // game over
	// 超出边界
  if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){
      clearInterval(game); // 停止计时器
      dead.play(); // 播放dead声音
			
			// 这里可以设置重新开始的开关！
  }
  
	// 添加头部。
  snake.unshift(newHead);
  
	// 写入得分
  ctx.fillStyle = "white";
  ctx.font = "45px Changa one";
  ctx.fillText(score,2*box,1.6*box);
}

开始游戏

计时器
let game = setInterval(draw,100);

总结

伪代码：

获取canvas
设置盒子大小
定义加载图片/音频资源
定义蛇 / 食物 / 得分
获取键盘信息
碰撞检测 - 碰到自己 - 循环判断x ， y和头部是否相等。
循环渲染
- 绘制地面
- 绘制蛇
- 绘制食物
- 判断方向 - 修改头部位置
- 如果是食物 - 不去除尾部，不是的话，去除尾部
- 把改变方向后的盒子放入头部
- 判断是否超过边界和碰撞到自己 - 是就结束定时器，否则继续执行
- 用canvas写入得分信息
开启定时器 - 启动游戏

主要内容：
如果增加长度 - 写入canvas - 循环蛇的信息，判断是否是食物
如果判断相交 - x，y + 循环 + 边界条件
游戏开始 - 开启定时器！