Kaboom.js 默认创建全屏 canvas，若要将其渲染到特定 DOM 元素（如 id 为 game-placeholder 的 div），必须显式传入 canvas 选项，指向目标容器内的 元素。
kaboom.js 默认创建全屏 canvas，若要将其渲染到特定 dom 元素（如 id 为 `game-placeholder` 的 div），必须显式传入 `canvas` 选项，指向目标容器内的 `
Kaboom.js 初始化时默认会自动创建并插入一个全屏 <canvas></canvas> 到 末尾，因此即使你已定义了 #game-placeholder，游戏也不会自动渲染其中——它根本不会感知该 div 的存在。解决方法很简单：手动指定渲染目标 canvas，并确保该 canvas 是 #game-placeholder 的子元素。
✅ 正确做法：显式创建 canvas 并传入 canvas 选项
首先，在 HTML 中为 #game-placeholder 添加一个 <canvas></canvas> 子元素（或用 JavaScript 动态创建）：
<div id="game-placeholder"> <canvas></canvas> </div>
然后在初始化 Kaboom 时，通过 document.querySelector() 获取该 canvas，并作为 canvas 配置项传入：
const gameCanvas = document.querySelector("#game-placeholder canvas");
kaboom({
width: 640,
height: 360,
clearColor: [0, 0, 0, 1],
scale: 1,
debug: true,
global: true,
canvas: gameCanvas, // ? 关键：指定渲染目标
});
add([
text("Hello, Kaboom.js!", { size: 24 }),
pos(320, 180),
origin("center"),
]);? 注意：Kaboom v3+ 中
text()的字体大小参数已改为对象形式{ size: 24 }（旧写法text("...", 24)已弃用），请同步更新以避免警告或异常。
⚠️ 常见错误与注意事项
- ❌ 不要省略
canvas选项：不传则 Kaboom 自建 canvas，与你的 div 无关； - ❌ 不要将
#game-placeholder（div）直接传给canvas选项：它必须是<canvas></canvas>元素； - ✅ 推荐显式声明
<canvas></canvas>标签（而非用 JS 创建），便于样式控制（如width/height、display、border等）； - ✅ 若需响应式适配，可结合 CSS 设置
#game-placeholder canvas { width: 100%; height: auto; }，并启用 Kaboom 的letterbox: true或动态resize()监听。
✅ 最终效果
此时游戏将严格渲染在 #game-placeholder 内部的 canvas 上，div 不再显示为纯黑块，而是正常呈现 Kaboom 场景——文字居中显示，调试面板（若开启）也依附于该 canvas。
通过精准控制渲染上下文，你不仅能实现模块化布局（如侧边排行榜共存），还能为后续集成 UI 框架、路由系统或服务端渲染打下坚实基础。
