贪吃蛇

还记得当年你在诺基亚上玩的《贪吃蛇》吗?
没错，就是它▼

作为一款鼻祖级别的手机游戏，《贪吃蛇》有着相当简单的设计和玩法，但就是这样一条神奇的小白蛇，凭着自己那
不把自己吃到撑满屏幕誓不罢休的强大吃货属性、在一片狭小区域不惜付出撞墙或吞食自己尾巴而死的代价也要追逐美食的决心，
让无数玩家玩到上瘾欲罢不能。

首先第一步：先设置棋盘的大小，食物，蛇的样式。

table {
    border-collapse: collapse;
    border: 1px solid black;
}

td {
    width: 10px;
    height: 10px;
    /* border: 1px solid black; */
}

/* 食物的样式 */
.food {
    background: red;
}

/* 蛇的样式 */
.snake {
    background: green;
}
</style>

第二步：设置游戏引擎。
比如游戏属性：场景 蛇 食物:方法：开始 结束；

var gGameBox = {
    
    rows: 20,  // 行数
    
    cols: 20,  // 列数

    allTds: [], // 存储所有的td元素对象

    food: null, // 食物对象
    snake: 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 = "";
            }
        }
    },
    // 方法： 游戏开始
    start: function() {
        gGameBox.init(); // 游戏初始化
        gGameBox.food = new Food(); // 创建食物
        gGameBox.snake = new Snake(); // 创建蛇
        // 启动游戏时，定时移动蛇
        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);
    }
};

第三步：创建蛇的食物。

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 == "down")
    {
        y++;
    }

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

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

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