-
Notifications
You must be signed in to change notification settings - Fork 0
/
snakegame.html
324 lines (294 loc) · 8.74 KB
/
snakegame.html
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
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇游戏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 600px;
margin: 0 auto;
position: relative;
}
p {
font-size:20px;
color:red;
position: absolute;
left: 65%;
top: 10%;
}
p span{
color:black;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#score {
text-align: center;
font-size: 20px;
}
#snakeMap {
margin: 0 auto;
border: 1px solid skyblue;
}
.row {
height: 20px;
}
.col {
height: 20px;
width: 20px;
box-sizing: border-box;
border: 1px solid lightgray;
background: #dbf7f7;
float: left;
}
.activeSnake {
background: black;
}
.egg {
background: pink;
}
#Pause {
margin-left: 18%;
border: 1px solid skyblue;
color: white;
background: skyblue;
width: 50px;
height: 30px;
margin-bottom: 10px;
border-radius: 5px;
cursor:pointer;
}
#Start,#Refresh,#Speed {
border: 1px solid skyblue;
background: skyblue;
color: white;
width: 50px;
height: 30px;
border-radius: 5px;
margin-left: 15px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="wrap">
<h1>贪吃蛇游戏</h1>
<!-- 记录吃了多少个蛋 -->
<p> score:<span id="score">0</span> </p>
<!-- 暂停按钮 -->
<input id="Pause" type="button" name="name" value="Pause">
<!-- 开始按钮 -->
<input id="Start" type="button" name="name" value="Start">
<!-- 刷新(重新开始游戏) -->
<input id="Refresh" type="button" name="name" value="Refresh">
<!-- 加速按钮 -->
<input id="Speed" type="button" name="name" value="Speed">
<!-- 贪吃蛇的行走路径地图 -->
<div id="snakeMap" class="snakeMap">
</div>
</div>
</body>
<script type="text/javascript">
//获取分数标签
var score = document.getElementById('score');
// 获取路径地图标签
// var map = document.getElementById('snakeMap');
var map=document.getElementsByClassName('snakeMap')[0];
// 设置地图的大小
// 用于存储行数和列数(即方格的个数)
var rowNumber = 30;// 行数
var columnNumber = 30;// 列数;
var mapWidth = columnNumber * 20 + 'px';// 地图的宽
var mapHeight = rowNumber * 20 + 'px';// 地图的高
map.style.width = mapWidth;
map.style.height = mapHeight;// 设置地图宽高
// 创建一个二维数组,用来记录地图上的所有div的位置
var snakeDIVPosition = [];
// 通过双层for循环来创建地图元素
for ( var i = 0; i < rowNumber; i++) {
// 创建行div
var rowDIV = document.createElement('div');
// 设置div样式
rowDIV.className = 'row';
// 将行div添加到路径地图map中
map.appendChild(rowDIV); //每一行都加到地图中
// 创建一个行级数组,用来存储当前行中的每个方块div
var rowArray = [];
for ( var j = 0; j < columnNumber; j++) {
// 创建每一行中的方块div
var columnDIV = document.createElement('div');
// 设置css样式
columnDIV.className = 'col';
// 将方块DIV添加到当前行中
rowDIV.appendChild(columnDIV); //每一行是一个div，在行div加入列div
// 同时将方块添加到行数组中
rowArray.push(columnDIV); //
}
// 当前内层循环结束,将行数组添加到二维数组中
snakeDIVPosition.push(rowArray);
}
// 创建蛇模型
// 创建一个一维数组,用来存储蛇身所占的div
var snake = [];
// 固定蛇身起始长度为3个div
for ( var i = 0; i < 3; i++) {
// 为蛇身设置不同颜色的div
snakeDIVPosition[0][i].className = 'col activeSnake';
// 存储在蛇身数组中
snake[i] = snakeDIVPosition[0][i];
}
// 定义变量来控制蛇
var x = 0;
var y = 2;// 蛇头的起始位置偏移量
var scoreCount = 0;// 分数计数器,即吃了多少个蛋
var eggX = 0;// 记录蛋所在的行位置
var eggY = 0;// 记录蛋所在的列位置;
var direction = 'right';// 记录蛇移动的方向,初始为向右
var changeDir = true;// 判断是否需要改变蛇的移动方向
var delayTimer = null;// 延迟定时器
// 添加键盘事件监听方向键来改变蛇的移动方向
document.onkeydown = function(event) {
// 先判断是否需要改变方向,true表示需要,false表示不需要
if (!changeDir) {
return;// return空表示直接结束函数,后续代码不执行
}
event = event || window.event;
// 为了合理处理蛇的移动,需要判断蛇头和蛇身
// 假设蛇向右移动,点方向键左,右键都不需要做出响应
if (direction == 'right' && event.keyCode == 37) {
return;// 终止事件执行
}
if (direction == 'left' && event.keyCode == 39) {
return;
}
if (direction == 'up' && event.keyCode == 40) {
return;
}
if (direction == 'down' && event.keyCode == 38) {
return;
}
// 我们通过keyCode确定蛇要移动的方向
switch (event.keyCode) {
case 37:
direction = 'left';// 向左
break;
case 38:
direction = 'up';// 向上;
break;
case 39:
direction = 'right';// 向右
break;
case 40:
direction = 'down';// 向下
break;
}
changeDir = false;
delayTimer = setTimeout(function() {
// 设置是否需要改变方向
changeDir = true;
}, 300);
};
// 开始设置蛇移动逻辑
// 蛇移动函数
function snakeMove() {
// 根据上面设置的方向来设置蛇头的位置
switch (direction) {
case 'left':
y--;
break;
case 'right':
y++;
break;
case 'up':
x--;
break;
case 'down':
x++;
break;
};
// 判断是否游戏结束
if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) {
alert('Game Over!!!');
// 结束蛇移动的定时器
clearInterval(moveTimer);
return;// 终止键盘事件;
}
// 如果蛇吃到自己,也要结束游戏
for ( var i = 0; i < snake.length; i++) {
// 将此时蛇头移动后的位置与之前左右的组成蛇的div的位置进行比较,如果相同则说明吃到自己,游戏结束
if (snake[i] == snakeDIVPosition[x][y]) {
alert('Game over!!!');
clearInterval(moveTimer);
return;
};
}
// 判断蛇头移动的位置是否有蛋
if (eggX == x && eggY == y) {
snakeDIVPosition[eggX][eggY].className = 'col activeSnake';
snake.push(snakeDIVPosition[eggX][eggY]);// 加入蛇身
scoreCount++;// 记录分数
// 更新当前的分数
score.innerHTML = scoreCount;
// 随机产生一个新的蛋
createNewEgg();
} else {
// 设置蛇碰不到蛋的逻辑
// 让蛇移动
// 蛇尾去掉蛇自身的颜色,变成格子的颜色
snake[0].className = 'col';
// 将蛇尾div从数组中移除
snake.shift();
// 定位到的新的蛇头加入到蛇数组中
snakeDIVPosition[x][y].className = 'col activeSnake';
snake.push(snakeDIVPosition[x][y]);
};
};
var moveTimer = setInterval('snakeMove()', 300);
// 定义一个生成min,max之间的随机数函数
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function createNewEgg() {
// 随机出新的egg的下标的x和y值
eggX = random(0, columnNumber - 1);
eggY = random(0, rowNumber - 1);
// 判断如果随机产生的蛋与蛇身重合,就重新随机产生一个蛋
if (snakeDIVPosition[eggX][eggY].className == 'col activeSnake') {
createNewEgg();// 重新随机新的egg
} else {
snakeDIVPosition[eggX][eggY].className = 'col egg';
}
};
createNewEgg();// 在游戏开始的时候生成新的egg
var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
// 添加暂停按钮
pause.onclick = function() {
clearInterval(moveTimer);
};
// 添加开始按钮
start.onclick = function() {
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
};
// 添加刷新按钮
refresh.onclick = function() {
window.location.reload();
};
// 添加加速按钮
var speed1 = 300;
speed.onclick = function() {
speed1 -= 40;
clearInterval(moveTimer);
moveTimer = setInterval('snakeMove()', speed1);
};
</script>
</body>
</html>