-
Notifications
You must be signed in to change notification settings - Fork 0
/
tanchishe.html
257 lines (236 loc) · 8.97 KB
/
tanchishe.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.main {
width: 800px;
height: 500px;
margin: 50px auto;
}
button {
width: 100px;
height: 40px;
}
.box {
position: relative;
width: 800px;
height: 500px;
background: #ccc;
}
</style>
</head>
<body>
<script type="text/javascript">
//大盒子
var main = document.createElement('div');
//开始按钮
var btn = document.createElement('button');
//游戏地图
var map = document.createElement('div');
//分数框
var fenshu = document.createElement('input');
//定义得分
var marsk = -1;
// 定义蛇的初始速度
var speed = 200;
fenshu.setAttribute("type","text")
fenshu.style.marginLeft = "600px"
map.className = "box";
main.className = "main";
btn.innerHTML = "开始游戏"
document.body.appendChild(fenshu)
document.body.appendChild(main)
main.appendChild(btn)
main.appendChild(map)
console.log(map)
// 使用构造方法创建蛇，
function Snake()
{
// 设置蛇的宽、高、默认走的方向
this.width = 20;
this.height = 20;
this.direction = 'right';
this.body = [
{x:2, y:0}, // 蛇头，第一个点
{x:1, y:0}, // 蛇脖子，第二个点
{x:0, y:0} // 蛇尾，第三个点
];
// 显示蛇
this.display = function() {
// 创建蛇
for (var i=0; i<this.body.length; i++) {
if (this.body[i].x != null) {
var s = document.createElement('div');
// 将节点保存到状态中
this.body[i].flag = s;
// 设置宽高
s.style.width = this.width + 'px';
s.style.height = this.height + 'px';
s.style.borderRadius = "50%";
s.style.background = "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
// 设置位置
s.style.position = 'absolute';
s.style.left = this.body[i].x * this.width + 'px';
s.style.top = this.body[i].y * this.height + 'px';
// 添加进去
map.appendChild(s);
}
}
};
// 让蛇跑起来,后一个元素到前一个元素的位置
this.run = function() {
// 后一个元素到前一个元素的位置
for (var i=this.body.length-1; i>0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
// 根据方向处理蛇头
switch(this.direction)
{
case "left":
this.body[0].x -= 1;
break;
case "right":
this.body[0].x += 1;
break;
case "up":
this.body[0].y -= 1;
break;
case "down":
this.body[0].y += 1;
break;
}
// 判断是否出界
if (this.body[0].x < 0 || this.body[0].x > 39 || this.body[0].y < 0 || this.body[0].y > 24) {
clearInterval(timer); // 清除定时器，
alert("撞墙？游戏结束！");
//分数清零
fenshu.value = "0";
// 删除旧的
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.body = [ // 回到初始状态，
{x:2, y:0},
{x:1, y:0},
{x:0, y:0}
];
this.direction = 'right';
this.display(); // 显示初始状态
return false; // 结束
}
// 判断蛇头吃到食物，xy坐标重合
if (this.body[0].x == food.x && this.body[0].y == food.y) {
// 蛇加一节
this.body.push({x:null, y:null, flag: null});
marsk++
fenshu.value = marsk;
//蛇的速度
speed = speed - (speed * 0.1);
clearInterval(timer);
timer = setInterval("snake.run()", speed);
// 清除食物,重新生成食物
map.removeChild(food.flag);
food.display();
}
// 吃到自己死亡
for (var i=4; i<this.body.length; i++) {
if (this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
clearInterval(timer); // 清除定时器，
alert("吃自己？游戏结束");
// 删除旧的
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
this.body = [ // 回到初始状态，
{x:2, y:0},
{x:1, y:0},
{x:0, y:0}
];
this.direction = 'right';
this.display(); // 显示初始状态
return false; // 结束
}
}
// 先删掉初始的蛇，在显示新蛇
for (var i=0; i<this.body.length; i++) {
if (this.body[i].flag != null) {
map.removeChild(this.body[i].flag);
}
}
// 重新显示蛇
this.display();
}
}
// 构造食物
function Food()
{
this.width = 20;
this.height = 20;
this.display = function() {
var f = document.createElement('div');
this.flag = f;
f.style.width = this.width + 'px';
f.style.height = this.height + 'px';
f.style.background = 'red';
f.style.borderRadius = '50%';
f.style.position = 'absolute';
this.x = Math.floor(Math.random()*40);
this.y = Math.floor(Math.random()*20);
f.style.left = this.x * this.width + 'px';
f.style.top = this.y * this.height + 'px';
map.appendChild(f);
}
marsk++;
fenshu.value = marsk;
}
var snake = new Snake();
var food = new Food();
snake.display(); // 初始化显示
food.display();
// 给body加按键事件，上下左右
document.body.onkeydown = function(e) {
var ev = e || window.event;
switch(ev.keyCode)
{
case 38:
if (snake.direction != 'down') { // 不允许返回，向上的时候不能向下
snake.direction = "up";
}
break;
case 40:
if (snake.direction != "up") {
snake.direction = "down";
}
break;
case 37:
if (snake.direction != "right") {
snake.direction = "left";
}
break;
case 39:
if (snake.direction != "left") {
snake.direction = "right";
}
break;
}
};
// 点击开始时，动起来
var timer;
btn.onclick = function() {
clearInterval(timer);
timer = setInterval("snake.run()",speed);
};
</script>
</div>
</body>
</html>