第2章
编写一个简单的HTML5小游戏：打造游戏界面

从本章开始，我们将会介绍如何开发一个挡板小游戏，这个小游戏也是贯穿全书的项目，下面来看一下这个小游戏项目的基本逻辑。

□左右各一个挡板，右挡板是系统挡板，自动上下移动；左挡板是用户挡板，在用户的触摸控制下上下移动。

□有一个小球在屏幕内自动运动，与挡板或四壁碰撞后会反弹；左右任何一个挡板接住小球，即可得一分，任何一方先得3分则游戏结束。

□游戏有30s的计时限制，游戏结束后可以单击屏幕重新开始。

在开发这个小游戏的过程中，我们也会同步介绍开发微信小游戏涉及的所有JS知识点，建议大家跟随笔者的步伐进行实践。

这个挡板小游戏的逻辑很简单，非常适合初学者学习。我们将从绘制一个游戏标题的文本开始，到绘制挡板、小球、分界线，再到为小球和挡板添加互动控制逻辑，最后为游戏添加重启功能及循环播放的背景音乐。在这个过程中，我们会渐进式地创建所有代码，实现所有游戏逻辑。待所有HTML5功能完成后，再移植到微信小游戏中。HTML5游戏所用的Canvas API与微信小游戏是相同的，先从HTML5版本入手学习，初学者会更加容易入门。

在完成本章及下一章的学习后，游戏界面如图2-1所示。

图2-1 HTML5挡板小游戏的完成效果

在正式开始本章学习之前，请看一下这段代码：

如果不能明白最终输出结果为什么是145，请先学习一下JS基础知识。