cocos creator 斗牛游戏

学了cocos creator也将近一月了，对于用creator来做一个游戏的客户端还是有了点心得体会。最近尝试写了一下扑克的其中一种玩法，斗牛。具体原型的话是参考AppStore游戏榜上排名靠前的游戏：“阿拉斗牛”。哈哈，不知这个算不算广告。不多说了，直接上我自己琢磨出来的攻略。如果你也是才刚刚接触的cocos creator，希望你先看看这两篇我不久前写的文章，“cocos creator 切换场景”，“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，接着显示倍数按钮和有无牛按钮：

显示倍数按钮和有无牛按钮 倍数按钮的点击事件

点击了任意一个倍数按钮后，拿到第五张牌，并判断输赢的逻辑保存在图中两个数组中。接着来看一下上图调用的两个函数的内容：

1 2

先将两个手牌数组转为两个显示分值的数组。然后随机取两个分值，选出在满足剩下三个分值之和是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的函数：

1 2

结果出来了，总需要知道敌方的手牌吧？所以：

创建敌方明面手牌

到此，斗牛游戏已经完成了，接下来来玩一把呗：

1 2 3

好了，一款简陋的斗牛游戏算是完成了。什么？你要代码？因为资源有专利，不能发布这篇文章所介绍的项目，很抱歉。如果你真的需要看一些游戏项目的话，请点击这儿和点击那儿。这里有许多大神写的一些游戏项目供参考。

对了，顺便再说一下这个项目的一个比较有影响的bug，就是手牌的顺序没有按照对应的数组的顺序来，因为creator动态加载资源是个异步的过程，哪张图先加载完就先放哪张，这个问题我会在下一篇带来解决方案。

如有错误，欢迎指正。如有补充，欢迎告知。

2017-08-04