學(xué)了cocos creator也將近一月了奕翔，對(duì)于用creator來做一個(gè)游戲的客戶端還是有了點(diǎn)心得體會(huì)浩蓉。最近嘗試寫了一下?lián)淇说钠渲幸环N玩法，斗牛捻艳。具體原型的話是參考AppStore游戲榜上排名靠前的游戲：“阿拉斗牛”讯泣。哈哈阅悍，不知這個(gè)算不算廣告昨稼。不多說了假栓，直接上我自己琢磨出來的攻略霍掺。如果你也是才剛剛接觸的cocos creator，希望你先看看這兩篇我不久前寫的文章牙丽，“cocos creator 切換場(chǎng)景”兔魂，“cocos creator 碰撞游戲”，再來看這篇构罗，因?yàn)槲以谶@里會(huì)省略一些過于簡單的操作智玻。
首先從網(wǎng)上搞到撲克的相關(guān)資源，接著使用cocos creator創(chuàng)建一個(gè)登陸頁面盖彭，新建一個(gè)scene命名為login，拖一張背景圖谬泌，新增一個(gè)按鈕逻谦，命名為btnLogin：
然后設(shè)置這個(gè)btnLogin：
接著新建一個(gè)javaScript腳本文件邦马，命名為login，填入代碼：
接著將這個(gè)腳本文件與登錄界面的Canvas(畫布)綁定：
登陸界面做好了邻悬。接下來父丰，新建一個(gè)scene命名為main，也是和上面的操作一樣拖一個(gè)背景圖和新建一個(gè)按鈕：
更改這個(gè)按鈕屬性攘烛，然后新建javaScript腳本文件镀首，命名為main，添上：
然后與main的Canvas綁定芋齿，和登陸界面的操作過程完全一樣成翩。
接下來就是在新建一個(gè)scene，命名為prepare惠拭，先仿照這阿拉斗牛這款游戲的游戲界面布置一下UI庸论。首先還是托一張背景圖，然后新建一個(gè)按鈕命名為btnGobackMain域携，在新建一個(gè)按鈕命名為btnPrepare：
然后新建兩個(gè)node鱼喉，用來存放我方玩家和敵方玩家，分別命名為nodePlayerInfo锋边，nodeOtherPlayerInfo编曼。每個(gè)node下都放一張頭像圖，一張文字為準(zhǔn)備的圖掐场，和一個(gè)命名為layoutCards的用來存放和顯示撲克牌的layout，其中給敵方頭像圖添加一個(gè)button的組件（添加組件-添加UI組件-button）：
再創(chuàng)建一組倍數(shù)按鈕萍膛，和有無牛按鈕蝗罗，就完成UI的搭建了：
隱藏部分游戲一開始不希望看到的UI，完成如下：
新建一個(gè)腳本文件沼琉，命名為prepare拟赊，將這個(gè)腳本文件添加到prepare場(chǎng)景的Canvas中去粹淋。然后介紹下斗牛的玩法：雙方玩家都確認(rèn)后，玩家先各自得到4張牌屋匕，看一下四張牌的分值借杰，決定比拼的倍數(shù)，然后各自得到第五張牌纤虽，計(jì)算分?jǐn)?shù)，誰的牛大誰就贏逼纸。斗牛規(guī)則是：選三張牌的分值相加為10的倍數(shù)济蝉，滿足這個(gè)前提的情況下計(jì)算剩下兩張牌的分值，相加除以10得到的余數(shù)就是牛贺嫂，如余數(shù)為1就是牛1雁乡，2就是牛2，余數(shù)為0則是分?jǐn)?shù)最大的情況踱稍，為牛10（也稱牛牛），誰的余數(shù)大誰就贏渔工。如果不滿足三張牌的那個(gè)前提桥温，那就是沒牛，算0分旺韭，小于任何一個(gè)牛。兩個(gè)都沒徘耍或者一樣大則算平局
根據(jù)這個(gè)思路，我們先配置一下?lián)淇伺频臄?shù)據(jù)杨何，新建一個(gè)腳本文件沥邻，命名為CardInfo:
上述代碼中，cardPoint表示五張牌拿到手后比牛的分值埃跷，10以上的都算10分邮利，cardType 和cardValue則是類型和邏輯值，是為了等會(huì)代碼獲取對(duì)應(yīng)的撲克牌的圖片而設(shè)置的剪勿。最后別忘了以下代碼祷愉，公開上面的配置代碼讓其他文件可以調(diào)用：
回到prepare腳本文件侈离，在最開始導(dǎo)入剛剛的配置：var CardInfo = require("CardInfo")
接著：游戲一開始需要讓雙方都準(zhǔn)備，我方直接點(diǎn)準(zhǔn)備就可以了鸽嫂，理論上來講髓窜，另一方需要等服務(wù)端發(fā)準(zhǔn)備的消息才能準(zhǔn)備寄纵，但是我這個(gè)只是練手的客戶端小游戲脖苏，就設(shè)置為：我方點(diǎn)擊了準(zhǔn)備按鈕后，再點(diǎn)擊一次敵方的頭像后棍潘，敵方也顯示準(zhǔn)備就好了崖媚。
在onload函數(shù)中寫上：
this.node.getChildByName("btnPrepare").on('click',this.prepare, this);
cc.find("Canvas/nodeOtherPlayerInfo/spHeadBg").on('click',this.otherPrepare, this);
這兩行代碼是找到準(zhǔn)備按鈕和敵方頭像畅哑，并分別給它們加了個(gè)點(diǎn)擊事件水由，恩，接下來看下點(diǎn)擊事件：
不多說泥张，其中鞭盟，cc.director.getScheduler().schedule(self.startGame, self, 1, 0, 0,);是一個(gè)定時(shí)器瑰剃，指我方點(diǎn)了準(zhǔn)備，然后敵方點(diǎn)了準(zhǔn)備之后晌姚，過了1秒后執(zhí)行startGame函數(shù)。
但是抵恋，這么快就想startGame了宝磨？牌都沒有怎么start？所以唤锉，我們先創(chuàng)建牌:
然后再onload中寫下：
順便再加上
this.myResultArr = [];
this.otherResultArr = [];
用來保存牛的判斷結(jié)果窿祥。
接著隨機(jī)分發(fā)牌：
取個(gè)隨機(jī)數(shù)隨機(jī)發(fā)牌，共取10張嗤瞎，數(shù)組下標(biāo)為0听系，2，4掉瞳，6届惋，8的牌為我方手牌脑豹，為1衡查，3，5拌牲，7，9的牌為敵方手牌拍埠，每取一張土居，在總牌組中的刪除該張牌。接著在onload中寫上this.createMyCardsAndOtherCards();調(diào)用這個(gè)函數(shù)擦耀。
好了，手牌數(shù)組中有值了分瘾，那么如何把它顯示在界面上呢？
有注釋德召，應(yīng)該不難看懂汽纤，先把牌名轉(zhuǎn)化為對(duì)應(yīng)的圖片名，然后再通過creator的動(dòng)態(tài)加載圖集資源的方法加載冒版。因?yàn)閿撤绞峙撇辉试S被我方看到，所以顯示背面圖片捆等。
接著就可以寫startGame函數(shù)了：
剛剛說了規(guī)則续室，先發(fā)四張牌，所以要減1明郭，接著顯示倍數(shù)按鈕和有無牛按鈕：
點(diǎn)擊了任意一個(gè)倍數(shù)按鈕后，拿到第五張牌薯定，并判斷輸贏的邏輯保存在圖中兩個(gè)數(shù)組中。接著來看一下上圖調(diào)用的兩個(gè)函數(shù)的內(nèi)容：
先將兩個(gè)手牌數(shù)組轉(zhuǎn)為兩個(gè)顯示分值的數(shù)組亏推。然后隨機(jī)取兩個(gè)分值年堆，選出在滿足剩下三個(gè)分值之和是10的倍數(shù)的條件下，這兩個(gè)分值相加除以10得到的余數(shù)最大的一組組合芽狗。返回一個(gè)結(jié)果數(shù)組：分值痒蓬，選出的第一個(gè)分值在數(shù)組中的位置，選出的第二個(gè)分值在數(shù)組中的位置谊却。無牛則返回【0哑芹，0，0】聪姿。最后在onload加上：
cc.find("Canvas/nodeGameBtns/btnHaveCow").on('click',this.isHaveCow, this)
cc.find("Canvas/nodeGameBtns/btnHaveNone").on('click',this.isHaveCow, this)
然后補(bǔ)上這個(gè)isHaveCow的函數(shù)：
結(jié)果出來了末购，總需要知道敵方的手牌吧？所以：
到此曹质，斗牛游戲已經(jīng)完成了擎场，接下來來玩一把唄：
好了，一款簡陋的斗牛游戲算是完成了宅静。什么站欺？你要代碼纤垂？因?yàn)橘Y源有專利磷账，不能發(fā)布這篇文章所介紹的項(xiàng)目，很抱歉逃糟。如果你真的需要看一些游戲項(xiàng)目的話，請(qǐng)點(diǎn)擊這兒和點(diǎn)擊那兒蛉抓。這里有許多大神寫的一些游戲項(xiàng)目供參考剃诅。
對(duì)了，順便再說一下這個(gè)項(xiàng)目的一個(gè)比較有影響的bug矛辕，就是手牌的順序沒有按照對(duì)應(yīng)的數(shù)組的順序來，因?yàn)閏reator動(dòng)態(tài)加載資源是個(gè)異步的過程聊品，哪張圖先加載完就先放哪張，這個(gè)問題我會(huì)在下一篇帶來解決方案陈哑。
如有錯(cuò)誤伸眶，歡迎指正。如有補(bǔ)充厘贼，歡迎告知。
2017-08-04
