正文

HTML实现简单弹珠碰撞游戏教程

/0 浏览量
0708

在这个教程中，我们将学习如何使用HTML、CSS和JavaScript创建一个简单的弹珠碰撞游戏。这个游戏将包括一个弹珠和多个障碍物，弹珠将随机移动并在碰撞障碍物时改变方向。下面是详细的步骤和代码示例。

准备工作

在开始之前，请确保您的电脑上已安装以下软件：

  • 一个文本编辑器（如Visual Studio Code、Sublime Text等）
  • 一个现代的Web浏览器（如Chrome、Firefox等）

创建HTML结构

首先，我们需要创建一个HTML文件，并为其添加一些基本的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹珠碰撞游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

这里，我们创建了一个<canvas>元素，它是我们游戏的主要画布。

添加CSS样式

接下来，我们需要为游戏添加一些基本的样式。创建一个名为styles.css的文件，并添加以下内容：

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#gameCanvas {
    border: 2px solid black;
}

这些样式将使游戏画布居中显示，并添加一个黑色边框。

编写JavaScript代码

现在，我们需要编写JavaScript代码来控制游戏逻辑。创建一个名为script.js的文件，并添加以下内容：

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

// 弹珠类
class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.vx = Math.random() * 5 - 2.5; // 随机水平速度
        this.vy = Math.random() * 5 - 2.5; // 随机垂直速度
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    update() {
        this.x += this.vx;
        this.y += this.vy;

        // 检测碰撞
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.vx = -this.vx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.vy = -this.vy;
        }

        // 检测障碍物碰撞
        for (let i = 0; i < obstacles.length; i++) {
            const obstacle = obstacles[i];
            if (detectCollision(this, obstacle)) {
                this.vx = -this.vx;
                this.vy = -this.vy;
            }
        }
    }
}

// 障碍物类
class Obstacle {
    constructor(x, y, width, height, color) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height = height;
        this.color = color;
    }

    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        ctx.closePath();
    }
}

// 碰撞检测函数
function detectCollision(ball, obstacle) {
    const dx = ball.x - (obstacle.x + obstacle.width / 2);
    const dy = ball.y - (obstacle.y + obstacle.height / 2);
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance < (ball.radius + obstacle.width / 2);
}

// 创建弹珠和障碍物
const ball = new Ball(canvas.width / 2, canvas.height / 2, 20, 'red');
const obstacles = [
    new Obstacle(50, 50, 100, 100, 'blue'),
    new Obstacle(300, 300, 100, 100, 'green'),
    new Obstacle(550, 550, 100, 100, 'yellow')
];

// 游戏循环
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 绘制弹珠和障碍物
    ball.draw();
    obstacles.forEach(obstacle => obstacle.draw());

    // 更新弹珠位置
    ball.update();

    requestAnimationFrame(gameLoop);
}

// 开始游戏
gameLoop();

这段代码定义了弹珠和障碍物类，并实现了游戏循环。在游戏循环中，我们首先清除画布，然后绘制弹珠和障碍物，并更新弹珠的位置。

总结

通过本教程，我们学习了如何使用HTML、CSS和JavaScript创建一个简单的弹珠碰撞游戏。这个游戏展示了基本的碰撞检测和游戏循环概念。您可以根据自己的需求修改代码，添加更多功能和装饰。

祝您游戏愉快！

-- 展开阅读全文 --