一文梳理2048小游戲從開發到上云全流程-有解無憂

摘要：本文主要以Cocos2d Web專案2048小游戲的開發上云為例，介紹DevOps開發實踐的全流程

前言

本文主要以Cocos2d Web專案2048小游戲的開發上云為例，介紹DevOps開發實踐的全流程，主要涉及開發工具為華為云軟體開發平臺DevCloud和CocosCreator，按照整體的開發流程：代碼托管->編譯構建->發布（倉庫）->部署，將文章分為兩部分詳細介紹，第一部分為2048小游戲的代碼開發，第二部分為該小游戲專案上云的操作指導，詳細內容請見下文！

在正式開始前，首先對本文用到的代碼倉庫進行說明：

1.x小節中使用的代碼倉庫為CocosCreator開發代碼，原始碼地址：https://github.com/potato47/so-many-games.git

2.x小節中使用的代碼倉庫為：經過CocosCreator構建后的Web端檔案，倉庫地址：https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git

2048小游戲代碼開發

游戲功能描述

在4x4的格子布局中，玩家通過手勢上下左右滑動以使與滑動方向相同的同值數字相加，直到累加到2048，如此邏輯也衍生了眾多高熱度的小游戲，

此次展示demo中的2048游戲，就是在此基礎上將數字改寫為“幼兒園”“小學生”等，模擬我們這一生的學習成長路徑增強了游戲的趣味性，并且本demo中設定的上限也不再是2048，具體是什么不如親手來試試吧~

CocosCreator開發流程

在CocosCreator新建一個場景，在Canvas下創建節點，根據需求不同，可以添加一些Sprite、Label、Button等不同的節點，

針對于每個節點，我們也可以為其添加相應組件，這些組件可以是CocosCreator自帶的組件，也可以是我們自己撰寫好的代碼，

實作邏輯：六個關鍵點

該游戲的邏輯主要有六點：創建格子類、游戲初始化設計、隨機初始值設定、手勢識別、手勢滑動邏輯實作和結束游戲判斷，詳細方法如下：

格子類創建

格子類是組成2048游戲的基礎，4*4的方格的16個位置放置不同的格子，每個位置為獨立的一張格子，對于每個格子而言，我們需要記錄3個值（也可以說是2個值）：橫坐標x、豎坐標y、（x、y共同確定格子位置），格子中的數值n，根據實際數值n值的不同，格子內顯示的文字和顏色也都會變化，代碼參考如下：

游戲初始化

在游戲開始時，執行棋盤的初始化，將所有格子都清零，再新設定兩個格子的值，所有格子的值歸零，代碼參考如下：

隨機初始值

代碼參考如下：

手勢識別

在場景的初始化時添加監聽事件，獲取到觸摸事件后，記錄點擊開始的位置和結束的位置，通過手勢位移的變化量確定位移方向，再呼叫手勢滑動方法，參考代碼如下：

手勢滑動邏輯

根據滑動方向的不同，需要使用不同的方法進行處理，

此處以左滑為例：

合并：先遍歷豎軸y，再遍歷橫軸x，每一豎軸y中，從左至右對應x軸的值為0至3，若其右側有值且與其相等，則其值x2，其右側值置0.

移動：重復一遍如上遍歷，如有某一格子值為0，且其右側有值，則該格子值置為右側值，右側值置為0，
如有“合并”或“移動”，則為有效滑動操作，即新生成格子值，并回傳是否是有效操作，參考代碼如下：

游戲結束判斷

若為有效操作后，判斷是否可以結束游戲，結束游戲，參考代碼如下：

應用上云運行

以華為云軟體開發平臺DevCloud為開發工具，進行該專案上云運行的流程：創建專案、創建代碼倉、創建編譯構建任務、創建部署任務、訪問應用、釋放資源，

創建專案

前往軟體開發平臺DevCloud>>>

點擊免費試用，開通基礎版套餐

新建Scrum專案，引數如下：

專案流程：Scrum
專案名稱：自定義
點擊“確定”完成專案創建

實踐步驟二：創建代碼倉

前往代碼托管，匯入外部倉庫，并按如下填寫外部倉庫資訊：

注：本次匯入的代碼倉為經過CocosCreator構建之后的Web檔案倉庫，

源倉庫地址：ü https://codehub.devcloud.cn-north-4.huaweicloud.com/yxdmmsymbgl00001/soManyGames.git
源倉庫訪問權限：不需要用戶名/密碼
勾選“我已閱讀并同意《隱私政策宣告》和《軟體開發服務使用宣告》”
點擊“下一步”按鈕，