开发者社区> 小蚂蚁教你做游戏> 正文

想做个答题类的微信小游戏?读这篇文章就够了

简介: **这是小蚂蚁游戏开发公众号原创的第71篇。 本文重要内容包含答题类小游戏的制作原理和制作方法,在掌握实现原理和方法后,你也能够根据自己的需要,制作自己的答题类小游戏。
+关注继续查看


**这是小蚂蚁游戏开发公众号原创的第71篇。

本文重要内容包含答题类小游戏的制作原理和制作方法,在掌握实现原理和方法后,你也能够根据自己的需要,制作自己的答题类小游戏。

如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。


文中的“答题小事例项目”已开源到社区,原型是官方提供的“高尔夫答题”小程序,我对其进行了改编,大家可以拿到项目工程后,对照着项目,理解文中的内容。

开源项目地址:https://gamemaker.weixin.qq.com/#/game?game_id=lbOWEwNTRhMzMtYTA3Yi00MjQxLTgxMjAtOGJlOGRmMDBiZWEx


想做个答题类的小程序?亦或者想做个背单词类的小程序?这篇文章将会从原理到实践,帮助你彻底弄明白答题类小程序的制作思路和制作方法。


答题类的小程序主要以内容为主,就是说要去编辑题目和答案,对于题目的编辑操作,最合适的方式当然是使用表格进行编辑了。下面就介绍一个答题类小程序实现中最重要的角色:表格


在微信小游戏制作工具中,创建和使用表格非常的简单。在数据区中点击“新建表格”按钮,即可新建表格了。


640.png


可以看到这里,我创建了一个叫做“题库”的表格,用来盛放所有的题目。

640.png

这里我创建了一个 5 行 5 列的表格,第 1 列是题目,第 2,3,4 列是选项,第 5 列是答案,答案中记录的是正确选项的列号。


通过这个表格我们可以知道下面这些信息:

一共包含多少个题目(总行数)

每一题有多少个选项

每一题的题目是什么

每一题的正确答案是什么

我们只需要从表格中取出一行数据,就能够获得当前的题目,选项以及答案。


微信小游戏制作工具中的表格数据是可以进行导入,导出操作的, 你可以将表格数据导出来,然后在自己的电子表格软件中进行编辑,编辑完之后,再将数据导入进去。


640.png


数据导出后,会自动生成一个以 csv 为后缀名的文件,该文件可以直接使用电子表格软件打开。下图为我在 WPS表格 中打开的导出数据。


640.png


当你在表格中编辑完所有的题目后,点击制作工具中表格对话框中的“导入”按钮,选择对应的文件即可导入了。


640.png

这里选择“覆盖”,会将原有表格中的数据删除,使用新的导入的数据进行填充。


以上就是一个答题类小程序最核心的数据了,接下来我们要做的就是如何去操作这样的一个表格,让这些数据变成一个可以互动的答题小游戏。


我们将会实现一个这样的答题小游戏,每个回合随机地从题库中抽取三道题来进行回答。


这里有一个重点,要从题库中随机的抽取题目,当然随机抽取的题目是不能重复的,那么如何实现一个随机抽取不重复的题目的功能呢?


这里,我们需要再引入一个重要角色:列表。列表可以把它理解成只有一列的表格。在数据区中,点击“新建列表”按钮即可以创建列表了。


640.png


可以看到,列表中只包含一列数据。

640.png


实现思路:使用列表来记录已经抽取的题目编号,当我们随机抽取到一个新的题目编号时,首先检查一下这个题目的编号是否已经在列表中了,如果在的话,就证明了这个题目已经抽取了,不能再重复抽取了,需要去重新随机抽取。如果不在话,就把这个新的题目编号记录在列表中。


首先,我们创建几个变量。


6674713b23292a1d38cd44eb7716093e.png


“随机题目编号”用于记录抽取到的题目的列表,“全局-题目数量”表示的是需要抽取几道题,“全局-抽取题目编号”表示的是当前随机到的题目编号。


接下来,看一下具体的实现逻辑。

edd9f5783ae6a1930d91e1db596a2808.png


接着,我们来看一下如何将题目展现出来,并且能够进行互动。


首先,来看一下界面和素材,这里将所有的与题目相关的内容都放在一个容器中,包含了题目,选项以及一个倒计时。每当出现一道题目时,上方显示问题,中间显示 3 个选项,然后下方显示剩余倒计时。


549174e84b40ff19b16b39e9907399ed.png


先来看一下标题的逻辑。

2cc2aac5886ac21623a17ef6d7a5cc11.png

题库表格中的第 1 列对应的是题目。

582ae8f72c8a40c3f770a99b23b79029.png


接着,来看一下如何创建选项。首先我们需要创建 2 个变量。

