简易网页版打弹珠游戏实现示例

使用 GPT-4o Mini 回答，作者 GPT4oMini.app

问题：

实现一个简易的网页版打弹珠游戏

答案：

创建一个简易的网页版打弹珠游戏可以使用HTML、CSS和JavaScript。下面是一个基本的实现示例：

HTML (index.html)

<!DOCTYPE html>
<html lang="zh">
<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>
    <h1>打弹珠游戏</h1>
    <div id="gameArea">
        <canvas id="gameCanvas"></canvas>
    </div>
    <button id="startButton">开始游戏</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

#gameArea {
    border: 2px solid #333;
    position: relative;
}

#gameCanvas {
    background-color: #fff;
    display: block;
}

button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
}

JavaScript (script.js)

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

canvas.width = 800;
canvas.height = 600;

let balls = [];
let isGameRunning = false;

class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = Math.random() * 4 - 2; // 随机水平速度
        this.dy = Math.random() * 4 - 2; // 随机垂直速度
    }

    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.dx;
        this.y += this.dy;

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

function spawnBalls(num) {
    for (let i = 0; i < num; i++) {
        const radius = Math.random() * 20 + 10; // 随机半径
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * (canvas.height - radius * 2) + radius;
        const color = '#' + Math.floor(Math.random() * 16777215).toString(16); // 随机颜色
        balls.push(new Ball(x, y, radius, color));
    }
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    balls.forEach(ball => {
        ball.update();
        ball.draw();
    });
    requestAnimationFrame(update);
}

function startGame() {
    if (!isGameRunning) {
        isGameRunning = true;
        balls = [];
        spawnBalls(10); // 生成10个弹珠
        update();
    }
}

startButton.addEventListener('click', startGame);

说明

  1. HTML: 创建了一个简单的页面结构，包括一个标题、一个画布和一个开始游戏的按钮。
  2. CSS: 设置了页面的基本样式，使其看起来更美观。
  3. JavaScript:
    • 创建了一个Ball类，用于表示弹珠。
    • spawnBalls函数用于生成随机位置和颜色的弹珠。
    • update函数用于更新弹珠的位置并重绘画布。
    • startGame函数用于开始游戏，生成弹珠并开始更新循环。

如何运行

  1. 将上述代码分别保存为index.html、styles.css和script.js。
  2. 在浏览器中打开index.html文件。
  3. 点击“开始游戏”按钮，开始游戏。

这个示例是一个非常基础的打弹珠游戏，你可以在此基础上添加更多功能，比如得分系统、碰撞检测、游戏结束条件等。