cocos2d js教學(xué)課件3cocos2d js 實例 碰碰糖1 文檔

1、Cocos2d-JS 實例教程 鮑健運 Cocos引擎技術(shù)布道師，開發(fā)者關(guān)系部 功能說明 功能說明 ? 消除類游戲 ? 點擊消除多個連續(xù)的糖果 ? 設(shè)定5種顏色的糖果 ? 同一顏色糖果（至少2個）連在一起時，點擊可以同時消 除 ? 糖果消失后，從正上方生成新的糖果下落補充 ? 簡單關(guān)卡設(shè)計：每一關(guān)限制玩家在指定步數(shù)內(nèi)獲得足夠多 的分?jǐn)?shù)，關(guān)卡越往后，難度越大 新建項目 新建項目 ? 通過Cocos，新建Cocos2d-JS項目，使用WebStorm打 開項目，游戲名稱自定 ? 游戲尺寸 720 X 1280 （背景圖） ? 糖果居中排列 10 X 10 ? 每個糖果尺寸 64 X 64 ? 圖片

2、名稱： ? 1.png, 2.png, 3.png, 4.png, 5.png（糖果） ? bg.png （游戲背景） 新建項目 ? 新建代碼： ? app.js 游戲核心 GameScene 類和 GameLayer 類，管理糖果的布局 和消除邏輯 ? Candy.js 繼承Sprite，專門用于加載一個糖果圖片 ? Constant.js 常量列表 ? GameUI.js 游戲的UI ? Storage.js 負(fù)責(zé)游戲的數(shù)據(jù)存儲和讀取 新建項目 ? resource.js 新建項目 ? main.js 新建項目 ? project.json 制作糖果 制作糖果 ? Candy.js 擴展

3、Sprite ? 把糖果的加載工作封裝起來 ? 每個糖果除了基本圖片外，還有3個屬性： 類型（顏色）、列號、行號 ? 即 function ( type, column, row ) 制作糖果 ? Candy.js 通過基類的初始化方式，創(chuàng)建糖果的Sprite 等價于new cc.Sprite (“res/” + (type+1) + “png”) 制作糖果 ? Candy.js ? 為什么需要 type+1 ？ ? 因為糖果的圖片是 1.png 5.png，而type的類型從0 4 ? 便捷的靜態(tài)方法： 制作糖果 ? Candy.js ? Candy.createRandomType 方法：

4、 ? 沒有var 靜態(tài)方法，即不需要new ? new Candy ( type, column, row) 由Candy的構(gòu)造函數(shù)ctor決定 ? Math.random() 生成隨機數(shù)方法，值（=0,1） ? Constant.CANDY_TYPE_COUNT 糖果的種類數(shù)量(5) ? parseInt 轉(zhuǎn)化為數(shù)字 ? 即第一個參數(shù)的含義：隨機取數(shù)字，值在04，并確保轉(zhuǎn) 化為數(shù)字類型 制作糖果 ? Constant.js 常量設(shè)定 游戲界面 游戲界面 ? 顯示當(dāng)前關(guān)卡、當(dāng)前分?jǐn)?shù)和剩余步數(shù) ? 隨著玩家的操作，這三個數(shù)字會不斷變化 ? 使用LabelTTF ? GameUI.js 擴展Lay

5、er，建立GameUI類 游戲界面 ? GameUI.js ? levelText，scoreText，stepText ? 表示在GameUI這個Layer的擴展類里，創(chuàng)建了以 levelText，scoreText，stepText命名的臨時變量，初 始值為null，即空對象，并未指定類型 游戲界面 ? app.js ? GameLayer顯示背景圖片 ? 運行查看效果，背景圖片描繪 游戲界面 ? GameUI.js ? 使用LabelTTF用于顯示信息 ? 為了代碼清晰，建立私有函數(shù)_initInfoPanel來完成信息 欄的初始化 ? 三個信息除了數(shù)字之外，還需要三個標(biāo)簽： “Leve

6、l”，“Score”，“Step” ? 一共需要建立六個LabelTTF對象 ? _initInfoPanel()，緊跟在ctor方法后寫 游戲界面 ? GameUI.js ? 私有函數(shù)_initInfoPanel 游戲界面 ? GameUI.js ? 私有函數(shù)_initInfoPanel 續(xù) 游戲界面 ? GameUI.js ? 私有函數(shù)_initInfoPanel ? 三個信息顯示在屏幕上方，從左到右分別是Level、 Score和Step ? 為了更好的顯示，設(shè)置LabelTTF縱向位置使窗口高度減 去固定值的做法。 ? 好處：調(diào)整屏幕寬和高，只需要修改html和main.js就可 以了

