模拟“嫦娥五号”探月小游戏【附源码】

青旅半醒 2022-12-29 01:54 127阅读 0赞

**1. 嫦娥五号**

大家好，欢迎来到编程教室，我是 Crossin。

昨天凌晨，也就是2020年12月17日的1点59分，嫦娥五号返回器携带月球表面的土壤样品安全返回着陆，这也标志着探月工程嫦娥五号任务顺利完成。这是我国航天史上的首次。我国也因此成为了地球上第三个从月球上成功采样的国家。

为了庆祝这一重大时刻呢，我做了一个模拟探月的小游戏。

**2. 一个小游戏**

这个小游戏模拟了嫦娥五号探测器在月球表面**降落、采样、上升、对接**这一系列过程。

在实际的探月过程中，这些操作都是由程序精确测量和控制的。而在这个游戏里，则需要玩家手动完成 **降落** 和 **上升对接** 这两个操作。

![format_png][]

![format_png 1][]

![format_png 2][]

点击屏幕中间的区域，可以控制发动机点火，从而在降落时制动减速，以及之后让上升舱起飞。点击屏幕两边的区域则可以调整探测器的姿态，从而实现左右位置的调整。这在最后与轨道舱对接时非常关键。

如果降落时和对接时速度过快，那我们的任务就失败了。所以，你需要通过你灵巧的手指，让探测器在保持一个平稳的状态。

看着是不是还挺简单的？不过已经试玩过的朋友里，我知道的还没有一个人可以第一次就对接成功的。

同样，当我们在新闻里看到嫦娥五号很轻松很顺利发射、入轨、降落、采样、上升、对接、返回，其背后是几代航天人艰苦卓绝的努力，难度之大远超一般人的想象。这里再次向他们致敬。

如果你想挑战一下，可以在公众号“Crossin的编程教室”里回复：**嫦娥**

获取试玩地址。

**3. 开发环境**

这个小游戏是用 cocos creator 进行的开发，使用的语言是 JavaScript。

![format_png 3][]

我的一位小伙伴提供了游戏的画面素材。

![format_png 4][]

获取游戏的源码，请在公众号“Crossin的编程教室”里回复：**嫦娥**

**4. 开发思路**

这里我从技术层面简单介绍一下这个游戏的核心开发思路，也是用 cocos 开发游戏的基本套路。

首先，是3个重要的概念：**层、动作、状态机**。

可以这么说，弄清楚这三个概念，90% 以上的小游戏你都可以搞定了。

**4.1 层**

虽然现在的 Cocos Creator 已不需你去手动创建层（CCLayer），但层级的概念始终是存在的。各种节点通过层级添加，构成了游戏的场景。

![format_png 5][]

直观的理解，就好比现实中这样一个玩具的效果：

![format_png 6][]

表示大陆的节点添加在整个背景板上，其他节点又加在大陆节点上。

层级结构既决定了游戏元素的显示先后，也决定了它们所处的坐标位置。

在这个游戏中，层级比较简单。唯一复杂的点在于：上升器原本被添加在着陆器之上，这样它可以随着着陆器位移和旋转；而在上升阶段，我又将它从原本父节点上移除，添加到了背景上，这样方便后续的坐标计算。

![format_png 7][]

**4.2 动作**

动作系统是 cocos 的一大特色，不过本文不详细展开讲了。游戏中，主要的控制部分并没有借助动作系统，也没有使用物理引擎，而是直接通过数学计算位移实现。动作系统主要用在月壤采集阶段的动画效果上。钻探、采集是用了缩放动作 cc.ScaleTo；升旗是用了旋转动作 cc.rotateTo；然后再配合上延迟动作 cc.delayTime 和函数回调 cc.callFunc。

参考代码：

flag1 () {
        this.flag.opacity = 255;
        var a1 = cc.rotateTo(1, 360);
        var a2 = cc.callFunc(this.flag2, this);
        this.flag.runAction(cc.sequence(a1, a2));
    },

**4.3 状态机**

游戏的本质就是一个主循环加上各种状态的切换。在循环中，游戏要处理游戏逻辑、用户输入、画面渲染、数据更新、电脑角色AI等事务（本游戏主要是前三个，核心逻辑都在 update 函数里）。为什么配置低的电脑玩游戏会“卡”，原因就是每一次循环需要的时间更长，以至于无法让游戏的“帧数”达到人无法感知的程度。

