废话不多说，代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇</title> 6 <script> 7 var map; //地图类对象 8 var snake; //蛇类对象 9 var food; //食物类对象 10 var timer; //定时器对象 11 var sum=0; //分数 12 13 //地图类 14 function Map() 15 { 16 this.width=800; //地图宽度 17 this.height=400; //地图高度 18 this.position='absolute'; //定位方式 19 this.color='#cccccc'; //地图颜色 20 this._map=null; //保存地图dom元素 21 22 this.show=function() 23 { 24 //用于显示地图 25 //创建地图div元素 26 this._map = document.createElement('div'); 27 //设置地图样式 28 this._map.style.width = this.width + 'px'; 29 this._map.style.height = this.height + 'px'; 30 this._map.style.position = this.position ; 31 this._map.style.backgroundColor = this.color ; 32 33 //将地图div元素追加到body标签之间 34 document.getElementsByTagName('body')[0].appendChild(this._map); 35 }; 36 } 37 38 //食物类 39 function Food() 40 { 41 this.width=20; //宽度 42 this.height=20; //高度 43 this.position='absolute'; //定位方式 44 this.color='#00ff00'; //食物颜色 45 this._food=null; //用于保存食物dom元素 46 this.x=0; //横向第几个格 47 this.y=0; //纵向第几个格 48 49 this.show=function() 50 { 51 //用于显示食物 52 if(this._food==null) 53 { 54 this._food=document.createElement('div'); 55 56 //设置食物样式 57 this._food.style.width = this.width + 'px'; 58 this._food.style.height = this.height + 'px'; 59 this._food.style.position = this.position ; 60 this._food.style.backgroundColor = this.color ; 61 62 map._map.appendChild(this._food); 63 } 64 //如果之前创建过，只需要重新设置坐标 65 this.x=Math.floor(Math.random()*40); 66 this.y=Math.floor(Math.random()*20); 67 this._food.style.left = this.x*this.width+'px'; 68 this._food.style.top = this.y*this.height+'px'; 69 }; 70 } 71 72 //蛇类 73 function Snake() 74 { 75 this.width=20; //蛇节宽度 76 this.height=20; //蛇节高度 77 this.position='absolute'; //蛇节定位方式 78 this.direct=''; //蛇的移动方向 79 //所有蛇节全部信息 80 this.body=[[3,2,'red',null],[2,2,'blue',null],[1,2,'blue',null]]; 81 82 this.setDirect = function(code) 83 { 84 switch(code) 85 { 86 case 37: 87 this.direct='left'; 88 break; 89 case 38: 90 this.direct='up'; 91 break; 92 case 39: 93 this.direct='right'; 94 break; 95 case 40: 96 this.direct='down'; 97 break; 98 } 99 }100 101 this.show=function()102 {103 //用于显示蛇104 for(var i=0;i<this.body.length;i++)105 {106 if(this.body[i][3]==null)107 {108 this.body[i][3] = document.createElement('div');109 this.body[i][3].style.width = this.width +'px';110 this.body[i][3].style.height = this.height +'px';111 this.body[i][3].style.position = this.position;112 this.body[i][3].style.backgroundColor = this.body[i][2];113 map._map.appendChild(this.body[i][3]);114 }115 //设置蛇节的横纵坐标116 this.body[i][3].style.left=this.body[i][0]*this.width+'px';117 this.body[i][3].style.top=this.body[i][1]*this.height+'px';118 }119 }120 121 this.move = function()122 {123 //移动蛇身124 var length = this.body.length-1;125 for(var i=length;i>0;i--)126 {127 //让后面的蛇节的坐标等于前面蛇节的坐标128 this.body[i][0]=this.body[i-1][0]; //横坐标129 this.body[i][1]=this.body[i-1][1]; //纵坐标130 131 }132 switch(this.direct)133 {134 case 'right':135 this.body[0][0]=this.body[0][0]+1;136 break;137 case 'down':138 this.body[0][1]=this.body[0][1]+1;139 break;140 case 'left':141 this.body[0][0]=this.body[0][0]-1;142 break;143 case 'up':144 this.body[0][1]=this.body[0][1]-1;145 break;146 default:147 return;148 }149 150 //判断蛇吃到食物151 if(this.body[0][0]==food.x&&this.body[0][1]==food.y)152 {153 var x=this.body[length][0];154 var y=this.body[length][1];155 sum++;156 document.title='分数:'+sum+'分';157 this.body.push([x,y,'blue',null]);158 food.show();159 }160 161 //判断撞墙死162 if(this.body[0][0]<0 || this.body[0][0]>39 ||this.body[0][1]<0 ||this.body[0][1]>19)163 {164 alert('撞墙死');165 clearTimeout(timer);166 return;167 }168 169 //吃到自己死170 for(var i=1;i<this.body.length;i++)171 {172 if(this.body[0][0]==this.body[i][0]&&this.body[0][1]==this.body[i][1])173 {174 alert('吃到自己死');175 clearTimeout(timer);176 return;177 }178 }179 180 this.show();181 }182 }183 184 window.onload = function()185 {186 map = new Map(); //实例化地图类对象187 map.show(); //显示地图188 189 190 food=new Food(); //实例化食物类对象191 food.show(); //显示食物192 193 snake = new Snake(); //实例化蛇类对象194 snake.show();195 timer = setInterval('snake.move()',100);196 197 document.onkeydown = function()198 {199 var code;200 if(window.event)201 {202 code=window.event.keyCode;203 }else204 {205 code = event.keyCode;206 }207 snake.setDirect(code);208 };209 210 211 }212 </script>213 </head>214 <body>215 216 </body>217 </html>运行截图：
新闻热点
疑难解答
