JS简易贪吃蛇

分析
1.食物对象

• 自定义构造函数
• 在原型对象上初始化食物
• 把食物暴露给window

2.蛇对象

• 小蛇构造函数
• 在原型对象上初始化小蛇
• 添加方法–移动小蛇
• 判断小蛇是否吃到食物
• 封装删除小蛇的函数

3.游戏对象

• 游戏的构造函数
• 初始化游戏
• 添加方法使小蛇自动跑起来
• 设置按键. 来改变小蛇移动的方向

具体实现

//食物对象
((function () {
    //1.自定义构造函数
    function Food(width, height, color, x, y) {
        this.width = width || 20;
        this.height = height || 20;
        this.color = color || "pink";
        this.x = x || 0;
        this.y = y || 0;
        this.element = document.createElement("div");
    }

    //2.在原型对象上初始化食物
    Food.prototype.init = function (map) {
        //2-1.设置div的样式. 并且添加进去
        var div = this.element;
        div.style.width = this.width + "px";
        div.style.height = this.height + "px";
        div.style.backgroundColor = this.color;
        div.style.position = "absolute";
        //设置随机坐标  (0-39)*20
        this.x = Math.floor(Math.random() * (map.offsetWidth / this.width)) * this.width;
        this.y = Math.floor(Math.random() * (map.offsetHeight / this.height)) * this.height;
        div.style.left = this.x + "px";
        div.style.top = this.y + "px";
        map.appendChild(div);
    }
    //3.Food暴露给window
    window.Food = Food;
})());

//小蛇对象
((function () {
    var elements = [];//存放蛇的部位
    //1.小蛇的构造函数
    function Snake(width, height, direction) {
        //小蛇每个部位的宽高
        this.width = width || 20;
        this.height = height || 20;
        //方向
        this.direction = direction || "right";
        //小蛇身体刻度
        this.body = [
            {x: 3, y: 1, color: "red"},//小蛇的头
            {x: 2, y: 1, color: "orange"},//身体
            {x: 1, y: 1, color: "orange"}//身体
        ]
    }

    //2.在原型对象上初始化小蛇
    Snake.prototype.init = function (map) {
        //先删再创建
        remove();
        //2.1遍历的创建div
        for (var i = 0; i < this.body.length; i++) {
            //每一个部位的刻度
            var obj = this.body[i];
            //创建div并且添加样式
            var div = document.createElement("div");
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            div.style.position = "absolute";
            div.style.backgroundColor = obj.color;
            //设置坐标
            div.style.left = obj.x * this.width + "px";
            div.style.top = obj.y * this.height + "px";
            map.appendChild(div);
            //把蛇添加到数组里--->目的: 为了删除
            elements.push(div);
        }
    };

    //3.添加方法--移动小蛇
    Snake.prototype.move = function (food,map) {
        //3.1改变小蛇身体的坐标 .因为小蛇的头部去判断方向
        for (var i = this.body.length - 1; i > 0; i--) {
            //当i = 2; 让第三块的x坐标 = 第二块x轴的坐标
            this.body[i].x = this.body[i - 1].x;
            this.body[i].y = this.body[i - 1].y;
        }
        //3.2判断小蛇头部的坐标  分析: 小蛇往上走 y轴 -1
        switch (this.direction) {
            case "right":
                this.body[0].x++; //this.body[0]指小蛇的头部
                break;
            case "left":
                this.body[0].x--;
                break;
            case "top":
                this.body[0].y--;
                break;
            case "bottom":
                this.body[0].y++;
                break;
        }

        //3.3最后: 判断小蛇是否吃到食物-->即判断头部坐标和食物的坐标一致
        //头部的坐标
        var headX = this.body[0].x*this.width;
        var headY = this.body[0].y*this.height;
        //食物的坐标
        var foodX = food.x;
        var foodY = food.y;
        if(headX == foodX && headY == foodY){
            //追加一个蛇的身体到body最后
            var last = this.body[this.body.length - 1];//复制小蛇的尾巴
            //添加到数组
            this.body.push({
                x: last.x,
                y:last.y,
                color:last.color
            })
            //食物吃完了要刷新位置
            food.init(map);
        }
    }
    //4.封装删除小蛇的函数
    function remove(){
        //提问:先删头还是先删尾  .尾巴先出来
        for(var i = elements.length -1; i >=0 ;i--){
            //数组里每一个部位
            var ele = elements[i];
            //console.log(ele);

            //在map中删除div
            ele.parentNode.removeChild(ele);
            //删数组的div
            elements.splice(i, 1);
        }
    }
    window.Snake = Snake;

})());

//游戏对象
((function () {
    var that;
    //1.游戏的构造函数
    function Game(map) {
        this.food = new Food();//食物对象
        this.snake = new Snake();//小蛇对象
        this.map = map;
        that = this;
    }
    //2.初始化游戏
    Game.prototype.init = function () {
        this.food.init(this.map);
        this.snake.init(this.map);
        //调用
        this.runSnake(this.map);
        //调用按键方法
        this.bindKey();
    }
    //3.添加方法使小蛇自动跑起来
    Game.prototype.runSnake = function(map){
        var timeId = setInterval(function () {
           // console.log(this);
            that.snake.move(that.food, that.map);
            that.snake.init(map);
            //判断横纵坐标的最大最小值
            var maxX = map.offsetWidth / that.snake.width;
            var maxY = map.offsetHeight / that.snake.height;

            //蛇头的坐标
            var headX = that.snake.body[0].x;
            var headY = that.snake.body[0].y;

            if( headX < 0 || headX >= maxX){
                //清除定时器
                clearInterval(timeId);
                console.log("游戏结束");
                //alert("游戏结束");
            }
            if(headY < 0 || headY >= maxY){
                //清除定时器
                clearInterval(timeId);
                alert("游戏结束");
            }
        },200)
    }

    //4.设置用户的按键. 来改变小蛇移动的方向
    Game.prototype.bindKey = function(){
        document.addEventListener("keydown", function (e) {
            //console.log(e.keyCode);  //37-40
            switch(e.keyCode){
                case 37:
                    that.snake.direction = "left";
                    break;
                case 38:
                    that.snake.direction = "top";
                    break;
                case 39:
                    that.snake.direction = "right";
                    break;
                case 40:
                    that.snake.direction = "bottom";
                    break;
            }


        })
    }

    window.Game = Game;

})());

//最终的目的
var game = new Game(document.getElementById("map"));
game.init();