【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作

目录

【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iVX 初级工程师培训教程 10篇文拿证】05 画布及飞机大战游戏制作 【iVX 初级工程师培训教程 10篇文拿证】06 数据库及服务 【iVX 初级工程师培训教程 10篇文拿证】07 08 新闻页制作 【iVX 初级工程师培训教程 10篇文拿证】09 聊天室制作

高分提升请查看专栏： iVX入门到精通 大话 IVX 实战到精通

十一、飞机大战

制作微信小游戏大致流程与微信小程序、Web类似，不同的在于是组件的使用。

11.1.1 完成游戏角色制作

首先我们创建一个微信 2D小游戏：

创建好游戏场景后在游戏界面中可以添加图片，作为游戏中的元素。点击图片组件在画布中绘制一个主角飞机。点击图片后在画布中拖动鼠标绘制区域后将会弹出资源选择框：

选中我们需要添加的图片素材后，此时画布中就会出现主角飞机图片：

我们点击图片，拖拽到合适大小：

11.1.2 完成物理世界添加

为了方便之后飞机与敌机之间检测物理碰撞，我们需要在画布中添加一个物理世界，并将主角飞机作为物理世界的子对象：

为了使主角飞机能够收到物理世界的影响，需要给主角飞机添加一个物体。在对象树种点击飞机图片组件，在左侧组件栏中点击物体进行添加：

此时我们通过 web 浏览器进行调试，点击预览：

为了更好的方便观察，我们在出现的浏览器窗口中按下 F12，选择该窗口为手机浏览器窗口：

我们刷新界面后将会看到主角飞机从上往下掉落：

由于在物理世界中发生碰撞，物体之间将会出现旋转等情况，我们需要飞机头一直正朝着上方，需要禁止主角飞机的旋转角度。点击飞机主角下的物体组件，在属性栏中将物体的固定旋转角度开启：

11.1.3 完成子弹对象反重力运动

接下来开始设置子弹自动发射，我们先在画布中再次添加一个子弹图片组件，并且在这个子弹图片组件下添加物体组件：

此时预览发现子弹会自动掉落，解决这个问题只需要在子弹组件下添加一个运动组件：

我们点击运动组件，设置移动方向为 90 度则为垂直向上运动，随后给与这个方向设置移动速度，设置为 -600 则为表示反方向运动，最后还需要开启自动播放才会生效：

接着我们预览将会发现已经成功的使该子弹反方向进行运动，此时还要注意要将子弹的固定旋转属性开启，否则子弹将会在之后的碰撞中发生不理想的效果。

11.1.4 使用对象组创建子弹

由于子弹是需要间隔一定时间进行自动发射，我们现在使用对象组组件对子弹进行统一管理。此时添加一个对象组添加到物理世界中，选择管理的范围为整个画布（此处需要顶部和底部留一点空隙用于之后的碰撞处理）：

添加完毕后发现飞机和子弹都不见了，这是因为对象组覆盖了飞机主角图片与子弹图片。此时将对象组在对象树的次序放到最底部即可（在对象树种越靠近顶部显示的优先级越高）。

接着把子弹图片组件添加到对象组下：

由于子弹是间隔发射，此时我们需要在前台中创建一个触发器定时发射子弹：

随后设置触发器的时间间隔为 0.3，并且开启自动播放：

接着为触发器设置事件，条件为触发器触发时，使用对象组组件的创建对象动作并设置模板对象为子弹对象：

我们接着给子弹设置一个初始的出现位置，这个位置我们可以设置成主角飞机的位置，之后再通过微调使子弹出现的位置在飞机机头即可：

我们运行程序将会发现子弹将会自动发射：

11.1.5 子弹优化

此时子弹并不会自动消失，我们可以在顶部加一个矩形组件命名为顶部，该组件添加物体组件后，设置位置为固定 xy 坐标与固定旋转角度：

接下来我们为子弹添加一个事件，该事件触发为开始碰撞，选择碰撞对象为顶部，动作为当前对象自动移除：

此时再预览项目则会发现子弹会自动消失，但是顶部的物体存在边框和颜色，我们点击顶部组件，更改背景颜色的透明度为 0，再更改该组件的边框宽度为 0，该组件就可以从视觉上消失在这个页面之中：

接着我们开始为这个飞机主角添加移动事件。我们点击前台添加事件，当手指按下，飞机主角组件将会在指定范围内移动到该位置：

11.1.6 设置敌机

接着我们添加敌机。在对象组中添加一个图片组件，并且为其添加物体组件：

点击物体组件，设置阻尼为 0.95 并开启固定旋转角度，此时该飞机从顶部掉落速度将会减慢：

我们此时再给敌机组件一个碰撞事件，当碰到子弹时自动消失：

再给子弹组件添加一个事件，碰到敌机自动消失：

此时我们开始批量创建敌机，我们创建一个数值变量命名为随机 x，用于敌机的随机横轴位置：

接着我们在触发器中给随机 x 变量随机值：

接着在触发器中使用对象组创建飞机对象，X 值为随机x 变量值， Y 值给与一个固定值距离顶部一定距离即可：

此时敌机未击中将会掉落到屏幕底部，此时在底部添加一个透明的矩形组件命名为底部，敌机触发后自动消失：

11.1.7 优化游戏

接下来创建一个变量记录击落敌机数量：

在子弹触碰到敌机时该数值加一：

我们在前台创建一个文本命名为击落，用于显示该变量值并且设置初始文本为 0：

之后在子弹触碰敌机时添加一个动作，将显示该变量的内容：

此时预览内容将会实现计分效果：

最后在主角飞机中添加触碰到敌机时的动作：

以上事件当主角飞机触碰敌机使使用物理世界以及触发器执行暂停动作游戏则会停止。

最终考虑用户体验，我们在停止后再显示一个游戏结束文本。在前台中添加一个文本命名为游戏结束，默认为不可见：

在敌机触碰到主角时添加游戏结束文本显示操作即可：