只有主循环，游戏仍然是“死”的。只有加上各种“状态”，游戏才能推进、胜利或者失败。（可留意代码中 phase 变量的作用）

状态机示意图（非本游戏）：

![format_png 8][]

**4.4 数学**

有人常问，数学对于学编程到底重不重要？我觉得吧，不要担心，大多数情况你在开发中是用不到数学的。但如果你是一个游戏程序员，那至少你得对初中程度的数学和物理滚瓜烂熟。

前面有提到，这个游戏的核心控制是用数学来计算的。其实可以理解为，用代码实现了一套牛顿三大定律的世界：

1.  飞行器始终受到一个向下的重力G
2.  当“点火”时，飞行器会收到一个向顶部方向（未必是向上）的推力F
3.  根据飞行器当前的姿态角度，计算出这个推力F分别在x轴和y轴上的分量（要用到三角函数）
4.  因为力和加速度成正比，所以最终计算出的轴向作用力就可以当做加速度来使用。这个加速度会在每一帧去改变飞行器在x轴和y轴上的速度，同时速度又会在每一帧去改变飞行器在x轴和y轴上的位移

参考代码：

var change = this.node;
    this.speed_y += this.ctrl.G;
    
    
    var f_x = Math.sin(-Math.PI / 180 * change.angle);
    var f_y = Math.cos(Math.PI / 180 * change.angle);
    this.speed_x *= 1.001;
    this.speed_x += f_x * this.ctrl.F;
    this.speed_y += f_y * this.ctrl.F;
    
    
    change.x += this.speed_x * dt * 60;
    change.y += this.speed_y * dt * 60;
    change.angle += this.ctrl.R;

你可能猜不到，这个简单的小游戏里，最复杂的一段代码是哪里：

![format_png 9][]

是的，就是这个落地后调整姿态的小动作。如果你看到代码里这一通复杂的计算操作一脸懵逼，就跳过它吧。

**4.5 引擎**

如果你的目标是写出好玩的游戏，那么选一个合适的引擎很重要。对我个人来说，这次的喷火效果是一个小彩蛋，用了 Cocos Creator 里的粒子系统。这是我第一次用它，花了十来分钟就搞定了，效果还不错。可以对比下我之前做的火箭回收小游戏，算是相当真实了！

![format_png 10][]

假如你要阅读源码，或在基础上做进一步修改，可以重点对照以上几点进行阅读。

如果你对游戏编程感兴趣，或者还想看点其他类型游戏的话，可以在文章下留言，我会参考大家的意见。如果你喜欢我的内容，欢迎点赞和转发。

获取游戏演示及源码：

请在公众号“Crossin的编程教室”里回复关键字：

**嫦娥**

--------------------

\_往期文章推荐\_

[火箭回收小游戏][Link 1]

--------------------

![format_png 11][]

[format_png]: /images/20221120/44fa5fd32cab40a6a9aea88b17adf0c2.png
[format_png 1]: /images/20221120/444c155de94f4b5daa626f65a40dad9f.png
[format_png 2]: /images/20221120/550610d0ab0e4cbcb5160fbf98480927.png
[format_png 3]: /images/20221120/4d21fae2dd3c4da5a5e3257b8306a5ee.png
[format_png 4]: /images/20221120/34fbb9e4700e44e9a1d35af654f1d851.png
[format_png 5]: /images/20221120/456d07e509624424b9305eb66bbc4278.png
[format_png 6]: /images/20221120/de27ba8ce5154edcaeb032d4fa1cd0b7.png
[format_png 7]: /images/20221120/f67fe27d9ea047e1b5ddcd51a1c9c761.png
[format_png 8]: /images/20221120/6b2c5cde4d3f4566b3ab92a33a753ffc.png
[format_png 9]: /images/20221120/148c39ab52044a21aed599721b03ec9e.png
[format_png 10]: /images/20221120/28bb94f21f1e437d9eebfb1bce771fce.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDEyMDk4Mw%3D%3D&chksm=be4b6e8a893ce79c7f1c1614ac3cc536cffd26d492f5e970a143aa240a469e8b69c11472acfe&idx=1&mid=2650170354&scene=21&sn=80d9f6b321d20c273d623ada2290c4eb#wechat_redirect
[format_png 11]: /images/20221120/c07e478861384467a46487dd5350efd5.png