实现技术

我们会使用浏览器的 DOM 来展示游戏界面,我们会通过处理按键事件来读取用户输入。

与屏幕和键盘相关的代码只是实现游戏代码中的很小一部分。由于所有元素都只是彩色方块,因此绘制方法并不复杂。我们为每个元素创建对应的 DOM 元素,并使用样式来为其指定背景颜色、尺寸和位置。

由于背景是由不会改变的方块组成的网格,因此我们可以使用表格来展示背景。自由可移动元素可以使用绝对定位元素来覆盖。

游戏和某些程序应该在不产生明显延迟的情况下绘制动画并响应用户输入,性能是非常重要的。尽管 DOM 最初并非为高性能绘图而设计,但实际上 DOM 的性能表现得比我们想象中要好得多。读者已经在第 13 章中看过一些动画,在现代机器中,即使我们不怎么考虑性能优化,像这种简单的游戏也可以流畅运行。

在下一章中,我们会研究另一种浏览器技术 —— <canvas>标签。该标签提供了一种更为传统的图像绘制方式,直接处理形状和像素而非 DOM 元素。