原文网址:https://www.youyong.top/article/11599efbf65a7
鉴于最近Cocos Creator v1.6正式版刚上线不久,社区这段时间涌入许多新增的开发者,加之最近棋牌游戏搞得风生水起,C姐特地挖坟,试图寻找一篇能同时满足「从新手向角度用Cocos Creator手把手写的棋牌类游戏」。特别感谢简书ID:樊开囧友情提供,如果大佬们有指正建议,欢迎补充。
原文网址:https://www.youyong.top/article/11599efbf65a7
鉴于最近Cocos Creator v1.6正式版刚上线不久,社区这段时间涌入许多新增的开发者,加之最近棋牌游戏搞得风生水起,C姐特地挖坟,试图寻找一篇能同时满足「从新手向角度用Cocos Creator手把手写的棋牌类游戏」。特别感谢简书ID:樊开囧友情提供,如果大佬们有指正建议,欢迎补充。
原文网址:https://www.youyong.top/article/11599efbf65a7
新手学习Cocos Creator将近一个月,对于用Creator做游戏的客户端还是颇有心得。毕竟,简单易上手是Creator最大的特点。最近尝试写了扑克的其中一种玩法,斗牛。具体原型的话是参考AppStore游戏榜上排名靠前的游戏:“阿拉斗牛”。
哈哈,没有广告嫌疑哦。不多说了,直接上我自己琢磨出来的攻略。如果你也是才刚刚接触的Cocos Creator,希望你先把基础的技能如切换场景、碰撞游戏等学扎实,再来看这篇。此处我会省略一些过于简单的操作。
首先从网上搞到扑克的相关资源,接着使用Cocos Creator创建一个登陆页面,新建一个scene命名为login,拖一张背景图,新增一个按钮,命名为btnLogin:
登录界面
然后设置这个btnLogin:
btnLogin
接着新建一个JavaScript脚本文件,命名为login,填入代码:
login
接着将这个脚本文件与登录界面的Canvas(画布)绑定:
login.Canvas
登陆界面做好了。接下来,新建一个scene命名为main,也是和上面的操作一样拖一个背景图和新建一个按钮:
main
更改这个按钮属性,然后新建JavaScript脚本文件,命名为main,添上:
main
然后与main的Canvas绑定,和登陆界面的操作过程完全一样。
接下来就是在新建一个scene,命名为prepare,先仿照这阿拉斗牛这款游戏的游戏界面布置一下UI。首先还是拖一张背景图,然后新建一个按钮命名为btnGobackMain,再新建一个按钮命名为btnPrepare:
btnGobackMain和btnPrepare
然后新建两个node,用来存放我方玩家和敌方玩家,分别命名为nodePlayerInfo,nodeOtherPlayerInfo。每个node下都放一张头像图,一张文字为准备的图,和一个命名为layoutCards的用来存放和显示扑克牌的layout,其中给敌方头像图添加一个button的组件(添加组件-添加UI组件-button):
两个node
目录
再创建一组倍数按钮,和有无牛按钮,就完成UI的搭建了:
完成UI搭建
隐藏部分游戏一开始不希望看到的UI,完成如下:
隐藏部分UI
新建一个脚本文件,命名为prepare,将这个脚本文件添加到prepare场景的Canvas中去。然后介绍下斗牛的玩法:双方玩家都确认后,玩家先各自得到4张牌,根据四张牌的分值,决定比拼的倍数,然后各自得到第五张牌,计算分数,谁的牛大谁就赢。
斗牛规则是:选三张牌的分值相加为10的倍数,满足这个前提的情况下计算剩下两张牌的分值,相加除以10得到的余数就是牛,如余数为1就是牛1,2就是牛2,余数为0则是分数最大的情况,为牛10(也称牛牛),谁的余数大谁就赢。如果不满足三张牌的那个前提,那就是没牛,算0分,小于任何一个牛。两个都没牛或者一样大则算平局。
根据这个思路,我们先配置一下扑克牌的数据,新建一个脚本文件,命名为CardInfo:
CardInfo
上述代码中,cardPoint表示五张牌拿到手后比牛的分值,10以上的都算10分,cardType 和cardValue则是类型和逻辑值,是为了等会代码获取对应的扑克牌的图片而设置的。最后别忘了以下代码,公开上面的配置代码让其他文件可以调用:
CardInfo
回到prepare脚本文件,在最开始导入刚刚的配置:var CardInfo = require("CardInfo")
接着:游戏一开始需要让双方都准备,我方直接点准备就可以了,理论上来讲,另一方需要等服务端发准备的消息才能准备,但是我这个只是练手的客户端小游戏,就设置为:我方点击了准备按钮后,再点击一次敌方的头像后,敌方也显示准备就好了。
在onload函数中写上:
this.node.getChildByName("btnPrepare").on('click',this.prepare, this);
cc.find("Canvas/nodeOtherPlayerInfo/spHeadBg").on('click',this.otherPrepare, this);
这两行代码是找到准备按钮和敌方头像,并分别给它们加了个点击事件,恩,接下来看下点击事件:
prepare
otherPrepare
不多说,其中,cc.director.getScheduler().schedule(self.startGame, self, 1, 0, 0,);是一个定时器,指我方点了准备,然后敌方点了准备之后,过了1秒后执行startGame函数。
但是,这么快就想startGame了?牌都没有怎么start?所以,我们先创建牌:
斗牛中需要的扑克牌总牌组
然后再onload中写下:
初始化手牌数组
顺便再加上
this.myResultArr = [];
this.otherResultArr = [];
用来保存牛的判断结果。
接着随机分发牌:
随机发牌
取个随机数随机发牌,共取10张,数组下标为0,2,4,6,8的牌为我方手牌,为1,3,5,7,9的牌为敌方手牌,每取一张,在总牌组中的删除该张牌。接着在onload中写上this.createMyCardsAndOtherCards();调用这个函数。
好了,手牌数组中有值了,那么如何把它显示在界面上呢?
创建手牌
通用函数
有注释,应该不难看懂,先把牌名转化为对应的图片名,然后再通过Creator的动态加载图集资源的方法加载。因为敌方手牌不允许被我方看到,所以显示背面图片。
接着就可以写startGame函数了:
startGame
刚刚说了规则,先发四张牌,所以要减1,接着显示倍数按钮和有无牛按钮:
显示倍数按钮和有无牛按钮
倍数按钮的点击事件
点击了任意一个倍数按钮后,拿到第五张牌,并判断输赢的逻辑保存在图中两个数组中。接着来看一下上图调用的两个函数的内容:
先将两个手牌数组转为两个显示分值的数组。然后随机取两个分值,选出在满足剩下三个分值之和是10的倍数的条件下,这两个分值相加除以10得到的余数最大的一组组合。返回一个结果数组:分值,选出的第一个分值在数组中的位置,选出的第二个分值在数组中的位置。无牛则返回【0,0,0】。最后在onload加上:
cc.find("Canvas/nodeGameBtns/btnHaveCow").on('click',this.isHaveCow, this)
cc.find("Canvas/nodeGameBtns/btnHaveNone").on('click',this.isHaveCow, this)
然后补上这个isHaveCow的函数:
结果出来了,总需要知道敌方的手牌吧?所以:
创建敌方明面手牌
到此,斗牛游戏已经完成了,接下来玩一把呗:
好了,一款简陋的斗牛游戏算是完成了。什么?你要代码?因为资源有专利,不能发布这篇文章所介绍的项目,很抱歉。如果你真的需要看一些游戏项目的话,可以上Cocos 插件商店,这里有许多大神写的一些游戏项目源码供参考。
对了,这个项目有个bug,就是手牌的顺序没有按照对应的数组顺序来。因为Creator动态加载资源是个异步的过程,哪张图先加载完就先放哪张,这个问题我之后会带来合理的解决方案。
最近Cocos Creator v1.6刚发布不久,这个版本解决了之前手游开发的许多重难点问题。即便是新手,到官网down个版本,依据教程操作,也能手把手开发出一款简易版的斗牛游戏,真正是实现了Cocos的宗旨「让游戏开发更简单」,人人都可以成为开发者的愿景。
共 0 条留言
教程:Cocos Creator如何给资源打上MD5版本号?
教程|如何在Cocos Creator v1.5中集成 Pomelo?
看 Nantas手把手为你详解 v1.5资源导入导出工作流程
教程|如何在Cocos Creator 中完美使用 protobuf.js
Cocos Creator 开源游戏集合贴 (源码 视频 在线统统有)
iPhone X 跌破发行价,苏宁200亿入股恒大 | 财经日日评
资深黄牛现身说法:iPhone X价格秒变不停,就像炒股一样
低内存占用、无广告、功能强大又唯美的本地播放器 - Potplayer
从零开始手把手带你全面认识 网易的游戏服务端框架 Pomelo
Cocos Creator v1.6支持Camera剔除功能!
手机扫一扫
分享文章