【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:

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

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

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

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

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

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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286494.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【WEB API项目实战干货系列】- API登录与身份验证(三)

这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. 这一篇的主要原理是: API会提供一个单独的登录API, 通过用户名,密码来产生一个SessionKey, SessionKey具有过期时间的特点, 系…

mysql数据库建立的数据库在哪个文件夹?

为什么80%的码农都做不了架构师?>>> 一般在安装目录下的data文件夹下,或者在C:\Documents and Settings\All Users\Application Data\MySQL\MySQL Server 5.1\data(你的可能是C:\Documents and Settings\All Users\Application D…

ArcGIS实验教程——实验二十四:人口密度制图

ArcGIS实验视频教程合集:《ArcGIS实验教程从入门到精通》(附配套实验数据)》 一、实验分析 人口密度是指单位土地面积上居住的人口数,通常以每平方千米或每公顷内的常住人口为单位计算。人口密度同资源、经济密切结合,因此,科学准确地分析人口密度的分布情况,对合理制定…

Navicat 远程连接ubuntu出现的问题

2003-Cantt connect to Mysql server to xxxxxxx 解决: vim /etc/mysql/my.cnf 修改bind-address 0.0.0.0 然后重启mysql: 这时进入mysql可能会报错: ERROR 2002 (HY000): Cant connect to local MySQL server through socket /v…

WPF效果第一百八十八篇之再玩Expander

大端午节的在屋里吹着空调撸着代码真是酸爽;闲话也不多扯,直接看今天要分享的效果:1、关于简单的布局设计:2、前台先来个死布局,回头ListBox改模板:<Expander ExpandDirection"Left" Header"控制卡" VerticalAlignment"Bottom" HorizontalAli…

Android之实现长按Webview页面文字自定义复制、全选、分享、搜索、翻译功能(支持多语言,博文也有Demo下载地址)

1 需求和效果爆照 浏览器app封装了Webview,然后实现实现长按Webview页面文字自定义复制、全选、分享、搜索、翻译功能(支持多语言),都在自己的浏览器app里面进行搜索和翻译,不跳到系统浏览器里面去 效果爆照如下,oppo手机效果如下 华为手机效果如下 2 Demo下载地址 De…

中国西北地区专题地图合集(高清)

1. 西北地区概况图 2. 西北地区植被类型分布图 3. NDVI变化趋势图 4. 气候与NDVI的相关性

使用putty连接linux

使用putty连接linux 快照的使用 &#xff0c;做快照相当于做备份&#xff0c;比如配置好IP&#xff0c;快照一下&#xff0c;下次就可以在回到这里&#xff01; putty下载 最好去官网下载 下载putty.zip如图所示 如何使用putty 如图设置好IP然后 save 保存 如…

【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)(四)

目前最新的代码已经通过Sqlite NHibernate Autofac满足了我们基本的Demo需求. 按照既定的要求&#xff0c;我们的API会提供给众多的客户端使用, 这些客户端可以是各种Web站点, APP, 或者是WinForm, WPF, Silverlight等诸如此类的应用&#xff0c;将来还有可能是各种Iot等物联…

【GIS风暴】GIS拓扑关系原理详解

目 录 1. 拓扑关系的概念2. 拓扑元素3. 拓扑关系4. 拓扑关系的意义5. 拓扑在ArcGIS中实现1. 拓扑关系的概念 地图上的拓扑关系是指图形在保持连续状态下的变形(缩放、旋转和拉伸等),但图形关系不变的性质。 2. 拓扑元素 对二维而言,矢量数据可抽象为点(节点)、线(链、…

Android之简单的文件夹选择器实现

1、效果爆照 2、代码实现 前提需要保证app有读写权限 activity_select_folder.xml文件如下 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layo…

【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照

目录 【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iV…

360极速浏览器使用postman

步骤如下&#xff1a;1、将crx文件打包成zip文件2、解压打包的zip文件&#xff0c;并将_metadata文件夹修改为metadata3、打开360浏览器的扩展4、360浏览器加载postman插件5、创建快捷方式6、双击快捷方式打开postman下载地址&#xff1a;http://pan.baidu.com/s/1c1ZX8XE如果网…

聊聊 C++ 和 C# 中的 lambda 玩法

这几天在看 C 的 lambda 表达式&#xff0c;挺有意思&#xff0c;这个标准是在 C11标准 加进去的&#xff0c;也就是 2011 年&#xff0c;相比 C# 2007 还晚了个 4 年&#xff0c; Lambda 这东西非常好用&#xff0c;会上瘾&#xff0c;今天我们简单聊一聊。一&#xff1a;语法…

Windows10系统重装后必不可少的优化步骤

1. 查看系统的激活状态 Win+R,打开运行,输入slmgr.vbs -xpr,回车! 可以看到,该系统没有永久激活,即将过期,过期后部分功能会不可使用,需要重新激活。 2. 彻底关掉Windows Defender 方法一: 打开“命令提示符(管理员)”,然后输入: reg add "HKEY_LOCAL_MA…

【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏

目录 【iVX 初级工程师培训教程 10篇文拿证】01 了解 iVX 完成新年贺卡 【iVX 初级工程师培训教程 10篇文拿证】02 数值绑定及自适应网站制作 【iVX 初级工程师培训教程 10篇文拿证】03 事件及猜数字小游戏 【iVX 初级工程师培训教程 10篇文拿证】04 画布及我和 iVX 合照 【iV…

visual studio系列(vs)启动调试网站使用ip+端口局域网访问

vs系列工具创建web应用时会自动创建一些配置文件&#xff0c;本文章讲的是如何修改配置文件&#xff0c;使vs在启动运行调试情况下 使用ip端口形式在局域网访问。本文章使用的是vs2015&#xff0c;.net 4.5。步骤如下&#xff1a;1.使用vs创建好你的web应用&#xff0c;打开项目…

Android studio之编译提示Could not find :umeng-asms-v1.2.1:.

1 、问题 Could not determine the dependencies of task :app:compileDebugJavaWithJavac. > Could not resolve all task dependencies for configuration :app:debugCompileClasspath.> Could not find :umeng-asms-v1.2.1:.Required by:project :app> Could not …

WPF效果第一百八十九篇之又玩Expander+ListBox

上一篇文章已经提前预告了今天要分享的效果,今天接着上一篇的效果接着去实现,还是先来看最终实现的效果:1、关于简单的布局设计:总结&#xff1a;①③是Expander②④⑤⑥是ListBox2、把上一篇的②这一块用ListBox替换:<Expander Grid.Column"1" ExpandDirection&q…

作为一个甘肃天水人,我对罐罐茶有一种特殊的情怀

作为一个出生在罐罐茶世家的80后乡土人&#xff0c;经历了罐罐茶的发展演变历史&#xff0c;与罐罐茶结下了不解情缘&#xff0c;下面我就跟大家分享一下刘一哥与罐罐茶的故事吧。 久违的罐罐茶.mp4美丽邂逅 我最早接触罐罐茶应该是90年代&#xff0c;那个年代家里条件很不好&…