使用JS来实现属于自己的贪吃蛇游戏
贪吃蛇游戏是一款经典的街机游戏，玩家控制一条蛇在屏幕上移动，吃掉食物后蛇的长度会增长，游戏的目标是尽量让蛇吃到更多的食物，并避免碰到边界和自己的身体。今天我们将用JavaScript来实现一个简单的贪吃蛇游戏，这不仅可以帮助我们巩固前端技能，还能让我们理解游戏的基本逻辑。
项目结构
我们将创建一个简单的HTML页面来放置我们的游戏，以及一段JavaScript代码来实现游戏逻辑。我们的项目结构如下：
/snake-game
├── index.html
└── script.js
1. 编写HTML
在index.html中，我们需要一个画布来绘制游戏内容，以下是HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
canvas {
border: 1px solid black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
2. 编写JavaScript
在script.js中，我们将实现游戏的主要逻辑，包括蛇的移动、食物的生成、碰撞检测等。
以下是JavaScript代码：
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const box = 20; // 每个方块的大小
let snake = [{x: 9 * box, y: 9 * box}]; // 蛇的初始位置
let food = {x: Math.floor(Math.random() * 20) * box, y: Math.floor(Math.random() * 20) * box}; // 随机生成食物
let d; // 存储蛇的移动方向
document.addEventListener("keydown", direction); // 监听键盘事件
function direction(event) {
if (event.keyCode == 37 && d != "RIGHT") {
d = "LEFT";
} else if (event.keyCode == 38 && d != "DOWN") {
d = "UP";
} else if (event.keyCode == 39 && d != "LEFT") {
d = "RIGHT";
} else if (event.keyCode == 40 && d != "UP") {
d = "DOWN";
}
}
function collision(head, array) {
for (let i = 0; i < array.length; i++) {
if (head.x == array[i].x && head.y == array[i].y) {
return true;
}
}
return false;
}
function draw() {
ctx.fillStyle = "lightgreen";
ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制背景
for (let i = 0; i < snake.length; i++) {
ctx.fillStyle = (i === 0) ? "green" : "white"; // 绘制蛇头和身体
ctx.fillRect(snake[i].x, snake[i].y, box, box);
ctx.strokeStyle = "black"; // 边框颜色
ctx.strokeRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = "red"; // 绘制食物
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (d == "LEFT") snakeX -= box;
if (d == "UP") snakeY -= box;
if (d == "RIGHT") snakeX += box;
if (d == "DOWN") snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
food = {
x: Math.floor(Math.random() * 20) * box,
y: Math.floor(Math.random() * 20) * box
};
} else {
snake.pop(); // 移除蛇尾
}
let newHead = {x: snakeX, y: snakeY};
if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || collision(newHead, snake)) {
clearInterval(game);
alert("游戏结束！");
}
snake.unshift(newHead); // 添加新头部
}
let game = setInterval(draw, 100);
3. 游戏逻辑分析
在上述代码中，我们定义了多个关键函数：
- direction: 用于处理方向键的输入，改变蛇的移动方向。
- collision: 检测蛇头是否与自身相撞，若相撞返回true。
- draw: 主要绘图函数，负责绘制背景、蛇、食物以及更新蛇的位置。
我们使用setInterval每100毫秒调用draw函数，以便持续更新游戏状态。
结语
以上就是使用JavaScript实现贪吃蛇游戏的完整代码。通过这个项目，我们不仅学习了Canvas的基本用法，还掌握了游戏开发的基本思路和逻辑。你可以在此基础上进行进一步的扩展，比如增加得分系统、设置不同难度等级、实现暂停和重新开始等功能。希望大家能够在这个过程中享受编程的乐趣！
