本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章，第1.4节Snail Bait游戏中的HTML和CSS，作者［美］ 戴维·吉尔里，更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1.4 Snail Bait游戏中的HTML和CSS
Snail Bait游戏使用了HTML、CSS和JavaScript，其中大部分是JavaScript，事实上，本书接下来的章节主要关注JavaScript，只是偶尔谈及HTML和CSS。
图1.12显示了游戏上半部白色轮廓中的HTML元素，以及它们对应的CSS代码。
图1.12 Snail Bait上半部对应的CSS
Snail Bait游戏中的所有事件都发生在arena内，arena是一个HTML DIV元素。arena的margin属性值是0，auto，这用于指明arena被放在浏览器中心，其内的所有物体都是水平居中的，如图1.13所示。
当Snail Bait游戏加载资源时，它会显示如图1.14所示的动画。在该动画播放期间内，游戏中所有的元素都是不可见的，这也是图1.12中的元素显示属性都被置为none（除了snailbait-arena之外，因为它本身没有可见属性）的原因。
图1.13 Snail Bait位于窗口的中心且被水平放置
图1.14 Snail Bait游戏的加载动画
在游戏资源加载完成后，通过设置游戏元素display属性为block，随后设置opacity属性为1.0（完全不透明），可以让游戏元素显示出来。具有和opacity属性相关的转换的元素，例如snailbait-lives、snailbait-score以及snailbait-game-canvas，会在一段指定的时间转换出来。
snailbait-lives元素有一个绝对（absolute）位置；另外，在它默认的静态位置处，它会自动扩展以便于适应所属DIV元素的宽度，使玩家得分能够显示在其内部。
游戏的canvas元素，即HTML5 canvas元素，是所有游戏行为发生的地方；它是图1.12中唯一不属于DIV的元素。
图1.15显示了游戏下半部的HTML元素。
图1.15 Snail Bait游戏底部对应的CSS
同游戏上半部的lives和score元素一样，在游戏加载动画时，浏览器不显示底部的元素，因此这些元素初始时是不可见的，有一个5秒钟的不透明度转换，Snail Bait游戏会让这些元素在游戏开始时同score和lives元素一样，渐渐地显示出来。
snailbait-sound-and-music元素和snailbait-lives元素一样，有一个绝对位置，在扩展时不会超出边界。snailbait-keys和snailbait-explanation DIV有一个inline（内联）显示属性，这样可以和DIV里的其他元素保持在一条水平的直线上，而不是被垂直地堆叠起来。
程序清单1.2适当地列出了Snail Bait游戏的部分HTML代码，省略了相当数量的HTML实现，如运行缓慢警告和开发者后门等。
程序清单1.2 index.html文件代码（摘录）
canvas元素是所有动作发生的地方。canvas元素和一个用来实现2D游戏、具有强大的API的2D开发环境一起出现，你将会在3.1节中了解到相关内容。canvas元素里面的文本是回退文本，只有在浏览器不支持HTML5 canvas元素时，才会显示出来。
关于游戏的HTML和CSS最后需要注意的是：canvas元素的宽度和高度是通过之前的canvas元素属性列表来设置的。这些属性适合canvas元素的大小，也适合元素内部绘制表面（drawing surface）的大小。
另一方面，使用CSS来设置canvas元素的宽度和高度仅仅是改变canvas元素的大小。绘制表面仍然是默认的宽度和高度（300像素×150像素）。这意味着设置canvas元素的大小不是默认的300×150时，你得到的canvas元素的大小和绘制表面的大小是不匹配的，浏览器会调整绘制表面的大小来适应canvas元素的范围。大多数情况下，这种调整是我们不希望看到的。一个好的解决方案是，通过canvas元素自己的宽度和高度属性来设置canvas元素的大小，而不是通过CSS。
现在，你已经了解Snail Bait游戏最终将形成的结构和呈现的画面，现在让我们从头开始，一步步编程实现Snail Bait游戏。
在一个较小的canvas元素内绘制，使用CSS来调节它？
有些游戏会故意在一个较小的canvas元素内绘制，并使用CSS调节canvas元素，从而得到一个可以操作的大小。在此种方式下，canvas元素不需要操作很多像素点，因此性能会得到提高。当然，性能也会因为调节canvas元素的大小而有所损失，但是CSS调节是典型的硬件加速过程，因此调节成本可以达到最小。目前几乎所有最新版本的浏览器都配备了硬件加速canvas元素技术，使用这样的浏览器绘制一个全尺寸的canvas元素，其速度也是非常快的。
HTML元素和CSS类的命名空间
为了避免和其他HTML元素的命名冲突，Snail Bait中每个HTML元素和CSS类名都以“snailbait-”开始。
