小皇可可|使用Hype物理引擎制作一个网页小游戏（上） Hype软件是一款Mac系统上的HTML5制作软

【小皇可可|使用Hype物理引擎制作一个网页小游戏（上）】Hype软件是一款Mac系统上的HTML5制作软件，在该软件中，引人注意的是它强大的物理引擎功能和动画制作功能，作为一个专业的程序员，要制作一款具备物理量的网页小游戏，少说也要费上一番功夫，更别提非专业编程人员了，但是这些问题，使用上Hype ，可以迎刃而解。
下面，小编将使用Hype4版本，演示如何快速且简单地制作一个具备元素重力物理量的网页小游戏，从此教程中，相信大家能感受到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所示位置，并确保它们处于同一水平线上即可。

文章图片