1 (function(){ 2 var snakenodes = []; 3 4 function Snake(width,height,direction) { 5 6 this.width = width||20; 7 this.height = height||20; 8 this.direction = direction||"right"; 9 10 this.body = [ 11 {x:2,y:0,color:"red"}, 12 {x:1,y:0,color:"yellow"}, 13 {x:0,y:0,color:"yellow"} 14 ]; 15 16 } 17 18 Snake.prototype.move = function(map,food){ 19 20 21 for(var i=this.body.length-1;i>0;--i){ 22 this.body[i].x = this.body[i-1].x; 23 this.body[i].y = this.body[i-1].y; 24 } 25 26 switch(this.direction){ 27 case "right": this.body[i].x +=1; break; 28 case "left" : this.body[i].x -=1; break; 29 case "top" : this.body[i].y -=1; break; 30 case "bottom" : this.body[i].y +=1; break; 31 } 32 33 if(food.x/food.width==this.body[0].x&&food.y/food.height==this.body[0].y){ 34 var last=this.body[this.body.length-1]; 35 //把最后的蛇尾复制一个,重新的加入到小蛇的body中 36 this.body.push({ 37 x:last.x, 38 y:last.y, 39 color:last.color 40 }); 41 //把食物删除,重新初始化食物 42 food.init(map); 43 } 44 45 } 46 47 48 49 50 Snake.prototype.init = function(map){ 51 remove(); 52 53 for(var i=0;i<this.body.length;++i){ 54 var node = document.createElement("dv"); 55 node.style.width = this.width+"px"; 56 node.style.height = this.height+"px"; 57 node.style.backgroundColor = this.body[i].color; 58 node.style.left = this.body[i].x * this.width + "px"; 59 node.style.top = this.body[i].y * this.height + "px"; 60 node.style.position = "absolute"; 61 62 map.appendChild(node); 63 snakenodes.push(node); 64 65 66 } 67 68 69 } 70 71 function remove(){ 72 for(var i=snakenodes.length-1;i>=0;--i){ 73 var temp = snakenodes[i]; 74 temp.parentNode.removeChild(temp); 75 snakenodes.splice(i,1); 76 } 77 } 78 79 window.Snake = Snake; 80 81 }());
1 (function(){ 2 var foodlist = []; //用来保存食物 3 4 function Food(width,height,x,y,color){ 5 this.width = width||20; 6 this.height = height||20; 7 this.x = x||0; 8 this.y = y||0; 9 this.color = color||"#f40"; 10 } 11 12 13 Food.prototype.init = function(map){ 14 remove(); 15 this.x = Math.floor(Math.random()*(map.offsetWidth/this.width)) * this.width ; 16 this.y = Math.floor(Math.random()*(map.offsetHeight/this.height)) * this.height; 17 var foodnode = document.createElement("div"); 18 foodnode.style.left = this.x+"px"; 19 foodnode.style.top = this.y+"px"; 20 foodnode.style.position = "absolute"; 21 foodnode.style.backgroundColor = this.color; 22 foodnode.style.width = this.width+"px"; 23 foodnode.style.height = this.height+"px"; 24 25 foodlist.push(foodnode); 26 map.appendChild(foodnode); 27 28 29 } 30 31 32 function remove(){ 33 for(var i=0;i<foodlist.length;++i){ 34 var temp = foodlist[i]; 35 temp.parentNode.removeChild(temp); //图像上删除 36 foodlist.splice(i,1); //数组中删除 37 } 38 } 39 40 window.Food = Food; 41 }());
1 (function(){ 2 var that = null; 3 4 5 function Game(map){ 6 this.map = map; 7 this.snake = new Snake(); 8 this.food = new Food(); 9 that = this; 10 } 11 12 13 Game.prototype.init = function(){ 14 this.bindKey(); 15 16 this.food.init(map); 17 this.snake.init(map); 18 19 this.runsnake(); 20 21 } 22 23 Game.prototype.runsnake = function(){ 24 var timeid = window.setInterval(function(){ 25 26 this.snake.move(this.map,this.food); 27 this.snake.init(map); 28 29 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)){ 30 console.log(this.snake.body[0].x); 31 console.log(this.map.offsetWidth/this.snake.width); 32 console.log(this.snake.body[0].y); 33 console.log(this.map.offsetHeight/this.snake.height); 34 35 window.clearInterval(timeid); 36 alert("Game Over!"); 37 } 38 39 40 41 }.bind(that),100); 42 43 }; 44 45 Game.prototype.bindKey = function(){ 46 document.addEventListener("keydown",function(e){ 47 switch(e.keyCode) { 48 case 87 : this.snake.direction = "top"; break; 49 case 83 : this.snake.direction = "bottom"; break; 50 case 65 : this.snake.direction = "left"; break; 51 case 68 : this.snake.direction = "right"; break; 52 } 53 }.bind(that),false) 54 }; 55 56 57 58 59 window.Game = Game; 60 61 }());
1 #map{ 2 position: relative; 3 width: 800px; 4 height: 600px; 5 background-color: #ccc; 6 }
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/index.css"/> 7 </head> 8 <body> 9 <div id="map"></div> 10 11 <script src="js/Food.js"></script> 12 <script src="js/Snake.js"></script> 13 <script src="js/Game.js"></script> 14 15 16 <script> 17 var map = document.getElementById("map"); 18 // var fd = new Food(); 19 // fd.init(map); 20 // 21 // var snake = new Snake(); 22 // snake.init(map); 23 24 25 26 var game = new Game(map); 27 game.init(); 28 29 </script> 30 31 32 </body> 33 </html>