本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
地图
地图：宽，高，背景颜色，因为小蛇和食物都是相对于地图显示的，这里小蛇和食物都是地图的子元素，随机位置显示，脱离文档流的，地图也需要脱离文档流relative，----css需要设置：宽，高，背景颜色，脱标
食物—div元素
elements---->存储div的数组（将来删除的食物div时候，先从map中删除div，再从数组中移除div）
食物：宽，高，背景颜色，横坐标，纵坐标
一个食物就是一个对象，这个对象有相应的属性，这个对象需要在地图上显示
最终要创建食物的对象，先有构造函数，并且把相应的值作为参数传入到构造函数中
食物要想显示在地图上，食物的初始化就是一个行为
1、食物的构造函数—>创建食物对象
2、食物的显示的方法—>通过对象调用方法，显示食物，设置相应的样式
2.1.1 因为食物要被小蛇吃掉，吃掉后应该再次出现食物，原来的食物就删除了
2.1.2 每一次初始化食物的时候先删除原来的食物，然后重新的初始化食物
2.1.3 通过一个私有的函数（外面不能调用的函数）删除地图上的食物，同时最开始的食物也相应的保存到一个数组中，再从这个数组中把食物删除
小蛇
小蛇就是一个对象
属性：每个身体都有宽、高、方向
属性：身体分三个部分，每个部分都是一个对象，每个部分都有横纵坐标，背景颜色
方法：小蛇要想显示在地图上，先删除之前的小蛇，然后再初始化小蛇（小蛇要移动）
移动思路：把小蛇的头的坐标给小蛇第一部分的身体，第一部分的身体的坐标给下一个部分身体小蛇的头，需要单独的设置：方向
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .map { width: 800px; height: 600px; background-color: #ccc; position: relative; } </style></head><body><div class="map"></div><script src="贪吃蛇案例.js"></script></body></html> |
js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
//自调用函数--食物(function () { var elements = [];//用来保存每个小方块元素 //创建小方块对象，需要先构造函数 小方块有宽高颜色 横纵坐标属性 function Food(x, y, width, height, color) { //小方块的横纵坐标 this.x = x || 0; this.y = y || 0; //小方块的宽高颜色 this.width = width || 20; this.height = height || 20; this.color = color || 'green'; } //为原型添加初始化的方法（作用：在页面上显示食物） //因为食物要在地图上显示这个食物，所以需要地图这个参数（map--就是class=“.map”这个div） Food.prototype.init = function (map) { //先删除这个小食物 //外部无法访问到这个函数 remove(); //创建div（即小方块） var div = document.createElement("div"); //把div添加到地图中 map.appendChild(div); //设置div的样式 div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; div.style.backgroundColor = this.color; //横纵坐标需要随机产生 在这先停止 //使div小方块脱离文档流 div.style.position = 'absolute'; //随机产生横纵坐标 this.x = parseInt(Math.random() * (map.offsetWidth / this.width)) * this.width; this.y = parseInt(Math.random() * (map.offsetHeight / this.height)) * this.height; div.style.left = this.x + 'px'; div.style.top = this.y + 'px'; //把div加到数组elements中 elements.push(div); }; //私有的函数---删除食物 function remove() { for (var i = 0; i < elements.length; i++) { var ele = elements[i]; //找到子元素的父元素，删除这个子元素 ele.parentNode.removeChild(ele); // 再次把elements中的子元素删除 elements.splice(0, 1);//从0位置开始删除1个 } } //把food暴露给顶级对象，外部可以使用 window.Food = Food;}());//自调用函数--小蛇(function () { //放小蛇的每个部分 var elements = []; //创建小蛇的构造函数 function Snake(width, height, direction) { //小蛇每个部分的宽和高 this.width = width || 20; this.height = height || 20; //小蛇的身体 this.body = [ {x: 3, y: 2, color: 'red'}, {x: 2, y: 2, color: 'orange'}, {x: 1, y: 2, color: 'orange'} ]; //小蛇移动的方向 this.direction = direction || 'right'; //为原型添加初始化方法 Snake.prototype.init = function (map) { //初始化前先删除原来的小蛇 remove(); //循环遍历创建div for (var i = 0; i < this.body.length; i++) { //数组中的每个元素都是数组对象 var obj = this.body[i]; //创建div var div = document.createElement('div'); //把div添加到地图上 map.appendChild(div); //设置div的样式 div.style.position = 'absolute'; div.style.width = this.width + 'px'; div.style.height = this.height + 'px'; //横纵坐标 div.style.left = obj.x * this.width + 'px'; div.style.top = obj.y * this.height + 'px'; //小蛇每个部分的颜色 div.style.backgroundColor = obj.color; //把小蛇每部分加到数组中 elements.push(div); } }; //为小蛇添加原型方法使小蛇移动 Snake.prototype.move = function (food, map) { //先改变小蛇身体移动的位置 var i = this.body.length - 1;//2 for (; i > 0; i--) { //i>0 就不包括头部 this.body[i].x = this.body[i - 1].x;//让第三部分身体的横坐标等于第二部分身体的横坐标 this.body[i].y = this.body[i - 1].y;//让第三部分身体的纵坐标等于第二部分身体的纵坐标 } //判断方向--改变小蛇头部的方向 switch (this.direction) { case 'right': this.body[0].x += 1; break; case 'left': this.body[0].x -= 1; break; case 'top': this.body[0].y -= 1; break; case 'bottom': this.body[0].y += 1; break; } //判断有没有吃到食物 // 获取小蛇的头和食物的坐标一致 var headX=this.body[0].x*this.width; var headY=this.body[0].y*this.height; //判断小蛇的头和食物的坐标是否相同 if(headX==food.x&&headY==food.y){ //获取小蛇的尾部 var last=this.body[this.body.length-1]; //把最后一个尾巴复制加到body最后 this.body.push({ x:last.x, y:last.y, color:last.color }); //把食物删除，重新初始化食物 food.init(map); } }; //删除小蛇的私有函数 function remove() { //获取数组 var i = elements.length - 1; for (; i >= 0; i--) { //先从当前的子元素中找到该元素的父即元素，然后在删除这个子元素 (i>=0因为包括头部) var ele = elements[i]; //从map地图上删除这个子元素 ele.parentNode.removeChild(ele); //再删除数组中的每个元素 elements.splice(i, 1); } } } //把Snake暴露给window window.Snake = Snake;}());//自调用函数--游戏对象(function () { var that = null; //游戏的构造函数 function Game(map) { this.food = new Food();//食物对象 this.snake = new Snake();//小蛇对象 this.map = map;//地图对象 that = this; } //原型对象添加游戏初始化方法 Game.prototype.init = function () { this.food.init(this.map);//食物初始化 this.snake.init(this.map);//初始化小蛇 //调用自动移动小蛇的方法 this.runSnake(this.food, this.map); //小蛇移动后调用键盘方法 this.bindKey(); }; //原型对象添加小蛇自动移动的方法 Game.prototype.runSnake = function (food, map) { //自动的去移动 //这里的this指向window var timeID = setInterval(function () { //移动小蛇 this.snake.move(food, map); //初始化小蛇 this.snake.init(map); //横坐标的最大值 var maxX = map.offsetWidth / this.snake.width; //纵坐标的最大值 var maxY = map.offsetHeight / this.snake.height; //小蛇的头部的坐标 var headX = this.snake.body[0].x; var headY = this.snake.body[0].y; if (headX < 0 || headX >= maxX) { clearInterval(timeID); alert('游戏结束') } if (headY < 0 || headY >= maxY) { clearInterval(timeID); alert('游戏结束') } }.bind(that), 150) }; //原型对象--设置用户按键，是小蛇方向改变 Game.prototype.bindKey=function(){ //获取用户的按键，改变小蛇的方向 document.addEventListener('keydown',function(e){ //这里的this应该是触发keydown的事件对象---document //所以这里的this指的是document switch(e.keyCode){ case 37:this.snake.direction='left';break; case 38:this.snake.direction='top';break; case 39:this.snake.direction='right';break; case 40:this.snake.direction='bottom';break; } }.bind(that),false) }; window.Game = Game;}());//实例化游戏对象var gm = new Game(document.querySelector('.map'));//初始化开始游戏gm.init();//实例化食物对象// var fd = new Food();// var map = document.querySelector('.map');// fd.init(map);// //实例化小蛇对象// var snake = new Snake();// snake.init(map);//先在地图上看到小蛇// setInterval(function () {// snake.init(map);// snake.move(fd, map);// }, 150);// snake.init(map);//先在地图上看到小蛇// snake.move(fd,map);//走一步// snake.init(map);//初始化--重新画一条小蛇（把之前的小蛇先删除，再把现在得小蛇显示出来） |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/wms_swag/article/details/108970544
