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,希望能够给大家一些帮助。

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


欢迎大家加入技术交流群:221725135

本篇文档的资源在群里免费下载,所以如果你不想花费C币,请加群下载,不要夸我,(#^.^#)

猜你喜欢

转载自blog.csdn.net/qq_16224121/article/details/79413699
今日推荐