-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (225 loc) · 5.83 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>Greedy Snake</title>
<meta charset="utf-8">
<style type="text/css">
.frame{
margin: 50px auto 50px;
width: 450px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="frame">
<canvas id="gamebox" width="450" height="450"></canvas>
</div>
<script type="text/javascript">
// 得到 canvas 容器，画笔
var canvas = document.getElementById("gamebox");
var ctx = canvas.getContext("2d");
// 定义背景格子相关常量
const CELL_WIDTH = 15; // 每个单元格宽度
const CELL_CNT = 30; // 画布横向(纵向)格子数
const BOX_WIDTH = CELL_CNT * CELL_WIDTH; // 画布总宽度(高度)
// 绘制画布中的背景格子
drawBackground();
// 蛇的定义
var snake = []; // 蛇数组
const SNAKE_ORG_LEN = 5; // 蛇初始化长度
const UP = 1; // 方向，上
const DOWN = -1;
const LEFT = 2;
const RIGHT = -2;
// 蛇数组初始化
for(var i = 0; i < SNAKE_ORG_LEN; i++){
snake[i] = new SnakeCell(i, 0, RIGHT);
}
// 画蛇
drawSnake();
// 食物的定义
const FOOD_X = 14; // 食物初始 x 坐标
const FOOD_Y = 14; // 食物初始 y 坐标
food = new FoodCell(FOOD_X, FOOD_Y);
// 显示食物
drawFood();
// 按 MOVE_SPEED 时间间隔不停移动
const MOVE_SPEED = 1000; // ms
const SPEED_UP = 0.9;
var speed = MOVE_SPEED;
var timer;
//moveByClock();
timer = setInterval("moveSnake()", speed);
// 根据方向键来移动蛇
moveSnakeByKeys();
// 得分
var score = 0;
// 绘制背景
function drawBackground(){
ctx.strokeStyle = 'pink';
ctx.beginPath();
for(var i = 1; i < CELL_CNT; i++){
// 横向
ctx.moveTo(0, i*CELL_WIDTH);
ctx.lineTo(BOX_WIDTH, i*CELL_WIDTH);
//纵向
ctx.moveTo(i*CELL_WIDTH, 0 );
ctx.lineTo(i*CELL_WIDTH, BOX_WIDTH);
}
ctx.closePath();
ctx.stroke();
}
// 蛇单元格对象，x, y, f: 坐标及方向
function SnakeCell(x, y, f){
this.x = x;
this.y = y;
this.f = f;
return this;
}
// 食物单元格对象
function FoodCell(x, y){
this.x = x;
this.y = y;
return this;
}
// 画蛇
function drawSnake(){
for(var i = 0; i < snake.length; i++){
// 蛇后部画黑
ctx.fillStyle = "black";
//蛇数组中的最后元素即为蛇头, 蛇头填充红色
if(i == snake.length - 1){
ctx.fillStyle = "red";
}
ctx.beginPath();
ctx.rect(snake[i].x * CELL_WIDTH, snake[i].y * CELL_WIDTH, CELL_WIDTH, CELL_WIDTH);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
}
// 绘制食物
function drawFood(){
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.rect(food.x * CELL_WIDTH, food.y * CELL_WIDTH, CELL_WIDTH, CELL_WIDTH);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
// 蛇根据方向来行动
function moveSnake(){
var head = getSnakeHead();
// 计算蛇头
var newHead = new SnakeCell(head.x, head.y, head.f);
switch(newHead.f){
case UP: newHead.y--; break;
case DOWN: newHead.y++; break;
case LEFT: newHead.x--; break;
case RIGHT: newHead.x++; break;
default: return;
}
// 旧蛇除去尾部，赋给新蛇身
for(var i = 1; i < snake.length; i++){
snake[i-1] = snake[i];
}
snake[snake.length - 1 ] = newHead;
eatFood();
checkDeath();
redraw();
}
// 得到蛇头
function getSnakeHead(){
return snake[snake.length - 1];
}
// 上下左右方向键来控制蛇移动
function moveSnakeByKeys(){
document.onkeydown = function(event){
var code = event.keyCode;
//alert(code); // 37-40, 上下左右
var direction;
switch (code){
case 37: direction = LEFT; break;
case 38: direction = UP; break;
case 39: direction = RIGHT; break;
case 40: direction = DOWN; break;
default: return;
}
// 蛇不能朝当前的反方向移动
if(direction + getSnakeHead().f == 0){
return;
} else {
snake[snake.length - 1].f = direction;
moveSnake();
}
}
}
// 重新绘制
function redraw(){
ctx.clearRect(0, 0, BOX_WIDTH, BOX_WIDTH);
drawBackground();
drawSnake();
drawFood();
}
// // 蛇按时间移动
// function moveByClock(){
// moveSnake();
// //timer = setTimeout("moveByClock()", speed);
// }
// 吃到自己或撞墙
function checkDeath(){
var head = getSnakeHead();
//撞墙
if(head.x < 0 || head.x > CELL_CNT - 1 || head.y < 0 || head.y > CELL_CNT - 1){
clearInterval(timer);
var msg = "不幸撞墙了, Game Over!\n得分： " + score;
alert(msg);
window.location.reload();
}
// 咬到自己
for(var i = 0 ; i < snake.length - 1; i++){
if(snake[i].x == head.x && snake[i].y == head.y){
clearInterval(timer);
msg ="咬到自己了, Game Over!\n得分： " + score;
alert(msg);
window.location.reload();
}
}
}
// 吃食物
function eatFood(){
var head = getSnakeHead();
if(head.x == food.x && head.y == food.y){
score++;
snakeGrow(); // 蛇身在末尾加一截
newFood(); // 产生新的食物
speed *= SPEED_UP; // 加快速度
clearInterval(timer);
timer = setInterval("moveSnake()", speed);
}
function newFood(){
food.x = Math.floor(Math.random() * CELL_CNT); // 0-29
food.y = Math.floor(Math.random() * CELL_CNT);
}
function snakeGrow(){
// 蛇身往后生长而非往前
for(var i = snake.length; i > 0; i--){
snake[i] = snake[i - 1];
}
var newTail = new SnakeCell(snake[0].x, snake[0].y, snake[0].f);
var head = getSnakeHead();
switch(head.f){
case UP: newTail.y++; break; // 尾部增长方向与头方向相反
case DOWN: newTail.y--; break;
case LEFT: newTail.x++; break;
case RIGHT: newTail.x--; break;
default: break;
}
snake[0] = newTail;
}
}
</script>
</body>
</html>