如何在您的HTML5游戏中创建月球着陆器 - 傻瓜

这是最古老的游戏类型之一。基本的想法是在没有任何气氛的情况下复制你的HTML5游戏的星球着陆。阿波罗号宇航员的燃料数量有限，可以减缓飞行的航天器的速度，并将其安全地带到地面。这个游戏是这个主题的变化。

月球着陆器游戏的本质是推力和重力之间的相互作用。游戏很大程度上依赖于addVector（）方法。重力会使每个框架产生一个小的向下的推力，这可以通过箭头键的推力来抵消。

<！ --1 - >

游戏提供四个不同的着陆器图像（提供用户正在使用推力的反馈），只需根据需要将其与setImage（）方法交换即可。

游戏冲突

这个游戏最有趣的部分是着陆程序。普通的碰撞程序不足以处理这种类型的碰撞，因为只有在许多条件成立的情况下着陆才被认为是安全着陆。检查多个条件的最简单的方法是深度嵌套的if结构，如下所示：

tLander。 checkLanding = function（）{if（this。falling）{if（this。y> 525）{if（this。x platform。x - 10）{if（this。dx - 。2）{if（this。dy < 2）{this。 （0）setSpeed;这个。下降=错误;消息=“很好的着陆！”;}其他{消息=“太多的垂直速度”;} //结束如果}其他{消息=“太快到左”;} //结束如果}其他{消息=“太快如果} //结束'x太大'如果} //结束'x太小'如果} //结束'y不够大'如果} //结束'我们在下降吗？ 'if} // check checkLanding

当你同时检查几个条件时，最好为每个条件创建一个单独的if语句。将每个if语句放在下一个内部，因此代码中嵌套最深的部分表示成功。

确定你是否下降。

创建了一个名为“下降”的布尔变量，用于描述航天器是坠落还是降落。如果下落是真的，则重力被关闭。如果你目前正在下降，检查登陆状态才有意义。
检查Y值。

由于平台放置在550的Y值，因此当Y值大于525时，着陆器将显示为着陆。您只关心着陆器底部接触平台的顶部。请注意，此检查发生在下降检查内。如果任何条件失败，则不需要检查其他条件。
检查X值。

您需要着陆器的中心位于平台中心的十个像素之内，因此请使用一对嵌套的if语句来检查X位置。检查水平速度。
为了安全着陆，飞行器的dx值必须在-0之间。 2和0. 2.（这有些武断，但在测试时，感觉是正确的。）这最好用一对嵌套if语句来检查。检查垂直速度。

如果其他所有部件运行良好，请检查一下是否飞行速度不太快。使用dy属性来确定飞船坠落的速度。用别的条款提供反馈。
像这样的深层嵌套结构向您展示了合适的缩进和评论的真正价值。在其他各个条款中提供反馈，解释为什么着陆被认为是失败。

游戏文本控制台
代码的另一个有趣的部分是向用户显示文本数据的机制。最简单的方法是通过一个简单的HTML div。使用CSS将div正好放在你想要的位置。在正常的网页开发中，你绝对不应该使用绝对定位，这在为游戏创建标签的情况下是有意义的。

请注意，您可能需要将z-index属性设置为较高的值以确保其显示在画布上方，否则用户可能看不到该属性。下面是使标签看起来像输出在屏幕上的CSS：