12、构建画布游戏与添加音效全攻略

构建画布游戏与添加音效全攻略

1. 画布游戏的分层与性能优化

在画布游戏开发中，分层是一个重要的概念。默认情况下，后添加的 DOM 元素会位于先添加的元素之上。例如在游戏中，背景画布（bg canvas）通常处于最底层，而用户界面（ui）则位于最顶层。

我们在创建基于画布的游戏时，并不局限于仅使用画布绘图 API。以关卡进度信息为例，它可以放在另一个 ID 为 ui 的画布中。同时，我们可以将 CSS 技术与画布绘图相结合。比如在第 3 章构建记忆匹配游戏时讨论过的 CSS 技术，在本游戏中也能发挥作用。当我们在画布上拖动圆圈时，它们可能会与关卡信息重叠。在绘制 UI 画布层时，我们会检查是否有圆圈的坐标过低而与文本重叠，然后通过调整 UI 画布的 CSS 不透明度来避免分散玩家对圆圈的注意力。此外，当玩家升级后，我们可以通过 CSS 过渡效果将引导画布的不透明度渐变为 0，从而淡出引导动画。代码示例如下：

if (untangleGame.currentLevel == 1)
{
  $("#guide").addClass('fadeout');
}

为了提高画布性能，我们可以只清除发生变化的区域。通过标记自上次绘制以来状态发生变化的“脏”区域，使用 clear 函数只清除部分画布上下文，避免每次都重绘整个画布上下文。在引导画布层中，我们可以考虑只清除精灵图绘制的区域，而不是整个画布。虽然在简单的画布示例中可能看不到显著差异，但在包含许多精灵图像动画和复杂形状绘制的复杂画布游戏中，这有助于提升性能。

2. 画布游戏开发中的技巧总结

<