废话不多说，代码如下：
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 }else 204 { 205 code = event.keyCode; 206 } 207 snake.setDirect(code); 208 }; 209 210 211 } 212 </script> 213 </head> 214 <body> 215 216 </body> 217 </html>
运行截图：