7、，不需要逐個界面去調(diào)整 ? 為了便于后續(xù)修改信息，levelText、scoreText和 stepText記錄到GameUI類的私有屬性中 （this.levelText = levelText） 游戲界面 ? GameUI.js ? 需要使用定時器，讓信息欄不斷刷新 ? 可以在構(gòu)造函數(shù)中調(diào)用scheduleUpdate實現(xiàn)每幀不斷刷 新 ? 缺點：有點浪費性能，畢竟游戲不是每幀都發(fā)生信息變化 ? 優(yōu)點：函數(shù)調(diào)用不用多寫，便于代碼實現(xiàn)。而且，信息欄 只有3個LabelTTF，刷新消耗極小，是簡單的做法 ? 解決數(shù)據(jù)來源：讓GameLayer新建GameUI的時候?qū)⒆?身傳遞進來 游戲界面 ?

8、 GameUI.js 游戲界面 ? GameUI.js ? 其中，從GameLayer獲取當(dāng)前關(guān)卡、分?jǐn)?shù)、剩余步數(shù)等 信息。這些預(yù)先假設(shè)GameLayer將有l(wèi)evel、score等公 共屬性 游戲界面 ? GameUI.js ? 顯示勝利結(jié)果 游戲界面 ? GameUI.js ? 顯示勝利結(jié)果 游戲界面 ? GameUI.js ? 顯示失敗結(jié)果 游戲界面 ? GameUI.js ? 顯示失敗結(jié)果 遮罩（ClippingNode） 使用遮罩 ? app.js ? 創(chuàng)建GameScene，游戲的唯一場景 使用遮罩 ? app.js ? 創(chuàng)建GameLayer ? GameLayer中有三層內(nèi)容：

9、 ? 最底下的背景圖、中間10 X 10的糖果矩陣、最上層的 GameUI ? 由于糖果矩陣和GameUI會繼續(xù)訪問到，所以在 GameLayer中設(shè)計兩個屬性指向這兩個內(nèi)容： ? 使用mapPanel指向糖果矩陣的層，使用ui指向GameUI ? 其他的屬性：當(dāng)前分?jǐn)?shù)score、當(dāng)前關(guān)卡level、已用步數(shù) steps、限制步數(shù)limitStep、目標(biāo)分?jǐn)?shù)targetScore 使用遮罩 ? app.js ? GameLayer基本創(chuàng)建 使用遮罩 ? app.js ? 新建背景 使用遮罩 ? app.js ? 新建糖果矩陣 ? 糖果會超出范圍？ 使用遮罩 ? app.js ? 解決糖果超出范

10、圍的問題，使用ClippingNode ? 利用遮罩讓指定范圍內(nèi)的內(nèi)容顯示，超出范圍的內(nèi)容隱藏 ? 方法： ? 1、需要添加內(nèi)容（各種節(jié)點）到遮罩節(jié)點上 ? 2、給遮罩節(jié)點指定一個裁剪的模板，超出裁剪模板的內(nèi) 容將被隱藏 ? 需要640 X 640的正方形模板 ? 可以使用DrawNode，可以自由繪制圖案，例如長方形、 原形、曲線等 使用遮罩 ? app.js ? 使用ClippingNode： ? 1、新建一個ClippingNode，把其放到屏幕中間 （指定起始的x、y坐標(biāo)，width寬，height高） ? 2、新建一個DrawNode，并利用drawRect方法繪制一 個正方形，該正

11、方形正好跟糖果矩陣640 X 640區(qū)域重疊 使用遮罩 ? app.js ? 使用ClippingNode 使用遮罩 ? app.js ? 初始化糖果矩陣_init： ? 1、把游戲的核心數(shù)據(jù)和邏輯數(shù)據(jù)初始化 ? 2、新建10 X 10個隨機糖果并添加糖果到矩陣中 ? 額外設(shè)計一個二位數(shù)組：this.map，邏輯上方便管理所 有糖果，通過列號和行號快速索引到某個糖果 使用遮罩 ? app.js ? 初始化糖果矩陣_init： 使用遮罩 ? app.js ? 使用ClippingNode ? 糖果矩陣寬高常量Constant.MAP_SIZE ? 糖果圖片寬高常量Constant.CANDY_W

12、IDTH ? Constant.js 設(shè)置 使用遮罩 ? app.js 新建GameUI 對象， 添加到 GameLayer 使用遮罩 點擊消除 點擊消除 ? 游戲交互內(nèi)容的制作 ? 需要監(jiān)聽鼠標(biāo)和觸摸事件 ? GameLayer構(gòu)造函數(shù)中添加代碼： 點擊消除 ? 建立_onMouseDown和_onTouchBegan函數(shù) ? 通過鼠標(biāo)坐標(biāo)和糖果寬高計算出當(dāng)前點擊的糖果在哪一列 哪一行，將畫面坐標(biāo)轉(zhuǎn)化為邏輯的行列 點擊消除 ? _popCandy處理被點擊糖果的邏輯 ? 算法設(shè)計： ? 1、建立一個集合，存儲全部相連的糖果。初始時只有被 點擊的糖果 ? 2、遍歷集合中的糖果，判斷該糖果的上下

