前端使用canvas实现贪吃蛇小游戏

贪吃蛇是一款益智小游戏，通过点击上下左右四个按键控制蛇头移动。

• 项目地址：snake
• demo地址：https://wenonly.github.io/demobar/#/xiaoyouxi/tanchishexiaoyouxi

设计思路

主要是设计蛇的身体和移动方法。将蛇的身体设置成一个数组，数组里存放蛇身每一节的xy坐标。游戏开始后，蛇头(数组第0位)会随着时间不断地移动，也就是x+1或x-1或y+1或y-1，当蛇头移动了，身体的每一节xy将等于移动前它们的前一节，也就是说，第二节的位置将变成移动前蛇头的位置，依次变化就形成了蛇身的移动效果。当蛇吃到了食物的时候，则在数组里push蛇身移动前最后一节的xy值。

功能实现

1. 通过canvas绘制画布

<canvas id="canvas" width="500" height="300" style="border:5px solid #2f0606;"></canvas>

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.fillStyle = "#c0b4b4";
ctx.fillRect(0, 0, 500, 300);

画布的长宽是500 * 300

2. 创建一条蛇

function Snake(x, y) {
   
    this.body = [[x, y]] // 蛇的身体
    this.direction = 'right' // 初始方向
    this.time = null // 定时器
    this.move = function() {
   
    }
    this.eat = function() {
   
    }
    this.stop = function() {
   
    }
}

创建了一个叫Snake的构造函数。其中，xy是蛇头的初始位置；body是蛇的身体，是一个二维数组；direction代表移动方向，有right、left、top、bottom四个参数；time是一个定时器；move是一个方法，控制蛇身的移动，这是整个贪吃蛇的核心；eat是吃的函数；stop停止移动。

可以直接new一个Snake对象。

snake