使用Hype物理引擎制作一个网页小游戏(下)

本节是本教程的最后一节，本节主要内容是带大家使用Hype的物理量功能，对部分元素赋予物理量，完成游戏的开发制作，然后再进行一些网页的相关优化设置，提高游戏体验。

一、施加物理量

在Hype中，默认新建的每个元素的物理量都是“停用？不施加物理量”，如下图1。

图1：默认元素物理量

因此大家需要手动去对某些特定元素施加特定的物理量，大家跟着小编来分析一波。由于小球是需要元素碰撞提供弹力的，因此对某些元素是需要施加物理量，提供弹力的，其中需要提供弹力的元素有：上下左右四个矩形墙壁、左右两个能够翘起和释放的矩形、上方横向移动的矩形障碍。

因此，需要选中上述说到的这些元素，然后在“物理量检查器”中，设置元素物理量为“静态？互相影响，没有移动”，然后更重要的是设置退还系数，这其实就是元素的弹性系数，这里小编给的系数值是0.58，如下图2，毕竟弹性太大小球反弹速度就会很快，游戏难度就很大了，给一个适当的弹性系数还是很重要的。

图2：施加物理量和退还系数

下面对圆形小球施加一个物理量，具体如下图3。元素物理量选择为“动态？全物理量主体”，代表小球是会受到重力、摩擦力、弹力等物理量的影响，并因此产生移动。

其中，密度设置为1.0，密度系数影响的是小球的质量，即受到的重力，这里设置1.0，使用正常的重力即可；退还系数0.58，和其他的元素相同；摩擦力设置为0.0，取消摩擦力的影响，防止小球因为摩擦力出现意想不到的诡异移动曲线；空气阻力设置为0.1，因为实际上空气的确存在着阻力，加上空气阻力会让游戏体验更好一点；如果设备支持重力感应，还可以额外勾选上“通过设置倾斜控制重力”选项。

图3：对小球施加物理量

二、网页优化设置

完成上述步骤后，游戏就可以正常运行起来了，但是因为移动设备的不同，游戏体验可能有差异，因此还需要对不同的设备做一些相关的优化设置。首先：在“文稿检查器”中，点击“编辑头HTML”，如下图4。

图4：编辑头HTML

第二步：然后往打开的文件中，加入图5红框的代码，这行代码是为了使网页兼容移动设备的不同宽度，同时限制网页不可被缩放和放大，优化游戏的体验。

图5：往头文件中加入代码

第三步：打开“场景检查器”，然后在“场景加载时”，再添加一个操作，操作选择“运行JavaScript”，函数选择新函数，然后命名为“preventScroll”，如下图6。

图6：场景加载时运行JavaScript

第四步：这时Hype会为大家打开新函数的编写界面，在该函数中加入下图红框的代码即可，这一段代码是为了阻止浏览器的默认事件，比如右键可以复制文字等浏览器自带的属性功能，这些功能可能会影响到游戏的游玩体验，因此需要进行禁用。

图7：编写JavaScript代码

好了，到了这里本教程就算是正式完成了，大家赶快动起手来，实现自己的一个小游戏吧！