JavaScript贪吃蛇

(function(){
    var snakenodes = [];
    
    function Snake(width,height,direction) {
        
        this.width = width||20;
        this.height = height||20;
        this.direction = direction||"right";
        
        this.body = [
            {x:2,y:0,color:"red"},
            {x:1,y:0,color:"yellow"},
            {x:0,y:0,color:"yellow"}
        ];
        
    }
    
    Snake.prototype.move = function(map,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[i].x +=1; break;
            case "left" : this.body[i].x -=1; break;
            case "top" : this.body[i].y -=1; break;
            case "bottom" : this.body[i].y +=1; break;
        }
        
        if(food.x/food.width==this.body[0].x&&food.y/food.height==this.body[0].y){
             var last=this.body[this.body.length-1];
            //把最后的蛇尾复制一个,重新的加入到小蛇的body中
            this.body.push({
                x:last.x,
                y:last.y,
                color:last.color
            });
            //把食物删除,重新初始化食物
            food.init(map);
        }
        
    }
    
    
    
    
    Snake.prototype.init = function(map){
        remove();
        
        for(var i=0;i<this.body.length;++i){
            var node = document.createElement("dv");
            node.style.width = this.width+"px";
            node.style.height = this.height+"px";
            node.style.backgroundColor = this.body[i].color;
            node.style.left = this.body[i].x * this.width + "px";
            node.style.top = this.body[i].y * this.height + "px";
            node.style.position = "absolute";
        
            map.appendChild(node);
            snakenodes.push(node);
            
            
        }
        
        
    }
    
    function remove(){
        for(var i=snakenodes.length-1;i>=0;--i){
            var temp = snakenodes[i];
            temp.parentNode.removeChild(temp);
            snakenodes.splice(i,1);
        }
    }
    
    window.Snake = Snake;
    
}());

 

 

(function(){
    var foodlist = [];    //用来保存食物
    
    function Food(width,height,x,y,color){
        this.width = width||20;
        this.height = height||20;
        this.x = x||0;
        this.y = y||0;
        this.color = color||"#f40";
    }
    
    
    Food.prototype.init = function(map){
        remove();
        this.x = Math.floor(Math.random()*(map.offsetWidth/this.width)) * this.width ;
        this.y = Math.floor(Math.random()*(map.offsetHeight/this.height)) * this.height;
        var foodnode = document.createElement("div");
        foodnode.style.left = this.x+"px";
        foodnode.style.top = this.y+"px";
        foodnode.style.position = "absolute";
        foodnode.style.backgroundColor = this.color;
        foodnode.style.width = this.width+"px";
        foodnode.style.height = this.height+"px";
        
        foodlist.push(foodnode);
        map.appendChild(foodnode);
        
        
    }
    
    
     function remove(){
        for(var i=0;i<foodlist.length;++i){
            var temp = foodlist[i];
            temp.parentNode.removeChild(temp);    //图像上删除
            foodlist.splice(i,1);    //数组中删除
        }
    }
    
    window.Food = Food;
}());

 

 

(function(){
    var that = null;
    
    
    function Game(map){
        this.map = map;
        this.snake = new Snake();
        this.food = new Food();
        that = this;
    }
    
    
    Game.prototype.init = function(){
        this.bindKey();
        
        this.food.init(map);
        this.snake.init(map);
        
        this.runsnake();
        
    }
    
    Game.prototype.runsnake = function(){
        var timeid = window.setInterval(function(){
            
            this.snake.move(this.map,this.food);
            this.snake.init(map);
            
            if((this.snake.body[0].x>=this.map.offsetWidth/this.snake.width)||(this.snake.body[0].y>=this.map.offsetHeight/this.snake.height)||(this.snake.body[0].x<0)||(this.snake.body[0].y<0)){
                console.log(this.snake.body[0].x);
                console.log(this.map.offsetWidth/this.snake.width);
                console.log(this.snake.body[0].y);
                console.log(this.map.offsetHeight/this.snake.height);
                
                window.clearInterval(timeid);
                alert("Game Over!");
            }
            
            
            
        }.bind(that),100);
        
    };
    
    Game.prototype.bindKey = function(){
        document.addEventListener("keydown",function(e){
            switch(e.keyCode) {
                case 87 : this.snake.direction = "top"; break;
                case 83 : this.snake.direction = "bottom"; break;
                case 65 : this.snake.direction = "left"; break;
                case 68 : this.snake.direction = "right"; break;
            }
        }.bind(that),false)
    };
    
    
    
    
    window.Game = Game;
    
}());

 

#map{
    position: relative;
    width: 800px;
    height: 600px;
    background-color: #ccc;
}

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div id="map"></div>
        
        <script src="js/Food.js"></script>
        <script src="js/Snake.js"></script>
        <script src="js/Game.js"></script>
        
        
        <script>
            var map = document.getElementById("map");
//             var fd = new Food();
//             fd.init(map);
//             
//             var snake = new Snake();
//             snake.init(map);



            var game = new Game(map);
            game.init();
            
        </script>
        
        
    </body>
</html>