微信小游戏开发实战14-闯关模式的实现

简介: 本文主要内容是介绍精致1010闯关模式的设计和实现思路。如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。

本文主要内容是介绍精致1010闯关模式的设计和实现思路。

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



最新版本的精致1010,新增了一个全新的游戏模式:闯关模式。今天就跟大家聊一下它的制作思路和大致的方法。


之所以制作这样的一个模式,起初的想法是这样的:原来的游戏模式一局的时间比较长,以我自己为例,进行一次游戏的时间至少要在 10 分钟以上,如果认真仔细一点儿,想玩到几千分的话,那么可能需要半个小时以上。很明显这样的单次游戏时长对于一个小游戏来讲有些太长了,但是游戏模式已经是这样了,如果想要缩短单次游戏之间,在现有的模式下只能通过增加游戏难度这种方式,但这并不是一种好的方式。


那么如何能把这样一个简单的消除游戏的单次游戏时间缩短到几分钟之内呢?答案就是创建一个新的游戏模式:关卡模式。每一个关卡玩家只需要用几分钟的时间即可完成,要么闯关成功,要么闯关失败。


基于上述的原因,我为游戏新增了闯关模式,原有的游戏模式被称作是经典模式,来满足两种不同场景下的需求,闯关模式可以在几分钟的碎片时间里玩一下,而经典模式可以用来打发一大段的无聊时间。


闯关模式其实也并不复杂,当前只增加了障碍玩法。只是通过修改了一下游戏目标,两种游戏模式就变得迥然不同了。


  • 经典模式下的游戏目标是尽可能多的进行消除从而获得更高的分数。

  • 闯关模式下的游戏目标是尽快的消除游戏中的障碍从而完成关卡挑战。


在经典模式中玩家想要获得更高的分数,需要尽可能长时间的活下去,而闯关模式中,玩家会总是想尽快的搞定这个关卡,去挑战下一个关卡。


可以看到我们只需要调整玩家在游戏中的目标,就可以达到两种差别非常大的行为结果,因此当你在设计游戏玩法时,不妨试着将游戏中的目标切换一下,说不定能带来一些意外的惊喜。


接下来是闯关模式实现的大致思路。


闯关模式与经典模式最大的不同在于游戏结束判断条件的不同, 在经典模式中,游戏结束的判断条件是检查网格中是否还有位置能够放置剩余的任何一个形状,如果没有的话则游戏结束(有关于游戏结束判断的具体实现方式,可以参考一下这篇文章)。在闯关模式中,游戏结束的判断条件分为两种,一种跟经典模式一样,作为闯关失败的条件,另一种是需要去判断游戏中障碍方块的数量,如果没有障碍方块了,则游戏过关。


在实现上只需要使用一个全局变量来记录障碍方块的数量,每当消除一个障碍方块,即将全局障碍方块的数量减 1,数量为 0 时则游戏过关。


闯关模式中,工作量最大的地方可能就是关卡设计了,起初我想到的是使用随机的方式去生成关卡,为此我制作了一个游戏原型进行测试,得出的结论是虽然随机的方式可以让一个关卡在每次进入时都是不同的,但是由于无法控制障碍块的出现位置,也就无法控制当前关卡的难度,因此随机生成关卡的方案就被否决了。最终我使用的是手动的设计关卡,每一个关卡都人工设计,以此来保证一个可控的难度曲线,让关卡的难度可以平缓的上升。


实现闯关模式最大的关键点在于数据的设置和展现。即如何将一个关卡中的障碍数据在网格中展示出来。

如图是一个填满了数据的网格,绿色填充为 1 的方格表示关卡中的障碍块,白色的填充 0 的方格表示的空位置。我们可以通过这样设置网格中的数据来进行关卡的设计,如果一个障碍块需要消除 2 次才能移除,就直接把障碍块的数字设置为 2 即可。在设计完关卡后,只需要将网格的数据导出来,然后在游戏中加载这些关卡数据进行显示就行了。


一个关卡的数据就像这样:

0000000000000000000000021120000001001000000100100000010010000001001000000211200000000000000000000000


这是一个长度为 100 的字符串,每一个数字代表的是一个方格中的内容,0 表示空,大于 0 的表示不同的障碍块,从网格的左下方开始,依次去读取每一个数字,然后根据数字设置网格的内容就可以将一个关卡展现出来了。


可以看出来这实现起来其实并不复杂,真正复杂的地方在于如何去进行关卡设计,并把设计好的关卡变成这个长度为 100 的字符串,总不至于手动的去一个一个的设置数字吧!


为此,我专门制作了一个关卡编辑器,来处理这个繁琐的事情。



在编辑完关卡后,将所有的数据导出到一个csv文件中。



微信小游戏制作工具支持导入csv文件,所以很容易就能够将关卡的数据导入到游戏制作工具中,这里我使用了列表来存储游戏的关卡数据。



最后,看一下关卡模式下的效果。

进入游戏后,读取对应关卡的数据,然后根据数据显示当前关卡的障碍块。


手动的关卡设计,让我可以制作很多有意思的造型,例如这样的:


在制作完关卡模式后,也让我有了进一步的想法:能否将关卡编辑器做到游戏里呢?这样玩家就可以自己DIY关卡了,甚至可以利用微信的社交属性,将自己设计的关卡分享给朋友玩。


这将是这个小游戏下一步的方向。我会继续进行探索,并与大家分享。


欢迎大家点击下方小游戏卡片,前去尝试精致1010中的闯关模式,有任何的想法或者建议欢迎留言交流。

精致1010

一个会不停成长的小游戏


如果你对游戏开发感兴趣,欢迎关注我的公众号,如果你有对游戏开发感兴趣的朋友,也欢迎把这个系列文章推荐给他。

相关文章
ly~
|
4天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
31 6
|
3天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
17天前
|
存储 移动开发 监控
微信支付开发避坑指南
【9月更文挑战第11天】在进行微信支付开发时,需遵循官方文档,确保权限和参数配置正确。开发中应注重安全,验证用户输入,合理安排接口调用顺序,并处理异常。上线后需实时监控支付状态,定期检查配置,关注安全更新,确保系统稳定运行。
|
24天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
56 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
本文介绍如何在Taro项目中使用Nut UI的`<nut-uploader/>`组件实现图片上传功能,并通过示例代码展示了自定义上传逻辑的方法。
Taro@3.x+Vue@3.x+TS开发微信小程序,上传文件
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
本文介绍如何在Taro项目中配置深色模式。通过在`src/app.config.ts`设置`darkmode`选项和在`theme.json`中定义主题变量,可以实现跟随系统主题的界面风格切换。
Taro@3.x+Vue@3.x+TS开发微信小程序,根据系统主题展示不同样式(darkMode)
|
2月前
|
小程序 开发者
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar
本文介绍了如何在Taro项目中实现自定义tabBar。首先,在`app.config.ts`中设置`custom: true`并配置`tabBar`。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用自定义tabBar

热门文章

最新文章

下一篇
无影云桌面