《uni-app》一个非canvas的飞机对战小游戏实现（一）准备

这是一个没有套路的前端博主，热衷各种前端向的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～接下来的几篇都是uni-app的小实战，有助于我们更好的去学习uni-app~
主页: oliver尹的主页
格言: 跌倒了爬起来就好～

一. 前言

最近分享的都是关于uni-app相关的文章，接下来的几篇依旧是uni-app，不过这次打算 写一个稍微完整一些的demo项目，加上之前有小伙伴问了一些相关问题，虽然当时回答了，但回过头来感觉不是太好，因此打算在这系列中从头开始将这些问题贯穿起来以便更好的理解与反思～

这次分享的demo项目是：一个非canvas的飞机对战小游戏，为什么要强调是 非canvas，因为，理论上canvas实现的性能最佳，这个毫无疑问的，那 本文为什么不用canvas，有两个原因：第一个，主要的原因是因为本篇的 目的是为了更好的理解与学习uni-app，而不是canvas，某种程度上讲，其实canvas已经属于前端领域中的另外一门学科了，我一直觉得它应该算是图形算法领域的东西，只是在JavaScript这里借了个壳…第二个，canvas我也不大会，写不出来，啊哈哈…开个玩笑，不要介意~
耐心看完，或许你会所有收获~

二. 阅读对象与难度

本文难度属于：初级，适合有对uni-app并不大了解的新人，本文的主要为这个项目代码的一些 前期准备，通过文本你可以大致了解到一下内容

• 飞机大战大致要实现什么功能模块；
• 开发工具以及如何新建一个uni-app项目；
• uni-app如何使用npm以及如何安装lodash；

具体内容可以参考以下的思维导图：

三. 系统介绍

我们要实现的这个小游戏 虽然是一个demo，或者说演示版本，但是功能必须是齐全的，只是说某些功能可能略微有些简陋需要后期的改造，不过简陋归简陋，并不影响我们学习，本demo预计包含以下几个大功能，大致思维导图如下（因为是前期计划，可能不准，不过应该不会出现更本性的变化）：

当然，在第一阶段我们 只考虑功能的实现，并不考虑模块化以及功能的可扩展性等等，在这个阶段所有的模块代码的划分可能没有那么清晰，各个系统之间的代码会相互穿插、相对比较乱，当全部实现了之后我们再考虑优化…

3.1 UI界面

本demo的图片资源来自于百度等一些 资源网站的下载，好不容易凑齐了一套，如侵权请联系博主，立刻替换或者删除…这个项目中UI主要有：

• 游戏启动界面：通过启动界面开启飞机大战的战斗界面；
• 游戏结束界面：触发结束游戏后的游戏界面，结束条件为我发飞机模型被摧毁（该项待定）；
• 我方飞机模型：我方可以操控的飞机模型，包含飞机被摧毁时触发的毁坏动画；
• 敌方飞机模型：敌方的飞机模型，这个模型分为两种，一种是小飞机，一种是大飞机，以及该两种模型被摧毁时的动画；
• 子弹模型：我方飞机可操控发射子弹；

3.2 逻辑操作

逻辑操作算是这个项目比较麻烦的部分了吧，逻辑操作部分主要实现的包括：

• 我方飞机：操控飞机的前后左右运动以及发射子弹的操作；
• 敌方飞机：随机生成敌方飞机类型，敌方飞机运动动画；
• 子弹模型：子弹模型的创建以及创建后的运动轨迹；
• 碰撞检测：检测子弹与敌机的碰撞，检测敌方飞机与我方飞机的碰撞；

3.3 积分系统

这部分主要的作为用计算得分，比如敌方飞机的类型一共有2种，大飞机被摧毁时得分10分，小飞机被摧毁时得分5分，并且这个系统后期还可以扩展，比如排名啥的～当然在这里算是简单实现了，仅计算最终得分～

3.4 音效系统

