实例：使用Hype物理引擎制作一个网页小游戏（一）

Hype软件是一款Mac系统上的HTML5制作软件，在该软件中，引人注意的是它强大的物理引擎功能和动画制作功能，作为一个专业的程序员，要制作一款具备物理量的网页小游戏，少说也要费上一番功夫，更别提非专业编程人员了，但是这些问题，使用上Hype，可以迎刃而解。

下面，小编将使用Hype 4版本，演示如何快速且简单地制作一个具备元素重力物理量的网页小游戏，从此教程中，相信大家能感受到Hype的强大与魅力。

一、游戏画面展示

教程开始前，请大家先跟小编看看最终的网页游戏效果预览GIF吧，对将要做的效果进行一个大致的了解。

图1：网页游戏效果GIF预览

游戏玩法是：点击上方的“reset”文字，会出来一个圆形小球，小球具备重力和弹力，会自然下落，撞到墙或者是杠杆会反弹，玩家通过点击左边的L方块或者右边的R方块，弹起小球，一旦小球从正中间掉下，则视为失败。

了解了玩法以后，针对这个玩法，需要部署好对应的静态场景，然后使用Hype的物理引擎，对小球施加各种物理量，之后再制作一些动态效果，如颜色渐变，按钮点击事件等等，就可以实现这个小游戏啦，下面请大家跟随小编一起开始进行场景的部署。

二、页面制作

第一步：该游戏更多是想用于手机端休闲时使用，所以从上图GIF预览中可以看出，场景不大，因此，在Hype界面左侧中选择创建一个新场景，然后在“场景检查器”中，设置场景的大小为“320px * 568px”,再填充下场景的背景颜色，颜色大家认为舒适即可，小编的背景颜色代码设置为“#5C131F”，具体如下图2。

图2：设置场景大小和颜色

第二步： 点击“元素”按钮，选择矩形，创建四个矩形，然后使用鼠标拉动调整矩形的大小和位置，使得矩形大小和摆放的位置如下图3红框所示。

可能看到这里有人有疑惑？为什么要在场景外添加这4个矩形呢，是不是有点多余，反正在场景外也看不到矩形，添加来干嘛？其实不是的，这4个矩形虽然在场景外看不到，但是其主要作用是作为墙壁，为小球提供碰撞的弹力，如果没有这4个墙壁，小球会直接飞出场景外，因此这4个矩形是有必要的。

图3：4个矩形作为墙壁

第三步：为上述4个矩形，在元素检查器中的边框选项中，添加一个宽度为5px，样式为实现，颜色为绿色的边框。

图4：添加边框

第四步：在元素按钮中，添加两个圆角矩形，并在第一个矩形中输入L，第二个矩形中输入R，字体大小为44px。然后在“度量检查器”中调整两个圆角矩形的宽度和高度为90px，再在“元素检查器”中加入边框，宽度2px，样式为实现，颜色为朱红色，最后摆放两个矩形元素的位置如下图5。

图5：加入L和R两个矩形

第五步： 同样的，在元素按钮中，再添加两个矩形，矩形的宽度为283px，高度为17px，然后加入大小为2px的实线蓝色边框，再在“度量检查器”中，设置其中一个矩形的旋转角度(Z,X,Y)为（20,0,0）,另一个矩形的旋转角度为（-20,0,0），最后摆放两个矩形在如下图6所示位置，并确保它们处于同一水平线上即可。

图6：加入杠杆矩形

第六步：在元素按钮中，添加一个矩形和椭圆形，然后设置矩形的宽度和高度为79px，并加入2px的实线绿色边框；设置椭圆形的宽度和高度为48px，并加上2px的实线白色边框，最后设置0时刻该椭圆形的不透明度为0。这里可以根据自身需要调整椭圆形的大小，大点的话游戏难度自然变小，小点的话游戏难度增大。

完成大小设置以后，拖动元素位置，摆放位置如下图7。

图7：加入障碍和小球

第七步： 最后，在元素按钮中添加一个按钮，写入文字“Reset”，设置一个恰当的背景颜色，然后摆放在下图8红框位置即可。此按钮用于点击时，开始或重置游戏。

图8：加入Reset按钮

那么本小节的静态场景页面到这里就制作完成了，但是完成场景的制作只能算完成了小游戏的一半，游戏还需要加入一些动态的事件才能算正式完成。在下一节《实例：使用Hype物理引擎制作一个网页小游戏（二）》中，小编将带来制作网页小游戏教程的剩下部分，请大家继续关注城东书院网站进行后续学习哦。