JavaScript 贪吃蛇游戏

2025 年 2 月 16 日 | 7 分钟阅读

用 JavaScript 制作一个贪吃蛇游戏可能是一次令人满意的经历，它可以在提高编码技能的同时，也能提供一个有趣、交互式的应用程序来展示。贪吃蛇游戏是一个经典的游戏，适合作为入门项目来构建。这个游戏需要控制一条蛇去吃食物，食物会使蛇变得更长，同时要避免与墙壁或自身发生碰撞。在这里，我们将探讨制作 JavaScript 贪吃蛇游戏的思路。

游戏开发基础

在深入研究贪吃蛇游戏的机制之前，掌握一些基本的游戏开发概念非常重要。

游戏循环 (Game Loop)： 每个游戏都有一个循环，它不断更新游戏状态并在屏幕上渲染。这个循环是连续的，使得游戏能够响应用户输入和其他变化。

Canvas API： 我们通常使用 HTML5 Canvas API 来渲染视觉效果。Canvas 是浏览器中的一个可绘制区域，允许我们为游戏创建形状、图像和其他图形。

游戏状态 (Game State)： 这包括代表游戏当前所有信息的数据，例如蛇的位置、食物的位置以及玩家的分数。

用户输入 (User Input)： 在交互式游戏中，处理用户输入至关重要。在贪吃蛇游戏中捕获方向键可以让你控制蛇的移动。

组织贪吃蛇游戏

1. 初始化游戏环境

首先，创建一个 HTML 文档，其中定义了游戏将要绘制的 canvas 组件。JavaScript 代码将使用这个 canvas 来渲染游戏。这个 HTML 文件创建一个具有指定宽度和高度的 canvas，它将作为游戏区域。

示例

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>   

2. 设置游戏循环

游戏循环是不断更新和渲染游戏的核心组件。这可以在 JavaScript 中使用 `setInterval` 或 `requestAnimationFrame` API 来实现。

示例

 
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

let gameInterval = setInterval(gameLoop, 100); // Update every 100 milliseconds

function gameLoop() {
    update();
    draw();
}   

GameLoop 每 100 毫秒调用一次，以刷新游戏状态并重绘 canvas。

3. 定义蛇和食物

蛇和食物是游戏功能的关键。蛇可以表示为一系列坐标，每个部分都是一个正方形。食物则表示 canvas 上的一个单一坐标。

示例

 
let snake = [{ x: 10, y: 10 }];
let food = { x: 15, y: 15 };
let direction = { x: 1, y: 0 }; // Initially moving to the right   

4. 处理用户输入

要控制蛇，你需要捕获键盘事件。方向键可以控制蛇的移动。

示例

 
document.addEventListener('keydown', changeDirection);

function changeDirection(event) {
    const keyPressed = event.keyCode;
    if (keyPressed === 37 && direction.x === 0) { // Left arrow
        direction = { x: -1, y: 0 };
    } else if (keyPressed === 38 && direction.y === 0) { // Up arrow
        direction = { x: 0, y: -1 };
    } else if (keyPressed === 39 && direction.x === 0) { // Right arrow
        direction = { x: 1, y: 0 };
    } else if (keyPressed === 40 && direction.y === 0) { // Down arrow
        direction = { x: 0, y: 1 };
    }
}   

5. 更新游戏状态

更新函数通过在移动方向上添加新的头部并删除尾部来移动蛇。如果蛇吃掉了食物，食物会被随机重新放置，并且尾部不会被删除，导致蛇变得更长。

示例

 
function update() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

    // Check for collisions
    if (head.x < 0 || head.x >= canvas.width / 10 || head.y < 0 || head.y >= canvas.height / 10 || snakeCollision(head)) {
        clearInterval(gameInterval); // End the game
        alert('Game Over!');
    } else {
        snake.unshift(head); // Add new head

        if (head.x === food.x && head.y === food.y) {
            repositionFood();
        } else {
            snake.pop(); // Remove the tail
        }
    }
}

function snakeCollision(head) {
    for (let segment of snake) {
        if (segment.x === head.x && segment.y === head.y) {
            return true;
        }
    }
    return false;
}

function repositionFood() {
    food.x = Math.floor(Math.random() * canvas.width / 10);
    food.y = Math.floor(Math.random() * canvas.height / 10);
}   

6. 绘制游戏

绘制函数会重置 canvas 并重新绘制蛇和食物。

示例

 
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

    ctx.fillStyle = 'green';
    for (let segment of snake) {
        ctx.fillRect(segment.x * 10, segment.y * 10, 10, 10);
    }

    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}   

最终代码 - JavaScript 贪吃蛇游戏

让我们看看创建基本且视觉吸引人的贪吃蛇游戏的 HTML、CSS 和 JavaScript 文件。

HTML 代码

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="score">Score: <span id="score">0</span></div>
        <button id="startButton">Start Game</button>
    </div>
    <script src="snake.js"></script>
