JS的贪吃蛇

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

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

    food: null, // 食物对象

    snake: null, // 蛇对象
    
    timer: null, // 计时器
    clear:function(){
        for (var i = 0;i

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();
}