《HTML5 2D游戏编程核心技术》——第1章，第1.5节开始Snail Bait游戏编程

1.5　开始Snail Bait游戏编程
图1.16显示了Snail Bait游戏的初始文件集合。在本书中，我们将逐步增加更多的文件。但是现在，我们需要一个HTML文件来定义游戏中HTML元素的结构；一个CSS文件来定义这些元素的可见属性；一个JavaScript文件来定义游戏的逻辑；以及两张图像，一个作为背景，一个作为跑步小人。

图1.16　Snail Bait游戏的初始文件集合

图1.17显示了游戏的开始时间点，只绘制出了背景和跑步小人。开始时，跑步小人并不是一个sprite对象，而是直接绘制出来的。

图1.17　绘制背景和跑步小人

程序清单1.3列出了游戏开始时的HTML代码，但仅是程序清单1.2的简化版本。
程序清单1.3　Snail Bait游戏开始时的HTML代码

初始化时，arena仅仅包含800像素宽，400像素高的游戏canvas，而且有一个细的蓝色边框。程序清单1.4显示了开始阶段Snail Bait游戏的CSS代码。
程序清单1.4　Snail Bait游戏开始时的CSS代码

程序清单1.5显示了开始阶段Snail Bait游戏的JavaScript代码。
程序清单1.5　Snail Bait游戏开始时的JavaScript代码

前面提到的JavaScript会访问canvas元素，然后获得一个canvas 2D环境的指针。代码通过使用3参数变量的drawImage()函数，画出背景和跑步小人，canvas中图像的位置是确定的。
背景图像加载完成时，游戏开始。现在，启动游戏仅仅是简单地完成绘制背景和跑步小人。