cocos creator 麻将游戏

我想试试麻将类做个麻将类的游戏。不多说，想到就开干。首先从别的例子中拷贝一套麻将资源，麻将的话一般是四个人玩，所以资源中有四个方向上的全套麻将图。然后新建scene命名为game，搭建界面吧，完成结果如下：

game

看了上图是不是觉得我就放了张背景图和一个goNext文本？你错啦：

层级目录

我在这里建四个node，分别命名为my，right，up，left，然后再每个node上两个layout，一个sprite，分别命名为inHand(指手中的麻将)，inOutSide(打出的麻将)，newMajiang(摸取的麻将)。然后对每个inHand，inOutSide和newMajiang做出如下设置，其中right，up，left中的newMajiang不需要添加button组件，因为在正式游戏中你没法操作别人的麻将：

inOutSide inHand newMajiang

然后再弄一个按钮，去掉按钮的图，文本改为goNext，命名为btnGoNext。

当所有的都做好了之后，就来配置一下麻将牌的信息，去掉其他，只保留万，条，筒，风，箭，新建脚本文件命名为MajiangInfo：

我方麻将在资源文件中对应的图片名，其他三方在这里省略，可以去看源码 麻将牌的tag，用来排序 对外公开的接口

好了，麻将的信息配置好了，再新建脚本文件，命名为game，关联game场景的Canvas。

接着在game脚本文件中添加：

game

这里指的是四个方向的图集文件，和一个麻将的预制资源，关联：

game

预制资源的制做步骤：新建一个sprite，随便从资源里拖个麻将图，然后将这个sprite从层级管理器拖到资源管理器中的对应文件夹下，然后再删除在层级管理器中的这个sprite，就OK了。

顺便一提：因为所有的图都已经被拖到游戏场景game里了，所以在游戏场景game里要使用麻将的图片，只需要代码中直接用就行，不需要异步加载。当初为了这个问题问了许多前辈，其中有一个前辈说：creator里基本上是用不到异步加载的。当时我不信，不异步加载怎么动态的更换图片？现在想想，他说的是对的，因为不管你需要什么图片，直接按上面的方法拖进去就可以了呀！

好了，回到脚本game，在onload中拿到刚刚创建的一些layout和newMajiang：

1

然后设置下初始的一些数组：

2

注释的很详细，应该没有看不懂的。然后生成麻将组：

生成麻将数组

再是初始麻将手牌的分发：

手牌分发

初始每个人有13张麻将手牌，所以我按照这样的随机发牌，并对分发到的手牌进行排序。排序函数为下图所示，使用前需要先在最上边加上var MajiangInfo = require("MajiangInfo")

麻将排序

排完序之后生成我的手牌：

生成我的手牌 addOneMajiang

加载麻将图，这里的str指的是麻将的图片名，layout的是要把这个麻将放在在哪个layout中，atlas是麻将图片在哪个图集里，prefab预制资源，tag是该麻将在对应的数组中是第几个。

接下来生成其他方的麻将：

生成别人的手牌

因为别人的手牌我方不能看到，所以都是背面的图。

在onload中添加：

生成手牌

好了，现在所有的手牌都生成了，那么接下来就处理我方麻将的点击出牌和轮换事件。

首先需要在一开始的位置定义好四个方向的轮换：

turn

然后在onload中写上：

当前我方出牌

那么，既然是我方先出牌，那么我是不是应该先摸一张牌？好了，newMajiang有用处了。定义一个getNewMajiang函数，并向从中添加：

我方摸牌

这段代码的意思是，发完13*4张麻将后，从麻将牌组中随机抽取一张，并在麻将牌组中删除该张牌。那么问题来了，摸牌又不是我方的权利，每一方轮到的时候都会摸一张牌，当麻将牌组里没牌了，而没人胡，那么这局算流局，所以，我们把getNewMajiang这个函数扩写成这样：

1 2

那样的话，四方的摸牌事件都统一写到了这里，并且还做了流局的判断。在onload中加上调用这个函数的代码：this.getNewMajiang();//当前轮到方获取新麻将

接着，给我方的新麻将添加一个点击事件：

clickNewMajiang

并在onload中调用这个函数，this.newMajiang.on('click', this.clickNewMajiang, this);

接下来，要给我方的手牌写点击事件:

clickMyMajiang

通过在addOneMajiang函数中给麻将定义的tag来判断当前点击了哪个麻将，并把它转成对应的图片，放到我的出牌区。同时，也需要重新设置我的手牌，重新排序，重新加载。最后，轮到我的右方抽取新麻将，隐藏我的newMajiang。

我方的出牌做好了，那么其它方呢？正常游戏的会根据服务端发送的消息来做处理，我这个小项目，就做个假象吧。还记得那个btnGoNext按钮吗？恩，没错，在onload中加上：

this.btnGoNext = this.node.getChildByName("btnGoNext");

this.btnGoNext.on('click', this.goNext, this);

然后：

1 2

让非我方的玩家从他的手牌+摸牌中随机出一张牌，并重新排序重新加载，这样就可以控制牌局的轮换了。

写到这里，可以运行一下:

1 2

给我方出牌后，他会自动切换到右方，然后你可以通过点击geNext控制它轮转。哈哈，是不是有点麻将的意思了呢？当然，写了那么多，仅仅完成了出牌和轮转，正式的麻将游戏里应该还有吃碰杠胡等一系列的操作，然而，我不会写。这部分的算法比较。。。我有什么办法，我也很绝望。如果以后我能写出这些操作的话，我会再来简书上把它补全。

正好，我刚刚学会了用Github Desktop上传项目到Github，点击这里就能下载项目了。如果你真的需要看一些游戏项目的话，请点击这儿和点击那儿。这里有许多大神写的一些游戏项目供参考。

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

2017-08-04