游戏开发求助：实现随时间递增的多火球生成与运动逻辑

我明白你想要实现随时间生成更多火球的需求，之前用数组和push没成功，咱们来修改你的现有代码，一步步实现这个功能：

核心修改思路 #

原来的代码只针对单个火球做处理，我们需要改成用数组管理所有火球实例，同时新增动态创建火球的逻辑，再定时触发生成新火球的操作。下面是修改后的完整代码，我会在后面标注关键改动点：

HTML 部分

<img src="Photo/Spaceship1.png" id="icon">
<!-- 火球会动态生成，不需要提前写在HTML里 -->

JavaScript 部分

// 生成火球初始X位置的工具函数
function getFireballX(offset) {
    return Math.floor(Math.random() * (window.innerWidth - offset));
}

// 存储所有火球的数组，每个元素是一个包含DOM元素、位置、碰撞状态的对象
let fireballs = [];
// 火球下落速度
const FIREBALL_SPEED = 1;
// 初始生成火球的间隔（毫秒）
let spawnInterval = 2000;
// 控制生成火球的定时器
let spawnTimer;

// 创建新火球的函数
function createFireball() {
    // 动态创建火球DOM元素
    const fireballEl = document.createElement('img');
    fireballEl.src = "Photo/fireball.png";
    fireballEl.classList.add('fireball'); // 可添加类名方便样式控制
    // 设置初始位置
    const initialX = getFireballX(fireballEl.offsetWidth);
    fireballEl.style.left = `${initialX}px`;
    fireballEl.style.top = '0px';
    fireballEl.setAttribute('hit', 'false');
    // 添加到页面中
    document.body.appendChild(fireballEl);
    // 将火球信息存入数组
    fireballs.push({
        element: fireballEl,
        position: { x: initialX, y: 0 },
        hit: false
    });
}

// 火球运动循环：遍历所有火球更新位置
function fireLoop() {
    fireballs.forEach(fireball => {
        // 如果火球已经碰撞过，重置位置重新下落
        if (fireball.hit) {
            fireball.position.x = getFireballX(fireball.element.offsetWidth);
            fireball.position.y = 0;
            fireball.element.style.left = `${fireball.position.x}px`;
            fireball.element.style.top = `${fireball.position.y}px`;
            fireball.hit = false;
            fireball.element.setAttribute('hit', 'false');
            return;
        }
        // 更新下落位置
        fireball.position.y += FIREBALL_SPEED;
        fireball.element.style.top = `${fireball.position.y}px`;
        // 超出屏幕后重置位置
        if (fireball.position.y > window.innerHeight) {
            fireball.position.x = getFireballX(fireball.element.offsetWidth);
            fireball.position.y = 0;
            fireball.element.style.left = `${fireball.position.x}px`;
            fireball.element.style.top = `${fireball.position.y}px`;
        }
    });
}

// 碰撞检测：遍历所有火球检查与飞船的碰撞
function checkCollision() {
    const spaceship = document.querySelector("#icon");
    fireballs.forEach(fireball => {
        if (!fireball.hit && detectOverlap(spaceship, fireball.element)) {
            fireball.hit = true;
            fireball.element.setAttribute('hit', 'true');
            alert("lost");
            // 游戏结束时清除定时器
            clearInterval(fireballSpeed);
            clearInterval(spawnTimer);
        }
    });
    // 用requestAnimationFrame替代setTimeout，让检测更流畅
    requestAnimationFrame(checkCollision);
}

// 保留你原来的碰撞检测工具函数
var detectOverlap = (function () {
    function getPositions(element) {
        var pos = element.getBoundingClientRect();
        return [[pos.left, pos.right], [pos.top, pos.bottom]];
    }
    function comparePositions(p1, p2) {
        let r1 = p1[0] < p2[0] ? p1 : p2;
        let r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }
    return function (a, b) {
        var pos1 = getPositions(a), pos2 = getPositions(b);
        return comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1]);
    }
})();

// 初始化游戏
function initGame() {
    // 先创建第一个火球
    createFireball();
    // 启动火球运动循环（60fps更流畅）
    const fireballSpeed = setInterval(fireLoop, 1000 / 60);
    // 启动碰撞检测
    requestAnimationFrame(checkCollision);
    // 定时生成新火球，并且随时间缩短间隔提升难度
    spawnTimer = setInterval(() => {
        createFireball();
        // 最小间隔设为500ms，避免生成过快
        if (spawnInterval > 500) {
            spawnInterval -= 100;
            // 重置定时器以应用新的间隔
            clearInterval(spawnTimer);
            spawnTimer = setInterval(() => {
                createFireball();
                if (spawnInterval > 500) spawnInterval -= 100;
            }, spawnInterval);
        }
    }, spawnInterval);
}

// 页面加载完成后启动游戏
window.addEventListener('load', initGame);

关键改动说明 #

1. 数组管理火球：用fireballs数组存储所有火球的信息，替代原来的单个变量，方便统一处理多个火球的运动和碰撞。
2. 动态创建火球：新增createFireball函数，负责生成火球DOM元素、设置初始属性，并将其加入数组，不需要提前在HTML中写死火球。
3. 遍历处理运动：fireLoop现在遍历数组中的每个火球，更新它们的位置，碰撞过或超出屏幕的火球会重置位置重新下落。
4. 全局碰撞检测：checkCollision遍历所有火球，检查每个火球与飞船的碰撞，一旦碰撞就标记并结束游戏。
5. 定时生成逻辑：通过spawnTimer定时器定期生成新火球，还会随时间缩短生成间隔，逐步提升游戏难度。
6. 流畅度优化：将动画帧率调整为60fps，用requestAnimationFrame替代setTimeout做碰撞检测，让游戏运行更流畅。

内容的提问来源于stack exchange，提问作者user13962354