使用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代码

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

猜你喜欢

转载自blog.csdn.net/weixin_52308504/article/details/114092451