廢話不多說，代碼如下：
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>
運行截圖：