关于我用iVX沉浸式体验了一把0代码创建飞机大战这件事

Dear 丶 2024-04-03 07:07 35阅读 0赞

关于iVX，前面已经写过两篇文章了，感兴趣的同学可以去看我前面两篇文章：[\[传送门\]][Link 1]  
![在这里插入图片描述][0e49ae4f6a3a4a7b9450604d53c39fd7.png]

#### 云原生IDE：iVX ####

*  1、iVX的系统架构
 *   *  1.1 举一个例子
     *  1.2 iVX前端技术框架
     *  1.3 后台技术框架
 *  2、创建飞机大战
 *   *  2.1 效果图
     *  2.2 创建流程
 *  写在后面的话

## 1、iVX的系统架构 ##

很多朋友还是会在后台问iVX的系统架构是什么。

这里我就给大家先再简单详细的介绍一下！~

一个iVX应用，主要由两个部分构成，前台部分和后台部分：

![在这里插入图片描述][66a69761c50e4f20b68c26f83c525646.png]

*  前台部分，对应前端应用程序，负责客户端界面的展示与交互。在iVX中，前端程序支持多种类型，包括web应用，小程序，原生app，与windows exe应用。在运行时，每个用户都会在本地客户端下载一份前端程序来运行；
 *  
 *  后台部分，对应服务端程序，部署在后台服务器（集群）中，负责后台数据与通信逻辑的处理。后台部分进一步包括后台资源接口和服务逻辑：
 *  
 *  后台资源接口，主要包含各种数据库，api，缓存，文件等后台资源的操作接口，每一种接口都对应iVX中的一个后台组件。注意，iVX仅负责生成应用程序，并不提供后台资源本身。因此，要运行iVX的后台程序，需要额外接入后台资源，比如mysql数据库，redis等等。在iVX公有云上，这些资源已经自动接入，因此可以iVX应用可以直接发布运行；如果选择私有部署，则需要自行准备资源，详见私有部署相关文档；
 *  
 *  服务逻辑，主要包含服务组件，是前端程序和后台资源进行交互的“中央枢纽”。其提供了一个HTTP的服务接口（REST  
    API），可以供iVX前端部分应用或其他第三方应用来调用，同时，可以直接操作各种后台资源，并定义内部处理逻辑。

### 1.1 举一个例子 ###

![在这里插入图片描述][db742c6db6f846729387cbfaa7434f2a.png]  
左侧的用户界面，即前端应用，其运行在用户的浏览器端，负责收集用户填写的信息；右侧的数据库表，即后台资源，负责存储所有用户提交的信息；中间的提交服务，即后台的服务层，负责监听前端应用发送过来的请求，对请求的数据进行处理，比如，判断一下提交的数据是否合法，然后调用数据库表，写入数据。数据写入之后，服务还需要根据写入是否成功，将结果返回给前端应用，这样前端应用可以把数据提交结果在界面上提示出来。

### 1.2 iVX前端技术框架 ###

iVX 的前端核心框架为web应用，主体使用react架构，部分内部模块使用了自研的对象驱动引擎，并引用了pixi.js, three.js等画布渲染库。同时，web应用可以通过不同的打包方法生成其他类型的应用，如下图所示：

![在这里插入图片描述][cbd5f652bec44f6f9ebc1dd0b8ebd5e3.png]

### 1.3 后台技术框架 ###

iVX的后台程序，可以直接发布在iVX公有云上运行，也可以导出部署至其他服务器环境。其详细架构如下图所示：  
![在这里插入图片描述][c5a6d022edae4841a2bd8099219413a7.png]

## 2、创建飞机大战 ##

### 2.1 效果图 ###

![在这里插入图片描述][a7a7875a5c9a47339aa803651dd037b8.png]  
![在这里插入图片描述][7b71cd3af8a54d39a52cc2951a6febce.png]

### 2.2 创建流程 ###

首先我们创建一个小程序~  
![在这里插入图片描述][7bb68fc5f7f5429cb5fd8ac34ad17a98.png]

而后我们在后台资源中调试出物理画布，如下图所示~

![在这里插入图片描述][88c56e94d676467391fa34ad6eeb5734.png]

导入好我们本地炸弹的图片~飞机、子弹等等  
![在这里插入图片描述][c123eff4bbb444f29c695e256531fe68.png]

导入后，可以设置好导入图片的宽度、高度等等。  
![在这里插入图片描述][d126b007cc8d4bbe949bc779ed87ff63.png]

随后设置该陨石的一个垂直重力即可实现降落陨石功能。

