本文介绍如何通过循环动态创建指定数量的障碍物对象并存入数组，替代手动声明多个重复对象，从而实现游戏难度分级（如易/中/难对应不同障碍物数量），提升代码可维护性与灵活性。
本文介绍如何通过循环动态创建指定数量的障碍物对象并存入数组，替代手动声明多个重复对象，从而实现游戏难度分级（如易/中/难对应不同障碍物数量），提升代码可维护性与灵活性。
在基于 HTML5 Canvas 的简易躲避类游戏中，障碍物通常以对象形式存储在数组中，并在每一帧中遍历绘制。原始写法需手动为每个障碍物编写独立对象字面量，不仅冗余，更难以根据游戏状态（如玩家选择的难度）动态调整障碍物密度。理想的解决方案是：用一个变量控制障碍物总数，通过循环自动生成结构一致、位置随机的对象并推入数组。
以下是一个清晰、可复用的实现方式：
function ChooseRandom(min, max) {
return Math.random() * (max - min) + min;
}
// ✅ 根据难度动态设定障碍物数量
const difficultyLevels = {
easy: 6,
medium: 12,
hard: 24
};
const currentDifficulty = 'medium'; // 可由 UI 下拉菜单或按钮动态赋值
const obstacleCount = difficultyLevels[currentDifficulty];
// ✅ 动态初始化障碍物数组
const obstacles = [];
for (let i = 0; i < obstacleCount; i++) {
obstacles.push({
x: ChooseRandom(500, 2500),
y: ChooseRandom(0, 500),
width: 50,
height: 50
});
}
// ✅ 绘制所有障碍物（建议放入主渲染循环中）
function renderObstacles() {
ctx.fillStyle = '#e74c3c'; // 可选：统一设置填充色
for (const obs of obstacles) {
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
}
}关键优势说明：
- ✅ 解耦配置与逻辑：难度数值集中管理（
difficultyLevels），修改一处即可全局生效；- ✅ 零重复代码：不再需要复制粘贴数十行相似对象；
- ✅ 运行时可变：可在游戏开始前、暂停后或关卡切换时重新调用该逻辑，生成新批次障碍物；
- ✅ 易于扩展：如需避免重叠，可在
push前添加碰撞检测逻辑；如需差异化尺寸/速度，可将width/height等属性也改为随机生成。
⚠️ 注意事项：
- 当前方案不保证障碍物互不重叠——若需严格避免堆叠，应在
push前对新生成坐标执行与已有障碍物的边界检测（例如Math.abs(newX - existingX) > 50 && Math.abs(newY - existingY) > 50）； - 实际项目中，建议将障碍物生成逻辑封装为独立函数（如
generateObstacles(count)），便于单元测试与复用； - 若障碍物需持续移动（从右向左飞行），应在游戏主循环中更新其
x值，并移除飞出画布（x ）的对象，再适时补充新障碍物以维持数量恒定——这正是实现“动态难度”的核心机制。
通过这一模式，你不仅能大幅精简初始化代码，更能为后续添加难度曲线、波次系统、甚至程序化关卡生成打下坚实基础。