</body>
</html>   

CSS 代码

 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    font-family: 'Arial', sans-serif;
    color: #fff;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

canvas {
    border: 2px solid #000;
    background-color: #2c3e50;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.score {
    margin-top: 20px;
    font-size: 24px;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background: linear-gradient(to right, #43cea2, #185a9d);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

button:hover {
    background: linear-gradient(to right, #185a9d, #43cea2);
}

.hidden {
    display: none;
}   

JavaScript 代码

 
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('startButton');

const gridSize = 20; // Size of each grid cell
const canvasSize = canvas.width / gridSize; // Number of cells in one dimension

let snake = [{ x: 10, y: 10 }];
let direction = { x: 1, y: 0 }; // Start with a right direction
let food = { x: 15, y: 15 };
let score = 0;
let gameInterval;

document.addEventListener('keydown', changeDirection);
startButton.addEventListener('click', startGame);

function startGame() {
    // Reset game state
    snake = [{ x: 10, y: 10 }];
    direction = { x: 1, y: 0 }; // Reset direction to right
    food = { x: 15, y: 15 };
    score = 0;
    scoreDisplay.textContent = score;
    startButton.classList.add('hidden');
    
    gameInterval = setInterval(gameLoop, 100);
}

function gameLoop() {
    update();
    draw();
    if (isGameOver()) {
        clearInterval(gameInterval);
        startButton.textContent = 'Start Again';
        startButton.classList.remove('hidden');
        alert('Game Over! Your score: ' + score);
    }
}

function update() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

    // Check if the snake eats the food
    if (head.x === food.x && head.y === food.y) {
        score++;
        scoreDisplay.textContent = score;
        repositionFood();
    } else {
        snake.pop(); // Remove the tail
    }

    snake.unshift(head); // Add new head to the snake
}

function draw() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the snake
    ctx.fillStyle = 'green';
    snake.forEach(segment => {
        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize);
    });

    // Draw the food
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
}

function changeDirection(event) {
    const { keyCode } = event;

    // Prevent the snake from reversing
    if (keyCode === 37 && direction.x === 0) { // Left arrow
        direction = { x: -1, y: 0 };
    } else if (keyCode === 38 && direction.y === 0) { // Up arrow
        direction = { x: 0, y: -1 };
    } else if (keyCode === 39 && direction.x === 0) { // Right arrow
        direction = { x: 1, y: 0 };
    } else if (keyCode === 40 && direction.y === 0) { // Down arrow
        direction = { x: 0, y: 1 };
    }
}

function repositionFood() {
    food = {
        x: Math.floor(Math.random() * canvasSize),
        y: Math.floor(Math.random() * canvasSize)
    };

    // Ensure the food does not appear on the snake
    while (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
        food = {
            x: Math.floor(Math.random() * canvasSize),
            y: Math.floor(Math.random() * canvasSize)
        };
    }
}

function isGameOver() {
    const head = snake[0];

    // Check for wall collisions
    if (head.x < 0 || head.x >= canvasSize || head.y < 0 || head.y >= canvasSize) {
        return true;
    }

    // Check for self collisions
    for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
        }
    }

    return false;
}

// Hide the start button initially
startButton.classList.remove('hidden');   

输出

这是游戏结束前和游戏结束后外观的快照。你也可以尝试一下。

结论

用 JavaScript 制作贪吃蛇游戏需要理解并实现核心游戏开发概念，例如游戏循环、用户输入管理以及游戏状态的更新和渲染。通过将游戏分解成更小、更易于管理的部分，可以创建一个有用且有趣的游戏。一旦掌握了这些基本知识，你就可以通过添加关卡、障碍物和更高级的图形等功能来扩展游戏。这个项目不仅是游戏编程的绝佳入门，还能提高你的 JavaScript 技能，为更复杂的项目奠定基础。

下一个主题Javascript-sorts-an-array-of-objects-by-key

JavaScript 贪吃蛇游戏

游戏开发基础

组织贪吃蛇游戏

1. 初始化游戏环境

2. 设置游戏循环

3. 定义蛇和食物

4. 处理用户输入

5. 更新游戏状态

6. 绘制游戏

最终代码 - JavaScript 贪吃蛇游戏

HTML 代码

CSS 代码

JavaScript 代码

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 贪吃蛇游戏

游戏开发基础

组织贪吃蛇游戏

1. 初始化游戏环境

2. 设置游戏循环

3. 定义蛇和食物

4. 处理用户输入

5. 更新游戏状态

6. 绘制游戏

最终代码 - JavaScript 贪吃蛇游戏

HTML 代码

CSS 代码

JavaScript 代码

结论

相关帖子

JavaScript Object.groupBy() 方法

JavaScript 中的猜数字游戏

JavaScript 中的字典

如何在记事本中保存 JavaScript 文件