📅 最后修改于: 2023-12-03 14:52:18.681000 🧑 作者: Mango
蛇游戏是一种经典的小游戏，它可以帮助程序员熟悉 HTML/CSS/JS 的使用。本文将介绍如何使用 JavaScript 在 HTML/CSS 中创建蛇游戏。
在开始之前，需要先准备好以下工具：
首先，我们需要创建一个 HTML 文件，并在其中添加游戏所需的元素。以下是一个简单的 HTML 文件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
/* 这里添加 CSS 样式 */
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script src="snake.js"></script>
</body>
</html>
可以看到，这个 HTML 文件中有一个 <canvas> 元素，该元素将被用来绘制游戏的画面。同时，我们还添加了一个 <script> 元素，用来加载 JavaScript 文件。
在 HTML 文件中加载的 JavaScript 文件将负责控制游戏的逻辑。以下是一个简单的 JavaScript 文件示例，用于创建蛇游戏：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let score = 0;
// 初始化蛇的位置
let snake = [
{ x: canvas.width/2, y: canvas.height/2 },
{ x: canvas.width/2 - snakeSize, y: canvas.height/2 },
{ x: canvas.width/2 - snakeSize*2, y: canvas.height/2 },
];
// 蛇的方向
let direction = 'right';
// 生成食物的位置
let food = {
x: Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize,
y: Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize
};
// 绘制蛇
function drawSnake() {
for (let i=0; i<snake.length; i++) {
ctx.fillStyle = 'white';
ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
}
}
// 移动蛇的位置
function moveSnake() {
// 记录蛇头的位置
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// 根据蛇的方向移动蛇头的位置
if (direction === 'right') snakeX += snakeSize;
else if (direction === 'left') snakeX -= snakeSize;
else if (direction === 'up') snakeY -= snakeSize;
else if (direction === 'down') snakeY += snakeSize;
// 判断蛇是否吃到了食物
if (snakeX === food.x && snakeY === food.y) {
score++;
food = {
x: Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize,
y: Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize
};
} else {
snake.pop();
}
// 在蛇头的位置添加新的蛇身体
let newHead = {
x: snakeX,
y: snakeY
};
snake.unshift(newHead);
}
// 检查游戏是否结束
function checkGameEnd() {
for (let i=1; i<snake.length; i++) {
// 如果蛇头碰到了身体，则游戏结束
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
return true;
}
}
// 如果蛇头碰到了边缘，则游戏结束
return (
snake[0].x < 0 || snake[0].x > canvas.width - snakeSize ||
snake[0].y < 0 || snake[0].y > canvas.height - snakeSize
);
}
// 绘制分数
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '15px Arial';
ctx.fillText('Score: ' + score, 10, 20);
}
// 绘制食物
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
// 渲染游戏
function render() {
if (checkGameEnd()) {
clearInterval(gameInterval);
alert('Game Over!');
} else {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveSnake();
drawSnake();
drawFood();
drawScore();
}
}
// 监听键盘事件，改变蛇的方向
document.addEventListener('keydown', function(event) {
if (event.code === 'ArrowRight' && direction !== 'left') {
direction = 'right';
} else if (event.code === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (event.code === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (event.code === 'ArrowDown' && direction !== 'up') {
direction = 'down';
}
});
// 每隔一段时间渲染游戏
let gameInterval = setInterval(render, 100);
以上 JavaScript 代码实现了蛇游戏的基本逻辑：控制蛇的移动、绘制蛇和食物、检查游戏是否结束等。你可以将这段代码复制到名为 snake.js 的文件中，并放在与 HTML 文件相同的文件夹中。
最后，还需要添加 CSS 样式来美化游戏界面。以下是一个简单的 CSS 文件示例：
body {
background-color: black;
}
canvas {
border: 1px solid white;
}
.alert {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
font-size: 30px;
font-weight: bold;
color: red;
text-align: center;
}
.alert.show {
display: block;
}
这个 CSS 文件中定义了游戏界面的背景颜色、画布边框等样式，以及游戏结束提示框的样式。你可以在 HTML 文件的 <style> 元素中添加这些 CSS 定义。
现在，你已经将 HTML、CSS、JS 文件都创建好了。接下来，在浏览器中打开 HTML 文件，你就可以开始运行蛇游戏了！
代码片段：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const snakeSize = 10;
let score = 0;
// 初始化蛇的位置
let snake = [
{ x: canvas.width/2, y: canvas.height/2 },
{ x: canvas.width/2 - snakeSize, y: canvas.height/2 },
{ x: canvas.width/2 - snakeSize*2, y: canvas.height/2 },
];
// 蛇的方向
let direction = 'right';
// 生成食物的位置
let food = {
x: Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize,
y: Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize
};
// 绘制蛇
function drawSnake() {
for (let i=0; i<snake.length; i++) {
ctx.fillStyle = 'white';
ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
}
}
// 移动蛇的位置
function moveSnake() {
// 记录蛇头的位置
let snakeX = snake[0].x;
let snakeY = snake[0].y;
// 根据蛇的方向移动蛇头的位置
if (direction === 'right') snakeX += snakeSize;
else if (direction === 'left') snakeX -= snakeSize;
else if (direction === 'up') snakeY -= snakeSize;
else if (direction === 'down') snakeY += snakeSize;
// 判断蛇是否吃到了食物
if (snakeX === food.x && snakeY === food.y) {
score++;
food = {
x: Math.floor(Math.random() * canvas.width / snakeSize) * snakeSize,
y: Math.floor(Math.random() * canvas.height / snakeSize) * snakeSize
};
} else {
snake.pop();
}
// 在蛇头的位置添加新的蛇身体
let newHead = {
x: snakeX,
y: snakeY
};
snake.unshift(newHead);
}
// 检查游戏是否结束
function checkGameEnd() {
for (let i=1; i<snake.length; i++) {
// 如果蛇头碰到了身体，则游戏结束
if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
return true;
}
}
// 如果蛇头碰到了边缘，则游戏结束
return (
snake[0].x < 0 || snake[0].x > canvas.width - snakeSize ||
snake[0].y < 0 || snake[0].y > canvas.height - snakeSize
);
}
// 绘制分数
function drawScore() {
ctx.fillStyle = 'white';
ctx.font = '15px Arial';
ctx.fillText('Score: ' + score, 10, 20);
}
// 绘制食物
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
}
// 渲染游戏
function render() {
if (checkGameEnd()) {
clearInterval(gameInterval);
alert('Game Over!');
} else {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveSnake();
drawSnake();
drawFood();
drawScore();
}
}
// 监听键盘事件，改变蛇的方向
document.addEventListener('keydown', function(event) {
if (event.code === 'ArrowRight' && direction !== 'left') {
direction = 'right';
} else if (event.code === 'ArrowLeft' && direction !== 'right') {
direction = 'left';
} else if (event.code === 'ArrowUp' && direction !== 'down') {
direction = 'up';
} else if (event.code === 'ArrowDown' && direction !== 'up') {
direction = 'down';
}
});
// 每隔一段时间渲染游戏
let gameInterval = setInterval(render, 100);