![在这里插入图片描述][6ed75c6298e142258ceb1198821021f4.png]  
还可以添加运动属性~给运动的物体增加很多配置，以完成预想的目的效果。  
![在这里插入图片描述][14c5c59a840145309397ad5f9e8be6c1.png]  
在这里我们增加两个属性：位置和速度，并且设置他们的参数值~

![在这里插入图片描述][4334ad0426ac48eaa638ae38fce56f04.png]

在小模块功能中，设置好生成的随机数的一些最大值最小值，就可以实现随机出现陨石了~  
![在这里插入图片描述][a470f20517a84511a869b83952baef9f.png]  
随后，在动作组的定义中，整合好最开始设置的物理世界的子对象与模板对象的配置~  
![在这里插入图片描述][b0f0585bba68462aa3b06d063530fcfd.png]  
随后我们如法炮制，把子弹和飞机一起添加进我们的物理世界~  
![在这里插入图片描述][469b0c2b759a4d3d9edef62d0acdc00a.png]  
然后就是增加对应的子弹运动以及一些对象组配置~

![在这里插入图片描述][1d1250ff7b814bf39c5419b5c698841f.png]  
别忘记设置好 子弹撞击陨石之后的 陨石消失~即把陨石这个对象移除即可。  
![在这里插入图片描述][caea9e44357f4d279e8cd1db4375bec6.png]  
这样，一个飞机大战的游戏就做好了~

![在这里插入图片描述][7eabff952d3749e6b99f64354822e9db.png]

## 写在后面的话 ##

怎么样，看到这里是不是心动了呢~

iVX动手尝试电梯：[电梯链接][Link 2]  
iVX官网：[https://www.ivx.cn/][https_www.ivx.cn]  
iVX公众号：ivx\_cn  
iVX在线学院：[iVX在线学院跳转电梯][iVX]

![在这里插入图片描述][a6db5f1a2c0143a888fd69c94e0cfafa.png]

[Link 1]: https://blog.csdn.net/weixin_51484460/article/details/126112705
[0e49ae4f6a3a4a7b9450604d53c39fd7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9e0b62d522ae419e89944702537dc62b.png
[66a69761c50e4f20b68c26f83c525646.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0f39a874fcba4da0bf33efa6046e169b.png
[db742c6db6f846729387cbfaa7434f2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/16ae7df9a619469ca86ab04d942977d4.png
[cbd5f652bec44f6f9ebc1dd0b8ebd5e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3a03f2bb1e494eeb8e1ed79ee5ffaa3b.png
[c5a6d022edae4841a2bd8099219413a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ff7c5ff9c46146ef9382482f24dc9aef.png
[a7a7875a5c9a47339aa803651dd037b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/9377391c52514380ae1bb19f86b15bac.png
[7b71cd3af8a54d39a52cc2951a6febce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ec35181a478348a3b220aa9b0f1758d2.png
[7bb68fc5f7f5429cb5fd8ac34ad17a98.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/04f6b35f077549c3b4ca9c8b6a948df5.png
[88c56e94d676467391fa34ad6eeb5734.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c1aeaf68bf654a918b8af0799ddf61e4.png
[c123eff4bbb444f29c695e256531fe68.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cbafaeab1eef4dec94fc15d6385ed8a3.png
[d126b007cc8d4bbe949bc779ed87ff63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5a249b131c6c4f8f8b489280307ebc36.png
[6ed75c6298e142258ceb1198821021f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4952c7f8100d41518ba46f609b1d93b6.png
[14c5c59a840145309397ad5f9e8be6c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/c760b06259294dffbc539d46ba286af0.png
[4334ad0426ac48eaa638ae38fce56f04.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0df385bc46924b82bf61e009d6aed801.png
[a470f20517a84511a869b83952baef9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/7c107b09574a42539ad0259e02a57074.png
[b0f0585bba68462aa3b06d063530fcfd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ef6e7f44f04345f1ba5c29a2e5592e93.png
[469b0c2b759a4d3d9edef62d0acdc00a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/dca7ac180d2649ce9ae4362d1ad13c16.png
[1d1250ff7b814bf39c5419b5c698841f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e6955936686c4899a7cd78e31ba1f570.png
[caea9e44357f4d279e8cd1db4375bec6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2374ccea48994c5c97cd5f2c7aed2f21.png
[7eabff952d3749e6b99f64354822e9db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cc0f7830a3424aa29eb96d613dc4f7dc.png
[Link 2]: https://demo.ivx.cn/
[https_www.ivx.cn]: https://www.ivx.cn/
[iVX]: https://course.ivx.cn/route/home
[a6db5f1a2c0143a888fd69c94e0cfafa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/1a8bc914dea447059fbf468d6aaa252e.png