CocosCreator制作小游戏之单机斗地主

首先，我承认我是个标题党，当你被骗进来的时候，就决定你要失望了，因为这个所谓的单机斗地主，并不是真正意义的斗地主，不存在牌型逻辑，只是为了能够学习cocoscreator而做的demo。所以，哎，别动手啊。

如果你是小白，可能可以在这篇文章中学到一点，希望能够给你们一点帮助。

 

好，进入正题。

 

在接触cocoscreator的时候，最快获得知识点的方式，就是去读官方文档，当然，文档那么长，不可能所有都一点点读，要是闲的蛋疼，就当我没说。所以推荐各位能够先读读官方文档，大致了解下。

本篇文档的知识点，都在这里： http://docs.cocos.com/creator/manual/zh/scripting/

 

字数凑的差不多了，好，大家解散，各回各家，各找各妈。

 

别打脸啊！我好好说。

 

首先，创建工程。

 

比较推荐使用hello world工程，这里面就会创建一些文件夹，省的麻烦。写上自己的项目名称，点击新建项目。

 

进来之后，就会看到资源管理器下面的文件结构，后面场景、脚本、图片，都会被加入这些文件下。

 

接下来，就要先创建游戏使用的场景了。

 

右击--> 新建 --> scene，命名为GameScene

 

打开GameScene场景，会看到在层级管理器下，有一个canvas。

这个是一个容器，我们后面的操作都会在这里面。

 

既然是游戏，那就会有个背景，将背景图片导入Texture文件夹，可以直接拖进去。

将背景图片直接拖入Canvas，并调整大小，使之充满Canvas。

在调整大小的时候，会出现拉伸的情况，所以下面我们需要将此图片设置为九宫格模式，并进行编辑，详情请查阅官方文档： http://docs.cocos.com/creator/manual/zh/components/sprite.html，这里就不在赘述。

 

接下来，我们需要制作纸牌的预制，及Prefab。

 

将控件库中的Canvas拖拽到场景中，并命名为poker。和添加牌桌背景方式一样，给poker添加背景，并添加label和sprite控件（添加图片文件），分别命名为pokerTxt，pokerType。

 

制作出的效果如下图：

 

将poker直接拖拽到Texture文件下，生成预制。

 

 

至此，纸牌制作完成，这时，可以删除场景中的poker控件了。

 

接下来，针对纸牌进行代码控制。

新建脚本，命名为PokerControl。

在写脚本之前，希望大家能够去阅读下生命周期回调这部分的内容，有利于帮助理解。

 

第一步，需要在脚本的properties中添加声明

 

回到creator中，将脚本挂载到poker的预制上，并将pokerTxt和pokerType拖到对应的控件中去。

 

 

第二步，需要将poker牌能够动态的展示。

这时，需要对展示的数据进行封装，这里面需要有展示的牌号和花色，字段为showTxt，showType。

这里创建脚本PokerData，用于对数据进行封装。

因为PokerData属于普通js模块，所以不需要那些cc.class的那些内容，详情请参考官方文档： http://docs.cocos.com/creator/manual/zh/scripting/modular-script.html

 

牌型思路整理：首先将所有牌都创建出来，然后将它的牌随机分成三份，其中一份20张，当做地主牌。对于每手牌进行降序排列。思路就是这样，下面就是写代码了。

 

代码还是希望大家自己写写，加深印象，文章最后会把代码共享出去。

 

这里面用到的config也是定义出的脚本，用于全局变量。

 

创建方法和PokerData是一样的。

这里做下提醒，这句代码 module.exports = xxx;一定要有。

接下来就是要将所有的牌随即分成三份，

 

 

牌型的升序降序排列

最后将这部分内容提供方法封装调用。

 

至此，数据封装完成，接下来就是去展示它。

 

回到PokerControl脚本中，定义展示纸牌方法showPoker。

 

这里面的canTouch参数可以暂时不用理会，这是后面在做触摸事件的时候用到的控制字段。

但是这里需要注意一点，在动态加载的图片资源是需要放置在resources文件夹下的。

 

这样，我们就可以通过调用showPoker方法将纸牌绘制出来。

 

接下来，创建GameTable脚本，并将脚本挂载到GameScene场景下的Canvas上。

在脚本中定义预制，并将poker预制挂载上去：

在onLoad中初始化纸牌数据：

在start函数中，获得数据，并将数据赋值给poker进行绘制。

cc.instantiate是进行copy，请参考官方文档： http://docs.cocos.com/creator/manual/zh/scripting/create-destroy.html

在config中定义每个位置的展示参数：

定义neatenPoker对纸牌进行整理

 

这时候可以运行一下，可以看到底部已经有了一层牌。

将其他两组牌也展示出来。

最终运行效果应该如下图：

 

看到了出牌按钮了吧，接下来，我们就需要在场景中添加两个按钮，其实你可以添加一个，因为不出按钮我根本就没写逻辑，哇咔咔，是不是很像个机器人。

 

在GameTable的properties中添加两个按钮的定义：

在start中写按钮的点击触发事件回调：

出牌就是将牌飞到指定的位置：

那么根据这部分的逻辑，可能你们就会看的比较懵，因为有些字段的定义我并没有解释，那么现在回到Pokercontrol脚本中，继续去实现对于纸牌的控制。

 

一般来说，我们通过触摸选中纸牌，被选中的纸牌会高出一部分作为标记。

 

在PokerControl中对于纸牌进行触摸监听。

在PokerControl的properties中添加canTouch（是否可以触摸），isTouched（是否选中），两个属性，默认值为false。

因为别人的牌，你是不能触摸的，所以canTouch是为了控制纸牌是否进行操作处理，当然，你对于某些牌直接进行不响应触摸也是可以的，很多种方式的。

当纸牌被触摸了，就会标记为被选中，再次触摸，就被标记未选中。

 

最后别忘记在onLoad（）方法中调用下：

 

 

至此，整个项目算是基本完成，剩下的就是牌型检测了，这部分就是纯逻辑的东东，就不再继续写了，毕竟这个demo是为了熟悉cocoscreator的操作。

 

略微说一下，其实出牌按钮这边的处理是有些不同的，因为当时我看别人的文档，是给button挂载个脚本，然后每个响应事件进行方法回调的，但是我觉得这样太麻烦了，可能我还没有完全领略cocoscreator的意图吧。

另外，程序里还是存在一些不足的，比如牌的展示我是写了三个循环，其实可以考虑下嵌套循环直接搞定，被打出的牌应该不可以触摸了（在我写文档的时候才想起来，但是我也不优化了，你能咋滴^v^）。

 

总之，这只是一个小demo，希望能够给大家一些帮助。

 

文档写的有点乱，希望大家多多包涵。

 

资源链接： http://download.csdn.net/download/qq_16224121/10265016