學(xué)了cocos creator也將近一月了，對于用creator來做一個游戲的客戶端還是有了點(diǎn)心得體會。最近嘗試寫了一下?lián)淇说钠渲幸环N玩法，斗牛。具體原型的話是參考AppStore游戲榜上排名靠前的游戲：“阿拉斗牛”。哈哈，不知這個算不算廣告。不多說了，直接上我自己琢磨出來的攻略。如果你也是才剛剛接觸的cocos creator，希望你先看看這兩篇我不久前寫的文章，“cocos creator 切換場景”，“cocos creator 碰撞游戲”，再來看這篇，因?yàn)槲以谶@里會省略一些過于簡單的操作。
首先從網(wǎng)上搞到撲克的相關(guān)資源，接著使用cocos creator創(chuàng)建一個登陸頁面，新建一個scene命名為login，拖一張背景圖，新增一個按鈕，命名為btnLogin：
然后設(shè)置這個btnLogin：
接著新建一個javaScript腳本文件，命名為login，填入代碼：
接著將這個腳本文件與登錄界面的Canvas(畫布)綁定：
登陸界面做好了。接下來，新建一個scene命名為main，也是和上面的操作一樣拖一個背景圖和新建一個按鈕：
更改這個按鈕屬性，然后新建javaScript腳本文件，命名為main，添上：
然后與main的Canvas綁定，和登陸界面的操作過程完全一樣。
接下來就是在新建一個scene，命名為prepare，先仿照這阿拉斗牛這款游戲的游戲界面布置一下UI。首先還是托一張背景圖，然后新建一個按鈕命名為btnGobackMain，在新建一個按鈕命名為btnPrepare：
然后新建兩個node，用來存放我方玩家和敵方玩家，分別命名為nodePlayerInfo，nodeOtherPlayerInfo。每個node下都放一張頭像圖，一張文字為準(zhǔn)備的圖，和一個命名為layoutCards的用來存放和顯示撲克牌的layout，其中給敵方頭像圖添加一個button的組件（添加組件-添加UI組件-button）：
再創(chuàng)建一組倍數(shù)按鈕，和有無牛按鈕，就完成UI的搭建了：
隱藏部分游戲一開始不希望看到的UI，完成如下：
新建一個腳本文件，命名為prepare，將這個腳本文件添加到prepare場景的Canvas中去。然后介紹下斗牛的玩法：雙方玩家都確認(rèn)后，玩家先各自得到4張牌，看一下四張牌的分值，決定比拼的倍數(shù)，然后各自得到第五張牌，計(jì)算分?jǐn)?shù)，誰的牛大誰就贏。斗牛規(guī)則是：選三張牌的分值相加為10的倍數(shù)，滿足這個前提的情況下計(jì)算剩下兩張牌的分值，相加除以10得到的余數(shù)就是牛，如余數(shù)為1就是牛1，2就是牛2，余數(shù)為0則是分?jǐn)?shù)最大的情況，為牛10（也稱牛牛），誰的余數(shù)大誰就贏。如果不滿足三張牌的那個前提，那就是沒牛，算0分，小于任何一個牛。兩個都沒牛或者一樣大則算平局
根據(jù)這個思路，我們先配置一下?lián)淇伺频臄?shù)據(jù)，新建一個腳本文件，命名為CardInfo:
上述代碼中，cardPoint表示五張牌拿到手后比牛的分值，10以上的都算10分，cardType 和cardValue則是類型和邏輯值，是為了等會代碼獲取對應(yīng)的撲克牌的圖片而設(shè)置的。最后別忘了以下代碼，公開上面的配置代碼讓其他文件可以調(diào)用：
回到prepare腳本文件，在最開始導(dǎo)入剛剛的配置：var CardInfo = require("CardInfo")
接著：游戲一開始需要讓雙方都準(zhǔn)備，我方直接點(diǎn)準(zhǔn)備就可以了，理論上來講，另一方需要等服務(wù)端發(fā)準(zhǔn)備的消息才能準(zhǔn)備，但是我這個只是練手的客戶端小游戲，就設(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)備按鈕和敵方頭像，并分別給它們加了個點(diǎn)擊事件，恩，接下來看下點(diǎn)擊事件：
不多說，其中，cc.director.getScheduler().schedule(self.startGame, self, 1, 0, 0,);是一個定時(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ā)牌：
取個隨機(jī)數(shù)隨機(jī)發(fā)牌，共取10張，數(shù)組下標(biāo)為0，2，4，6，8的牌為我方手牌，為1，3，5，7，9的牌為敵方手牌，每取一張，在總牌組中的刪除該張牌。接著在onload中寫上this.createMyCardsAndOtherCards();調(diào)用這個函數(shù)。
好了，手牌數(shù)組中有值了，那么如何把它顯示在界面上呢？
有注釋，應(yīng)該不難看懂，先把牌名轉(zhuǎn)化為對應(yīng)的圖片名，然后再通過creator的動態(tài)加載圖集資源的方法加載。因?yàn)閿撤绞峙撇辉试S被我方看到，所以顯示背面圖片。
接著就可以寫startGame函數(shù)了：
剛剛說了規(guī)則，先發(fā)四張牌，所以要減1，接著顯示倍數(shù)按鈕和有無牛按鈕：
點(diǎn)擊了任意一個倍數(shù)按鈕后，拿到第五張牌，并判斷輸贏的邏輯保存在圖中兩個數(shù)組中。接著來看一下上圖調(diào)用的兩個函數(shù)的內(nèi)容：
先將兩個手牌數(shù)組轉(zhuǎn)為兩個顯示分值的數(shù)組。然后隨機(jī)取兩個分值，選出在滿足剩下三個分值之和是10的倍數(shù)的條件下，這兩個分值相加除以10得到的余數(shù)最大的一組組合。返回一個結(jié)果數(shù)組：分值，選出的第一個分值在數(shù)組中的位置，選出的第二個分值在數(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ǔ)上這個isHaveCow的函數(shù)：
結(jié)果出來了，總需要知道敵方的手牌吧？所以：
到此，斗牛游戲已經(jīng)完成了，接下來來玩一把唄：
好了，一款簡陋的斗牛游戲算是完成了。什么？你要代碼？因?yàn)橘Y源有專利，不能發(fā)布這篇文章所介紹的項(xiàng)目，很抱歉。如果你真的需要看一些游戲項(xiàng)目的話，請點(diǎn)擊這兒和點(diǎn)擊那兒。這里有許多大神寫的一些游戲項(xiàng)目供參考。
對了，順便再說一下這個項(xiàng)目的一個比較有影響的bug，就是手牌的順序沒有按照對應(yīng)的數(shù)組的順序來，因?yàn)閏reator動態(tài)加載資源是個異步的過程，哪張圖先加載完就先放哪張，這個問題我會在下一篇帶來解決方案。
如有錯誤，歡迎指正。如有補(bǔ)充，歡迎告知。
2017-08-04
