JavaScript实现贪吃蛇

这里写链接内容# JavaScript实现贪吃蛇

之前在网上看到过一个16行的贪吃蛇代码，只不过我才疏学浅，无法去了解之中的深髓，不过我也通过自己的理解完成了自己的贪吃蛇代码，实现了基本的贪吃蛇游戏。以下便是js代码。

/**
 * JavaScript文件
 * Time: 2018/8/14 11:03
 * Author: SanPhantom
 * Feature: 贪吃蛇
 */

var box = document.querySelector(".box");
/**
 * Feature: 食物小方块封装
 */
(function () {
    var elements = [];

    function Food(width, height, color, x, y) {
        this.width = width || 20;
        this.height = height || 20;
        this.color = color || "yellow";
        this.x = x || 0;
        this.y = y || 0;
        this.element = document.createElement("div");
    }

    Food.prototype.init = function (box) {
        var foodDiv = this.element;
        //设置样式
        foodDiv.style.width = this.width + "px";
        foodDiv.style.height = this.height + "px";
        foodDiv.style.backgroundColor = this.color;
        foodDiv.style.position = "absolute";
        foodDiv.style.left = this.x + "px";
        foodDiv.style.top = this.y + "px";
        //把食物放到一个数组中
        elements.push(foodDiv);
        //添加食物
        box.appendChild(foodDiv);
    };

    Food.prototype.setCoordinate = function (box) {
        //随机设置食物的坐标信息
        this.x = ~~(Math.random() * (box.offsetWidth / this.width)) * this.width;
        this.y = ~~(Math.random() * (box.offsetHeight / this.height)) * this.height;
        this.init(box);
    };
    //封装一个删除食物的函数
    // function removeFood () {
    //     //遍历elements数组
    //     for (var i = 0; i < elements.length; i++) {
    //         //存放对应下标的数组里面的元素
    //         var ele = elements[i];
    //         ele.parentNode.removeChild(ele);
    //         elements.splice(i, 1);
    //     }
    // }

    window.Food = Food;
}());

/**
 * Feature: 小蛇封装
 */
(function () {
    //存放小蛇
    var snake = [];

    //构造函数
    function Snake(width, height, direction) {
        this.width = width || 20;
        this.height = height || 20;
        this.direction = direction || 2;
        this.body = [
            {x: 3, y: 2, color: "red"},
            {x: 2, y: 2, color: "orange"},
            {x: 1, y: 2, color: "orange"},
        ]
    }

    //显示小蛇
    Snake.prototype.init = function (box) {
        //遍历设置每个部位的样式
        for (var i = 0; i < this.body.length; i++) {
            //存放小蛇的每一个方块
            var obj = this.body[i];
            //创建一个蛇形Div
            var snakeDiv = document.createElement("div");
            box.appendChild(snakeDiv);
            //设置样式
            snakeDiv.style.position = "absolute";
            snakeDiv.style.width = this.width + "px";
            snakeDiv.style.height = this.height + "px";
            snakeDiv.style.left = this.width * obj.x + "px";
            snakeDiv.style.top = this.height * obj.y + "px";
            snakeDiv.style.backgroundColor = obj.color;
            //添加到数组里
            snake.push(snakeDiv);
        }
    };
    Snake.prototype.move = function (box) {
        for (var i = this.body.length - 1; i > 0; i--) {
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }
        //设置小蛇的头部
        switch (this.direction) {
            case 2:
                this.body[0].x += 1;
                break;
            case 0:
                this.body[0].x -= 1;
                break;
            case 1:
                this.body[0].y -= 1;
                break;
            case 3:
                this.body[0].y += 1;
                break;
        }
        removeSnake();
        this.init(box);
    };
    Snake.prototype.eat = function () {
        var last = this.body[this.body.length - 1];
        this.body.push({
            x: last.x,
            y: last.y,
            color: last.color
        });
    };

    //删除上一帧小蛇
    function removeSnake() {
        for (var i = snake.length - 1; i >= 0; i--) {
            var sn = snake[i];
            sn.parentNode.removeChild(sn);
            snake.splice(i, 1);
        }
    }

    window.Snake = Snake;

}());

/**
 * Feature: 游戏封装
 */
(function () {
    //游戏的构造函数
    function Game(box) {
        this.food = new Food();
        this.snake = new Snake();
        this.box = box;
        this.time = 200;
    }

    //添加游戏方法
    Game.prototype.init = function () {
        //初始化食物和小蛇
        this.food.setCoordinate(this.box);
        console.log(this.food.x, this.food.y);
        this.snake.init(this.box);
        this.play();
    };
    Game.prototype.play = function () {
        //判断this值，来确定that值
        var that = null;
        if (this === window) {
            that = this.game;
        } else {
            that = this;
        }
        //获取蛇头的定位
        var snakeX = that.snake.body[0].x;
        var snakeY = that.snake.body[0].y;
        //判断是否走到了尽头
        if (snakeX >= that.box.offsetWidth / that.snake.width || snakeX < 0) {
            return alert("Game Over");
        }
        if (snakeY >= that.box.offsetHeight / that.snake.height || snakeY < 0) {
            return alert("Game Over");
        }
        for (var i = 1; i < that.snake.body.length; i++) {
            if (snakeX === that.snake.body[i].x && snakeY === that.snake.body[i].y) {
                return alert("Game Over");
            }
        }
        that.snake.move(box);
        //判断是否吃到了食物
        if ((snakeX === that.food.x / that.food.width) && (snakeY === that.food.y / that.food.height)) {
            console.log("wochidaole");
            that.food.setCoordinate(that.box);
            that.snake.eat();
        }

        //上下左右监听
        window.onkeydown = function (e) {
            var n = event.keyCode - 37;
            n = n < 4 ? n : that.snake.direction;
            n = n >= 0 ? n : that.snake.direction;
            that.snake.direction = Math.abs(that.snake.direction - n) === 2 ? that.snake.direction : n;
        };
        setTimeout(arguments.callee, 200);
    };

    window.Game = Game;
}());
var game = new Game(box);
game.init();

演示地址：贪吃蛇