在开始的时候我们需要做一个游戏引擎，用来实现蛇体运行的平台和蛇，和果子，以及开始游戏，结束游戏。
游戏引擎

var gGameBox={
  rows:20,//行数
cols:20,//列数
allTds: [], // 存储所有的td元素对象

    food: null, // 食物对象

    snake: null, // 蛇对象
    
    timer: null, // 计时器
    clear:function(){
        for (var i = 0;i<gGameBox.allTds.length ; i++)
        {
            for (var j = 0 ;j<gGameBox.allTds[i].length ; j++)
            {
                gGameBox.allTds[i][j].className = "";
            }
        }
    },
keyControl:function(){
        window.onkeydown=function(e){
            var c =e.keyCode
            
            if (c==37)
            {
                if (gGameBox.snake.direct == "right")
                {
                    return;
                }
                gGameBox.snake.direct = "left";
            }
            else if (c==38)
            {
                if (gGameBox.snake.direct == "down")
                {
                    return;
                }
                gGameBox.snake.direct = "top";
            }
            else if (c==39)
            {
                if (gGameBox.snake.direct == "left")
                {
                    return;
                }
                gGameBox.snake.direct = "right";
            }
            else if (c==40)
            {
                if (gGameBox.snake.direct == "top")
                {
                    return;
                }
                gGameBox.snake.direct = "down";
            }
        }
    },

    // 方法： 游戏开始
    start: function() {

        gGameBox.init(); // 游戏初始化
        
        gGameBox.food = new Food(); // 创建食物
        gGameBox.snake = new Snake(); // 创建蛇

        gGameBox.keyControl();
        // 启动游戏时，定时移动蛇
    gGameBox.timer = setInterval(function() {

            // 1. 清空棋盘
            gGameBox.clear();
            
            // 2. 蛇移动
            gGameBox.snake.move();

            // 3. 显示食物
            gGameBox.food.show();

        }, 1000);

        //gGameBox.snake.fresh();
    },

        // 初始化
    init: function() {
        // 场景布置好, 用表格来做
        var oTable = document.createElement("table");
    
        for (var i = 0; i < gGameBox.rows; i++)
        {
            // 创建tr
            var oTr = document.createElement("tr"); 

            // 每一行，定义1个空数组
            var arr = [];

            for (var j = 0; j < gGameBox.cols; j++) {
                // 创建td
                var oTd = document.createElement("td"); 

                oTr.appendChild(oTd);

                // 将td放到空数组中
                arr.push(oTd);
            }
            // 将当前行所有的td，压入到 allTds 属性中
            gGameBox.allTds.push(arr);

            oTable.appendChild(oTr);
        }

        // 添加到body
        document.body.appendChild(oTable);
    }

}

food的实现

function Food() {

    // 坐标
    this.x = 0;
    this.y = 0;

    // 一开始就随机位置
    this.change();
}

// 方法1: 出现在环境中
Food.prototype.show = function() {
    gGameBox.allTds[this.y][this.x].className = "food";
}

// 方法2: 改变位置, 随机的
Food.prototype.change = function() {
    this.x = parseInt(Math.random() * gGameBox.cols);
    this.y = parseInt(Math.random() * gGameBox.rows);

    this.show();
}

蛇体的实现

function Snake() {

    // 存储蛇 所有节点坐标， 同时也存储了蛇的长度  this.arr.length
    //  默认蛇头  this.arr[0]  节点
    this.arr = [
        {x: 5, y: 1},
        {x: 4, y: 1},
        {x: 3, y: 1},
        {x: 2, y: 1},
        {x: 1, y: 1}
    ];

    // 当前移动方向：   left, right, down, up
    this.direct = "down";

    // 创建完就刷新到页面上
    this.fresh();
}



// 方法1： 更新到页面上  fresh 刷新  
Snake.prototype.fresh = function() {
    // 给所有蛇节点，都添加样式
    for (var i = 0; i < this.arr.length; i++)
    {
        // this.arr[i] 是蛇节点对象
        var x = this.arr[i].x;
        var y = this.arr[i].y;

        gGameBox.allTds[y][x].className = "snake"
    }
}

// 方法2： 移动
Snake.prototype.move = function() {

    // 蛇头坐标
    var x = this.arr[0].x;
    var y = this.arr[0].y;

    // 思路： 根据当前蛇的方向，来分情况处理
    if (this.direct == "right")
    {
        //   4      3       2     1      0
        // (1,1) (2,1) (3,1) (4,1) (5,1)
        // (2,1) (3,1) (4,1) (5,1) (6,1)
        //       (2,1) (3,1) (4,1) (5,1) (6,1)
        //  在 蛇头 增加新点 (6,1)， 删除蛇尾
        x++;

    }
    else if (this.direct == "left")
    {
        x--
    }
    else if (this.direct == "top")
    {
        y--;
    }
    else if (this.direct == "down")
    {
        y++;
    }

    /*if (x<0)
    {
        //x=gGameBox.cols-1
            this.direct ="down"
        
    }*/
    if (x<0||y<0||x>gGameBox.rows||y>gGameBox.cols)
    {
        alert("gg");
        clearInterval(gGameBox.timer);
        return;
    }

    if (x==gGameBox.food.x && y== gGameBox.food.y)
    {
        this.arr.unshift({x: x, y: y});
        gGameBox.food.change();
        this.fresh();

        return;
    }

    // 在蛇头增加新点
    this.arr.unshift({x: x, y: y});

    // 删除蛇尾
    this.arr.pop();

    // 将新蛇刷新到页面上
    this.fresh();
}