-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnake.htm
141 lines (118 loc) · 3.38 KB
/
snake.htm
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>贪吃蛇小游戏</title>
<style type="text/css">
body { text-align: center; }
h1 { font-size: 3rem; }
canvas { border: 1px solid #ccc; }
</style>
</head>
<body>
<h1>贪吃蛇小游戏</h1>
<p>得分:<span id="score">0</span></p>
<canvas id="game" width="400" height="400"></canvas>
<script type="text/javascript">
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d'); // 获取画布和上下文
// 定义方块大小和数量
const blockSize = 10;
const width = canvas.width / blockSize;
const height = canvas.height / blockSize;
// 定义蛇的初始状态
let snake = [{ x: 5, y: 5 }, { x: 4, y: 5 }, { x: 3, y: 5 }];
let direction = 'right';
// 定义食物的位置
let food = { x: 0, y: 0 };
// 定义分数
let score = 0;
// 生成随机食物位置
function generateFood() {
food.x = Math.floor(Math.random() * width);
food.y = Math.floor(Math.random() * height);
}
// 渲染游戏界面
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.fillStyle = 'green'; // 渲染蛇
snake.forEach((block) => {
ctx.fillRect(block.x * blockSize, block.y * blockSize, blockSize, blockSize);
});
ctx.fillStyle = 'red'; // 渲染食物
ctx.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);
document.getElementById('score').textContent = score; // 更新分数
}
// 移动蛇
function move() {
const head = { x: snake[0].x, y: snake[0].y }; // 获取蛇头坐标
// 根据方向更新蛇头坐标
switch (direction) {
case 'up': head.y--; break;
case 'down': head.y++; break;
case 'left': head.x--; break;
case 'right': head.x++; break;
}
// 判断是否吃到食物
if (head.x === food.x && head.y === food.y) {
score++; // 更新分数
generateFood(); // 生成新的食物
} else {
snake.pop(); // 移除蛇尾
}
snake.unshift(head); // 添加蛇头
}
// 检查游戏是否结束
function checkGameOver() {
// 撞到墙
if (snake[0].x < 0 || snake[0].x >= width || snake[0].y < 0 || snake[0].y >= height) {
return true;
}
// 撞到自己
for (let i = 1; i < snake.length; i++) {
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
return true;
}
}
return false;
}
// 处理键盘事件
document.addEventListener('keydown', (event) => {
switch (event.key) {
case 'ArrowUp':
if (direction !== 'down') {
direction = 'up';
}
break;
case 'ArrowDown':
if (direction !== 'up') {
direction = 'down';
}
break;
case 'ArrowLeft':
if (direction !== 'right') {
direction = 'left';
}
break;
case 'ArrowRight':
if (direction !== 'left') {
direction = 'right';
}
break;
}
});
// 游戏循环
function gameLoop() {
move(); // 移动蛇
render(); // 渲染游戏界面
// 检查游戏是否结束
if (checkGameOver()) {
clearInterval(intervalId); // 结束游戏
alert(`游戏结束!你的得分是 ${score} 分!`);
}
}
generateFood(); // 生成初始食物
const intervalId = setInterval(gameLoop, 100); // 开始游戏循环
</script>
</body>
</html>