这个模块主要的作用是音效，毕竟不带音乐的游戏有点奇怪，当然demo也不可能会去搞什么特别好的，因此到时候随便在网上下载一些音乐资源来代表不同结局的音效吧～

4. 开发工具

由于这是一个uni-app的项目，因此开发工具我们还是选择：HBuilderX，这是uni-app官方提供的IDE，别的不敢说，在开发uni-app上 HBuilderX 比vscode什么的都要方便；

4.1 下载安装

打开官网：https://www.dcloud.io/hbuilderx.html，根据自己的电脑版本下载对应的安装包，这里选择 正式版 即可，测试版对于我们这种一般的开发人员个人感觉用不上；

安装的过程是傻瓜式的，只需要下一步下一步即可；

4.2 插件安装

安装完成的 HBuilderX 相当于一个裸IDE，这点和VSCode有点类似，需要安装一些插件，这些插件将帮助我们更好的进行代码的编写，首先打开 插件市场，路径是：工具 -> 插件安装，

选择 “前往插件市场安装”，点击后会通过浏览器一个网页，这个网页就是uni-app官方提供的插件市场，差不多是这样的：

在这个市场中可以搜索到需要安装的插件，这里推荐几个：

• less编译：这个是可以在项目中使用less这个CSS与处理器；
• scss/sass编译：同上，可以在项目中使用scss/sass这个CSS与处理器；
• prettier：代码的格式化工具，很好用在vscode中用的也是这个，强烈推荐；

更多的插件还是自己根据自己的习惯即可，很多在vscode上使用的插件基本在这里也能找到或者找到类似的～

4.3 创建项目

打开 HBuilderX 这个IDE，点击左上方“文件”，选择“新建”->“项目”

输入项目名称，选择项目路径，模版的话这里我们选择 默认模版 即可，uni-app官方内置了好些模版，这些模版可以协助我们快速的搭建UI布局，Vue的版本我们选择Vue2，虽然Vue3已经有一些普及，但是在插件这些生态上还需要一段时间来完善，vue2的话毕竟这么多年了，生态也已经很完善了～

五. npm安装

关于npm的安装可以参考博主的另外一篇博文《npm详解及在uni-app中对npm的支持》，在这篇中其实已经详细介绍了，这边只是简单说明一下

5.1 初始化npm

始化的过程其实也非常简单，一共两步，当然，初始化的前提是电脑必须安装nodeJS的环境，如果没有安装nodeJS，前往nodeJS官网，自行选择安装包进行下载，nodeJS官网地址如下：NodeJS官网地址，下载完后，进行双击安装即可，安装步骤还是非常傻瓜式的～
话说回来，初始化npm的过程一共分为两步：

• 第一步：cd到需要运行初始化命令的项目目录，我们需要在这个项目的根目录执行初始化命令；
• 第二步：执行初始化命令：npm init

第一步就不多说了，主要是第二步，当在控制台执行完

npm init
1

之后，它会在控制台让你输入一些选项，这些选项无非就是让你确认一下项目名、版本号等等，对于不确定的都可以不管，因为这些值都 可以在最终的package.json里进行修改，初始化时的示例图大致如下：

当初始化完成后，node会在当前路径下生成一个package.json文件，具体如示例图所示：

这个文件生成即代表npm初始化成功～

5.2 安装lodash

在当前项目目录下，也就是 和package.json这个目录同级 的路径执行命令：

// 安装lodash
npm install lodash --save
1
2

运行命令后，会在终端中执行下载lodash相关的代码，当安装成功后，打开package.json文件，会在其内显示如下图的字段：

这样就代表lodash安装成功了～

六. 小结

本文主要概述了接下来我们这个飞机大战小游戏的主要功能，主要功能有四个，分别是：UI，逻辑操作，积分系统以及音效系统，接着为了方便能接下来的分享，特此简单的说明了我们选择的IDE，使用的是HBuilderX，并且介绍了HBuilderX是如何下载安装以及其使用的插件，最后由于我们的项目预计会使用到lodash，还介绍了在HBuilderX中如何初始化npm、安装lodash；