正文

轻松掌握：用JavaScript打造加速功能的经典贪吃蛇游戏

/0 浏览量
0330

引言

贪吃蛇游戏是一款经典的街机游戏，它简单易上手，但玩起来却乐趣无穷。在本文中，我们将学习如何使用JavaScript来创建一个具有加速功能的贪吃蛇游戏。通过一步步的讲解，你将能够掌握游戏的基本原理，并学会如何添加更多的功能，如食物增长、速度提升等。

游戏设计

在开始编写代码之前，我们需要对游戏进行一些设计上的思考：

  1. 游戏界面：一个足够大的画布，用于显示游戏区域。
  2. 游戏逻辑：蛇的移动、食物的生成、碰撞检测等。
  3. 加速功能：随着游戏进行，蛇的速度会逐渐增加。

准备工作

首先，我们需要创建一个HTML文件，并在其中添加一个用于显示游戏的<canvas>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script src="snake.js"></script>
</body>
</html>

游戏代码

接下来，我们将编写JavaScript代码来实现游戏逻辑。

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

// 游戏设置
const scale = 20;
const rows = canvas.height / scale;
const cols = canvas.width / scale;
let snake = [];
snake[0] = { x: 10, y: 10 };
let food = { x: Math.floor(Math.random() * cols) * scale, y: Math.floor(Math.random() * rows) * scale };
let direction = 'right';
let score = 0;
let speed = 100;
let gameInterval;

// 绘制蛇
function drawSnake() {
    for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? 'green' : 'blue';
        ctx.fillRect(snake[i].x, snake[i].y, scale, scale);
        ctx.strokeStyle = 'white';
        ctx.strokeRect(snake[i].x, snake[i].y, scale, scale);
    }
}

// 绘制食物
function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, scale, scale);
}

// 检测碰撞
function checkCollision(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 update() {
    let head = { x: snake[0].x, y: snake[0].y };
    if (direction === 'right') head.x += scale;
    if (direction === 'left') head.x -= scale;
    if (direction === 'up') head.y -= scale;
    if (direction === 'down') head.y += scale;

    // 检查是否吃到食物
    if (head.x === food.x && head.y === food.y) {
        score++;
        food = { x: Math.floor(Math.random() * cols) * scale, y: Math.floor(Math.random() * rows) * scale };
        snake.push(head);
    } else {
        snake.shift();
    }

    // 检查是否撞墙或撞到自己
    if (head.x >= canvas.width || head.x < 0 || head.y >= canvas.height || head.y < 0 || checkCollision(head, snake)) {
        clearInterval(gameInterval);
        alert('Game Over! Your score is: ' + score);
        return;
    }

    snake.push(head);
}

// 绘制游戏
function draw() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    drawSnake();
    drawFood();
    document.getElementById('score').innerText = 'Score: ' + score;
}

// 控制蛇的移动
function control(e) {
    switch (e.keyCode) {
        case 37:
            direction = 'left';
            break;
        case 38:
            direction = 'up';
            break;
        case 39:
            direction = 'right';
            break;
        case 40:
            direction = 'down';
            break;
    }
}

// 开始游戏
function startGame() {
    document.addEventListener('keydown', control);
    gameInterval = setInterval(update, speed);
}

// 初始化游戏
startGame();

加速功能

为了实现加速功能，我们可以设置一个变量来记录游戏开始的时间，并在每次更新时检查游戏已经进行了多长时间。如果时间超过了某个阈值，我们可以增加速度。

let startTime = Date.now();

function update() {
    let currentTime = Date.now();
    let timeDiff = currentTime - startTime;
    if (timeDiff >= 1000) { // 每过1000毫秒（1秒）增加速度
        speed = Math.max(10, speed - 10); // 减少速度间隔，增加速度
        startTime = currentTime;
    }
    // ... 其余代码保持不变 ...
}

总结

通过以上步骤，我们成功地创建了一个具有加速功能的贪吃蛇游戏。你可以根据需要添加更多的功能，比如改变蛇的颜色、增加不同的食物类型等。希望这篇文章能够帮助你更好地理解JavaScript在游戏开发中的应用。

-- 展开阅读全文 --