使用js实现贪吃蛇小游戏

//1.写食物
; (function (w) {
    //声明一个数组用来保存食物
    var list = [];
    //1.1.创建食物的构造函数:宽、高、颜色、x、y
    function Food(width, height, bgcolor, x, y) {
        this.width = width || 12;
        this.height = height || 12;
        this.bgcolor = bgcolor || "green";
        this.x = x || 0;
        this.y = y || 0;
    }
    //1.2.食物显示在地图上的方法
    Food.prototype.render = function (map) {
        //6.4生成新食物之前删除老食物
        removeOldFood(map);
        //2.1随机生成一个随机坐标
        this.x = Math.floor(Math.random() * map.offsetWidth / this.width) * this.width;
        this.y = Math.floor(Math.random() * map.offsetHeight / this.height) * this.height;
        //2.2创建一个div，让这个div拥有食物对象的所有显示信息
        var div1 = document.createElement(‘div‘);
        div1.style.position = "absolute";
        div1.style.left = this.x + ‘px‘;
        div1.style.top = this.y + ‘px‘;
        div1.style.width = this.width + ‘px‘;
        div1.style.height = this.height + ‘px‘;
        div1.style.backgroundColor = this.bgcolor;
        //2.3然后把食物对象显示到地图上
        map.appendChild(div1);
        //6.2保存这个食物
        list.push(div1);
    }
    //6.3删除老食物
    function removeOldFood(map) {
        for (var i = 0; i < list.length; i++) {
            map.removeChild(list[i]);
        }
        list.length = 0;
    }
    w.Food = Food;
}(window));

//2.写蛇
; (function (w) {
    //声明一个数组保存蛇
    var list = [];
    //2.1创建蛇的构造函数：宽，高，颜色，x，y，移动方向
    function Snake(width, height, bgcolor, direction, x, y, ) {
        this.width = width || 12;
        this.height = height || 12;
        this.direction = direction || "right";
        //声明一个数组保存蛇的身体
        this.body = [
            { x: 3, y: 1, bgcolor: "red" },
            { x: 2, y: 1, bgcolor: "blue" },
            { x: 1, y: 1, bgcolor: "blue" },
        ];
    }
    //2.2把蛇显示在地图上，封装的方法写在原型中
    Snake.prototype.render = function (map) {
        //4.4 渲染新蛇之前删除老蛇
        removeOldSnake(map);
        //遍历蛇的每一节身体，让每一节身体显示到地图上
        for (var i = 0; i < this.body.length; i++) {
            var snakeUnit = this.body[i];//蛇的每一节身体
            //创建div，让div拥有这一节蛇身体的所有显示信息
            var div1 = document.createElement(‘div‘);
            div1.style.position = ‘absolute‘;
            div1.style.left = snakeUnit.x * this.width + ‘px‘;
            div1.style.top = snakeUnit.y * this.height + ‘px‘;
            div1.style.width = this.width + ‘px‘;
            div1.style.height = this.height + ‘px‘;
            div1.style.backgroundColor = snakeUnit.bgcolor;
            //把div添加到地图上
            map.appendChild(div1);
            list.push(div1);

        }
    }
    //4.3 声明一个函数删除老蛇
    function removeOldSnake(map) {
        //老蛇div都在list里面，遍历删除元素
        for (var i = 0; i < list.length; i++) {
            map.removeChild(list[i]);
        }
        //清空list
        list.length = 0;
    }
    //4.1 蛇移动方法
    Snake.prototype.move = function (food) {
        //除蛇头外的蛇身体移动，移动之后是上一节身体的坐标
        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 ‘right‘:
                this.body[0].x++;
                break;
            case ‘left‘:
                this.body[0].x--;
                break;
            case ‘top‘:
                this.body[0].y--;
                break;
            case ‘bottom‘:
                this.body[0].y++;
                break;
        }
        //6.1 蛇每次移动都有可能吃到一个食物，通过判断蛇头和食物坐标是否重合
        var snakeHeadX = this.body[0].x * this.width;
        var snakeHeadY = this.body[0].y * this.height;
        var foodX = food.x;
        var foodY = food.y;
        //获取左后一节身体
        var lastSnakeUnit = this.body[this.body.length - 1];
        //判断是否吃到食物
        if (snakeHeadX == foodX && snakeHeadY == foodY) {
            //吃到食物，长一节身体
            this.body.push({
                x: lastSnakeUnit.x,
                y: lastSnakeUnit.y,
                bgcolor: "blue"
            });
            //生成一个新的食物
            food.render(map);
        }
    }
    w.Snake = Snake;
}(window));

//3.写游戏逻辑控制器
; (function (w) {
    //声明一个变量，后面用来存储this指向
    var that = null;
    //3.1.创建游戏逻辑控制器的构造函数：地图，食物，蛇
    function Game(map) {
        this.map = map;
        this.food = new Food();
        this.snake = new Snake();
        //存储this指向
        that = this;
    }
    //3.2 游戏控制器的开始方法
    Game.prototype.start = function () {
        //显示食物
        this.food.render(this.map);
        //显示蛇
        this.snake.render(this.map);
        //调用蛇移动的定时器
        snakeAutoMove();
        //5.2 触发方向改变事件
        bindKey();
    }
    //5.1 声明一个函数，根据键盘按键改变蛇的方向
    function bindKey() {
        document.onkeydown = function (e) {
            e = e || window.Event;
            switch (e.keyCode) {
                case 37:
                    if (this.snake.direction != ‘right‘) {
                        this.snake.direction = ‘left‘;
                    }
                    break;
                case 38:
                    if (this.snake.direction != ‘bottom‘) {
                        this.snake.direction = ‘top‘;
                    }
                    break;
                case 39:
                    if (this.snake.direction != ‘left‘) {
                        this.snake.direction = ‘right‘;
                    }
                    break;
                case 40:
                    if (this.snake.direction != ‘top‘) {
                        this.snake.direction = ‘bottom‘;
                    }
                    break;
            }
        }.bind(that);
    }
    //4.2 写一个函数，让蛇不停的动起来
    function snakeAutoMove() {
        //设置一个定时器，不停的调用蛇对象的move和render方法
        var timeId = setInterval(function () {
            this.snake.move(this.food);

            //5.3判断蛇有没有出界
            var snakeHeadX = this.snake.body[0].x * this.snake.width;//蛇的x坐标
            var snakeHeadY = this.snake.body[0].y * this.snake.height;//蛇的y坐标

            if (snakeHeadX < 0 || snakeHeadY < 0 || snakeHeadX >= this.map.offsetWidth || snakeHeadY >= this.map.offsetHeight) {
                //出届了游戏结束，停止定时器
                clearInterval(timeId);
                alert(‘游戏结束！‘)
                return;
            }
            //渲染蛇
            this.snake.render(this.map);

        }.bind(that), 300);
    }
    w.Game = Game;
}(window));

//获取地图对象
var map = document.getElementById(‘map‘);
var g1 = new Game(map);
g1.start();

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>snake</title>
    <style>
        .map {
            width: 800px;
            height: 600px;
            background-color: #cccccc;
            position: relative;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="map" id="map"></div>
</body>

</html>
<script src="index.js"></script>