废话不多说，代码如下：
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>
运行截图：
时间： 2024-10-09 00:43:24