13、左右4方向的糖 果是否跟該糖果是同一顏色的。如果是，則把旁邊的糖果 加到數(shù)組中。注意：添加前需要檢查是否已經(jīng)存在該集合 中 ? 3、當(dāng)遍歷完集合的時候，相連的糖果就被找出來了 點擊消除 ? _popCandy處理被點擊糖果的邏輯 ? 邏輯設(shè)計： ? 1、獲得集合后，判斷糖果個數(shù) ? 2、如果只有1個，則不執(zhí)行消除的動作 ? 3、如果大于等于2個，那么就刪除這部分糖果，增加已用 步數(shù)，并計算當(dāng)前得到的分?jǐn)?shù) ? 4、刪除糖果后，再執(zhí)行生成新糖果的邏輯，同時檢查游 戲的進度（勝利或失?。?? 5、為了確保糖果補充過程中，玩家不能再次添加，給 GameLayer添加屬性moving。即moving=t

14、rue， _popCandy不做處理；當(dāng)_popCandy執(zhí)行后，設(shè)置 moving為true 點擊消除 ? _popCandy 代碼： 點擊消除 ? 檢測糖果存在_checkCandyExist 點擊消除 ? _popCandy 代碼：（續(xù)） 補充糖果 補充糖果 ? 糖果的補充都以列為單位 ? 1、該列消除了多少糖果 ? 2、就會在該列正上方生成多少個新糖果 ? 3、落下補充恢復(fù)到10 X 10的糖果矩陣 ? 找到每個糖果需要下落距離的算法？ 補充糖果 ? 算法設(shè)計： ? 1、遍歷糖果矩陣的每一列，每列中再從下往上遍歷該列 的每個糖果 ? 2、每列遍歷開始時，設(shè)置空位計數(shù)器為0 ? 3、如某

15、位置為null，則表示該位置的糖果已被 _popCandy刪除，此時把該列的空位計數(shù)器+1，并在整 列的最上方添加一個新隨機糖果，并添加到二維數(shù)組的該 列數(shù)據(jù)中 ? 4、如某位置為糖果，則需安排這個糖果下落。當(dāng)前空位 計數(shù)器的數(shù)值正好就是該糖果需要下落的距離。設(shè)置糖果 下落后，需要調(diào)整原位置為null，下落到的位置填入該糖 果 ? 5、當(dāng)遍歷完該列最后一個糖果（包括剛新加的糖果）后， 該列的檢查工作完成了。需要把超出10的數(shù)組位置刪除 補充糖果 ? 下落效果，模擬自由落體動作的運動： ? 根據(jù)自由落體公式：h = ?gt 2 ? 則下落時間： Math.sqrt(2*下落距離/FALL_ACC

16、ELERATION) ? FALL_ACCELERATION設(shè)置為30 ? 當(dāng)所有糖果下落完成后，把GameLayer的moving設(shè)置 為false?？梢允褂胹cheduleOnce和_finishCandyFalls 函數(shù)處理 補充糖果 ? 補充糖果的函數(shù)_generateNewCandy的代碼： 補充糖果 ? 補充糖果的函數(shù)_generateNewCandy的代碼： 關(guān)卡設(shè)計 關(guān)卡設(shè)計 ? 分?jǐn)?shù)來源： ? 1、消除糖果，假設(shè)個數(shù)為N，那么分?jǐn)?shù)為N X N ? 2、過關(guān)后剩余步數(shù)轉(zhuǎn)化為分?jǐn)?shù)。 ? 簡單處理，這里設(shè)置轉(zhuǎn)化分?jǐn)?shù)為剩余步數(shù)的30倍 關(guān)卡設(shè)計 ? Constant.js設(shè)置 ? limitStep是限制步數(shù)，targetScore是目標(biāo)分?jǐn)?shù) 關(guān)卡設(shè)計 ? GameLayer的_init中，通過配置獲取當(dāng)前關(guān)卡的限制步 數(shù)和目標(biāo)分?jǐn)?shù) 關(guān)卡設(shè)計 ? 每次點擊后，添加勝負(fù)判斷： ? 1、如果分?jǐn)?shù)到達目標(biāo)分?jǐn)?shù)，則表示玩家已完成任務(wù)，顯 示過關(guān)提示，同時把剩余步數(shù)轉(zhuǎn)化為分?jǐn)?shù) ? 2、如果分?jǐn)?shù)沒有到達目標(biāo)，而且當(dāng)前步數(shù)已大于或等于 限制步數(shù)，則表示玩家失敗，顯示失敗提示 ? 3、無論失敗還是成功，3秒后將切換界面：勝利則進入下 一關(guān)，失敗則重