b062434c57f704babb6df36e4050de22.png

一个局部变量“当前选项”,用于存储当前选项在“题库”表格中的列号,全局变量“全局-选项”则用于在克隆体创建时设置其“当前选项”。


看一下选项的创建逻辑。

360461df6efb757b9a4a516a79568413.png


注意这里的选项从 2 开始,因为在表格中 2 ,3 ,4 列对应的是题目的选项。

3c97b927dd67f3b136c89dc4d9393794.png


接着看一下答题时的逻辑。

e98a107f95c54a2876881b9d6df8493e.png

这里我们只需要关注一个最核心的积木块,当点击选项时,比较局部变量“当前选项”中保存的列号,与正确答案的列号是否相同,相同的话则回答正确,不同的话则回答错误。


注意:题库表格中第5列记录的是“正确选项的列号”,这里不要错把第 5 列的数据当成了问题的答案。

6b8ababb5b83abe5190f434b0f910865.png


最后,再来看一下倒计时的实现。

b0e4723ec93a6ae743bef91f15a33af9.png

包含了3个素材,一个倒计时的数字,一个背景和一个进度。在这里主要介绍一个“遮罩”插件的使用方法。


在行为中开启遮罩插件。

8320c27760e03e59453f41753ad647da.png


可以看到遮罩插件有很多的属性,这里我们使用“扇形”类型,用于实现一个圆圈的倒计时效果,利用遮罩插件可以实现游戏中的诸如血条,冷却等效果。

8f32eb37c38b04b757aede4fe15eaa3d.png


看一下,倒计时效果的实现逻辑。

d1fe167c36e631bd44dafd6349a83b2e.png


通过设置扇形遮罩的角度,就可以实现一个不错的圆圈倒计时效果了。

0b79268a8567695a07d83e45b5411379.gif


最后,我们来看一下答题小程序的最终效果。

e73677fdccc48965266a06d182863020.gif

开始后,显示随机抽取的题目,在倒计时结束前选中正确的选项即可得分。


当前的所有的题目都是从题库中随机抽取的,但是做多了难免会遇到相同的题目,而且选项顺序也是相同的,这样往往是扫一眼题目,就知道是哪个选项了,因为选项是固定不变的,那么能不能实现,让每道题目的选项也进行随机排列呢?


实现起来并不复杂,在我们当前的基础上,只需要在生成选项时,对选项的位置进行随机的排列即可。


22614608f7c6adef2abf0dae23667369.png

如图,是当前的实现,我们按照选项的列号进行顺序排列。选项的列号分别? 2,3,4,我们是根据这 3 个列号计算的选项的位置,所以每道题的选项顺序都是固定不变的。


如果想要实现选项的随机排列,那么我们需要做的就是随机的对 2,3,4 这三个数字进行排列组合,然后根据随机的排列组合中的数字对选项的位置进行设置。


跟随机抽取题目的实现原理一样,我们使用一个列表,来存储随机的排列组合,然后根据列表中的数据对位置进行设置。


我们创建几个新的变量。

9aaeada4057909abe5723b088cd47afa.png

“随机选项顺序”列表用于存储随机的 2,3,4四个数字的随机组合,“全局-抽取顺序”变量用于帮助创建列表,“全局-当前顺序”用于设置选项的位置。


接着,看一下实现逻辑。

cf8e6f120af0178f233af5f0c3d24cdc.png

红线中圈出的部分为新增的逻辑,在创建选项前,我们先创建随机的选项顺序列表,然后在创建选项克隆体的时候,根据“随机选项顺序”列表中的数据对选项的位置进行设置。


这样我们就实现了一个可以随机抽取题目,随机设置选项顺序的答题小游戏了。


总结一下,答题小程序的关键部分在于对表格的理解,设计好了表格,就相当于完成了最重要的数据部分。另外,借助列表我们可以实现各种随机的功能,包括随机从题库中抽取不重复的题目,随机的排列题目的选项等等。


只要原理理解了, 各种答题类的小程序就都可以制作了,对于背单词类的小程序就更容易了,表格内容更加的简单,只需要两列,一个单词列,一个解释列就可以了。


希望这篇文章可以帮助你理解答题类小程序的制作思路和方法,也能够制作出自己的答题小游戏。?


如果你对微信小游戏开发感兴趣,欢迎关注我的公众号,学习更多游戏开发教程或者了解更多与游戏开发有关的原创内容。



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
18817 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
27997 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22051 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
15499 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的,?mysql的 3306,?mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建. ? have?fun! ?将编程看作是一门艺术,而不单单是个技术。
20110 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
14868 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23538 0
+关注
小蚂蚁教你做游戏
关注我的微信公众号【小蚂蚁教你做游戏】
96
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载
http://www.vxiaotou.com