本文介绍如何通过循环动态创建指定数量的障碍物对象并存入数组，替代手动定义，从而支持游戏难度分级（如简单6个、中等12个、困难24个），提升代码可维护性与扩展性。
本文介绍如何通过循环动态创建指定数量的障碍物对象并存入数组，替代手动定义，从而支持游戏难度分级（如简单6个、中等12个、困难24个），提升代码可维护性与扩展性。
在 Canvas 游戏开发中，硬编码障碍物数组（如手动写入 3 个或更多重复结构）不仅冗余，更难以适配动态难度系统。理想方案是将障碍物数量抽象为一个可配置变量，再通过程序化方式批量生成——这正是本教程要解决的核心问题。
✅ 推荐实现：用 for 循环动态构建障碍物数组
以下是一个简洁、高效且易于集成的实现方式：
function ChooseRandom(min, max) {
return Math.random() * (max - min) + min;
}
// 可配置的障碍物数量（根据难度等级设置）
const obstacleCount = 12; // 例如：easy=6, medium=12, hard=24
const obstacles = [];
for (let i = 0; i < obstacleCount; i++) {
obstacles.push({
x: ChooseRandom(500, 2500),
y: ChooseRandom(0, 500),
width: 50,
height: 50
});
}该写法避免了重复对象引用风险（不同于 Array(n).fill({...})），确保每个障碍物拥有独立的随机坐标。
? 进阶优化：封装为可复用函数
为便于在游戏运行时动态重置障碍物（如切换难度或重启关卡），建议将其封装为工厂函数：
function generateObstacles(count, options = {}) {
const { minX = 500, maxX = 2500, minY = 0, maxY = 500, width = 50, height = 50 } = options;
const obstacles = [];
for (let i = 0; i < count; i++) {
obstacles.push({
x: ChooseRandom(minX, maxX),
y: ChooseRandom(minY, maxY),
width,
height
});
}
return obstacles;
}
// 使用示例
let obstacles = generateObstacles(24, { minX: 800, maxX: 3000 }); // 困难模式，更远起始范围⚠️ 注意事项与最佳实践
-
避免坐标重叠？ 当前逻辑不检测碰撞，若需防止障碍物初始重叠，可在
push前添加简易距离校验（如!obstacles.some(o => distance(o, candidate) ），但通常对快节奏躲避游戏非必需； - 性能考量： 即使生成 50+ 障碍物，现代浏览器也能轻松处理；若后续加入物理或复杂渲染，建议结合对象池（object pooling）复用实例；
-
与 Canvas 渲染解耦： 保持
obstacles数组纯粹描述数据，渲染逻辑应统一在主绘制循环中执行（如obstacles.forEach(...ctx.fillRect...)），便于后期扩展动画、碰撞检测等特性。
通过这种动态生成策略，你不仅能大幅精简代码，还能无缝对接 UI 难度选择器（如 <select onchange="setDifficulty(this.value)"></select>），真正实现“一次编写，多级适配”的游戏设计目标。
