这样的美杜莎，你不爱？

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

蛇的初始化和创建

        table{
        border-collapse: collapse;
        background: transparent;
        border: 1px solid pink;
        }
        td{
        width: 24px;
        height: 24px;
        border: 1px solid pink;
        }

    <div id="app"></div>
    <script src="js/game.js"></script>
    <script>
        var game = new Game()
    </script>

function Game() {
    // alert('欢迎来到贪吃蛇');
    //行数
    this.row = 20;
    //列数
    this.col = 20;
    // 分数
    this.score = 0;
    //初始化蛇类
    this.init();
}
Game.prototype.init = function () {
    this.dom = document.createElement("table");
    var tr, td;
    //遍历行和列上树
    for (var i = 0; i < this.row; i++) {
        //遍历行，创建结点上树
        tr = document.createElement("tr");
        for (var j = 0; j < this.col; j++) {
            //遍历列，创建结点上树
            td = document.createElement("td");
            //追加到tr
            console.log(tr);
            tr.appendChild(td);
        }
        //追加结点上树
        this.dom.appendChild(tr);
    }
    //表格上树
    document.getElementById("app").appendChild(this.dom);
}

function Snake() {
    //蛇的初始化身体
    this.body = [
        /* { "row": 3, "col": 7 },
        {"row": 3,"col": 6}, */

        { "row": 3, "col": 5 },
        {"row": 3, "col": 4},
        {"row": 3,"col": 3},
        {"row": 3,"col": 2} ];
}

蛇的运动

Snake.prototype.update = function () {
    //当前的direction接收willdirection
    this.direction = this.willDirection;
    switch (this.direction) {
        case "R":
            //向右移动
            this.body.unshift({
                "row": this.body[0].row,
                "col": this.body[0].col + 1
            });
            break;
        case "D":
            //向下移动
            this.body.unshift({
                "row": this.body[0].row + 1,
                "col": this.body[0].col
            });
            break;
        case "L":
            //向左移动
            this.body.unshift({
                "row": this.body[0].row,
                "col": this.body[0].col - 1
            });
            break;
        case "U":
            //向上移动
            this.body.unshift({
                "row": this.body[0].row - 1,
                "col": this.body[0].col
            });
            break;

    }

// 设置键盘事件监听
Game.prototype.bindEvent = function () {
    var self = this;
    //键盘事件
    document.onkeydown = function (event) {
        // 获取键盘值
        console.log(event.keyCode, 'event');
        switch (event.keyCode) {
            //按下左键
            case 37:
                //先进行判断，如果当前的方向是向右移动，此时不能按左键
                if (self.snake.direction == 'R') return;
                self.snake.changeDirection("L");
                break;
            case 38:
                //按下上键
                //先进行判断，如果当前的方向是向下移动，此时不能按上键
                if (self.snake.direction == 'D') return;
                self.snake.changeDirection("U");
                break;
            case 39:
                //按下右键
                //先进行判断，如果当前的方向是向左移动，此时不能按右键
                if (self.snake.direction == 'L') return;
                self.snake.changeDirection("R");
                break;
            case 40:
                //按下下键
                //先进行判断，如果当前的方向是向上移动，此时不能按下键
                if (self.snake.direction == 'U') return;
                self.snake.changeDirection("D");
                break;
        }

    }
};

死亡判定

//死亡判定1：超出边界
    if (this.body[0].col > game.col - 1 || this.body[0].row > game.row - 1 || this.body[0].col < 0 || this.body[0].row < 0) {
        alert('游戏结束,得分为：' + game.score + "分");
        this.body.unshift(); //删除是因为当前的头增是不合法的，因为已经结束了
        clearInterval(game.timer)
    }
    // //死亡判定2：自己撞自己:当前蛇的头部和身体的某一部分row和col重合时
    for (var i = 1; i < this.body.length; i++) {
        if (this.body[0].col == this.body[i].col && this.body[0].row == this.body[i].row) {
            alert('游戏结束,得分为：' + game.score + "分");
            this.body.unshift(); //删除是因为当前的头增是不合法的，因为已经结束了
            clearInterval(game.timer)
        }

    }

食物的创建

function Food(gameSnake) {
    var self = this;
    // alert('食物');
    //食物的位置
    //do while 作用是先创建一个位置，再判断是否在蛇身上
    do {
        this.row = parseInt(Math.random() * gameSnake.row);
        this.col = parseInt(Math.random() * gameSnake.col);
    } while ((function () {
            //遍历蛇的row和col然后和新随机出来的进行判断是否重合
            for (var i = 0; i < gameSnake.snake.body.length; i++) {
                if (gameSnake.snake.body[i].row == self.row && gameSnake.snake.body[i].col == self.col) {
                    return true;
                }
            }
            return false;
        })());
    console.log(this.row, this.col);
}
Food.prototype.render = function () {
    game.setHTML(this.row, this.col, "?")
}

蛇吃食物

//蛇吃食物
    //判断如果当前蛇的头部没有和食物进行重合，就代表此时没有吃到食物，进行尾部删除；否则相反
    if (this.body[0].row == game.food.row && this.body[0].col == game.food.col) {
        // alert('吃到了');
        // 此时只有头部增加了，尾部没有删除
        // 创建新食物
        game.food = new Food(game)
        //加分数
        game.score++;
        //让帧编号归0，因为蛇会窜一下
        game.f = 0;
    } else {
        this.body.pop()
    }

效果

总体思路就是这样，再把游戏盘稍加修饰，老规矩，代码在下方

好了，退下吧，本王要休息了
哎~记得三连

• 扫码回复“贪吃蛇”获取源码
• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可