食いしん坊ヘビコード

/*
*   ：    ，    ,     ，    
* */
// ：    
((function () {
    //       ，        ，       
    var elements = [];

    //                
    function Food(width, height, color, x, y) {
        this.width = width || 20;
        this.height = height || 20;
        this.color = color || "green";
        this.x = x || 0;
        this.y = y || 0;
    }

    //           -->         
    Food.prototype.init = function (map) {
        //          ，       
        remove();

        //1.       ,      
        var div = document.createElement("div");
        //2. div   map 
        map.appendChild(div);
        //3.    
        div.style.width = this.width + "px";
        div.style.height = this.height + "px";
        div.style.backgroundColor = this.color;
        div.style.position = "absolute";
        //div        
        this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width;
        this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height;
        div.style.left = this.x + "px";
        div.style.top = this.y + "px";

        // div       
        elements.push(div);
    }

    //           
    function remove() {
        for (var i = 0; i < elements.length; i++) {
            //        
            var ele = elements[i]
            //  map     -->          
            ele.parentElement.removeChild(ele);
            //         
            elements.splice(i, 1);
        }
    }

    //          window
    window.Food = Food;
})());


// ：     
((function () {
    //    
    var elements = [];

    //          
    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: "yellow"},//     
            {x: 1, y: 1, color: "yellow"},//  
        ]
    }

    //        -->     -->      
    Snake.prototype.init = function (map) {
        //        
        remove();

        //    div --->       
        for (var i = 0; i < this.body.length; i++) {
            //  
            var div = document.createElement("div");
            //      
            map.appendChild(div);
            var obj = this.body[i];//            ，    
            //  div   
            div.style.width = this.width + "px";
            div.style.height = this.height + "px";
            div.style.backgroundColor = obj.color;
            div.style.position = "absolute";
            //    
            div.style.left = obj.x * this.width + "px";
            div.style.top = obj.y * this.height + "px";

            //              
            //         
            elements.push(div);
        }

    }
    //            -->      
    Snake.prototype.move = function (map, food) {
        //         -->          ，       
        for (var i = this.body.length - 1; i > 0; i--) {
            // i = 2     ，         ，              
            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 += 1;
                break;
            case"left":
                this.body[0].x -= 1;
                break;
            case"top":
                this.body[0].y -= 1;
                break;
            case"bottom":
                this.body[0].y += 1;
                break;
        }

        //  ：           ，       
        //       
        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) {
            //1.       
            food.init(map);
            //2.         
            var last = this.body[this.body.length - 1];
            //3.      
            this.body.push({
                x: last.x,
                y: last.y,
                color: last.color
            })
        }
    }

    //       
    function remove() {
        for (var i = elements.length - 1; i >= 0; i--) {
            var ele = elements[i];
            //        
            ele.parentElement.removeChild(ele);
            //        
            elements.splice(i, 1);
        }
    }

    //   window
    window.Snake = Snake;
})());


// ：    --->    ，    ，      
((function () {
    //       
    function Game() {
        this.food = new Food();//    
        this.snake = new Snake();//    
        this.map = document.getElementById("map");//    
    }

    //        
    Game.prototype.init = function () {
        //       
        this.food.init(this.map);
        this.snake.init(this.map);

        //         
        this.runSnake(this.map, this.food);
        //         
        this.keyDown();
    }
    //      -->       
    Game.prototype.runSnake = function (map, food) {

        //    。this      
        var that = this;
        //     
        var timeId = setInterval(function () {
            // console.log(this);//    window
            //      ，        
            that.snake.move(map, food);//  
            // console.log(this.snake.body[0].y);
            that.snake.init(map);//  
            // console.log(this.snake.body[0].y);
            //         
            var maxX = map.offsetWidth / this.snake.width;
            var maxY = map.offsetHeight / this.snake.height;

            //       
            var headX = this.snake.body[0].x;
            var headY = this.snake.body[0].y;

            //          
            if (headX < 0 || headX >= maxX) {
                clearInterval(timeId);
                alert("    ");
            }
            if (headY < 0 || headY >= maxY) {
                clearInterval(timeId);
                alert("    ");
            }
            for (var i = 4; i < this.snake.body.length; i++) {
                if (this.snake.body[0].x == this.snake.body[i].x
                    && this.snake.body[0].y == this.snake.body[i].y) {
                    clearInterval(timeId);
                    alert("     ，    ");
                }
            }
            //            that    
        }.bind(that), 100)
    }
    //4.      --->       ，         
    Game.prototype.keyDown = function () {
        var that = this;
        document.addEventListener("keydown", function (e) {
            console.log(e.keyCode);//    
            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))
    };

    //   window
    window.Game = Game;
})());


//   
var fd = new Food;
fd.init(document.getElementById("map"));

var snake = new Snake;
var game = new Game();
game.init();