2048小游戲—鴻蒙Arkts版
一、規則講解
首先我們先介紹一下2048這個游戲的基本規則：一開始方格內會出現2或者4等這兩個小數字，玩家只需要上下左右其中一個方向來移動出現的數字，所有的數字就會想滑動的方向靠攏，而滑出的空白方塊就會隨機出現一個數字，相同的數字相撞時會疊加靠攏，然后一直這樣，不斷的疊加最終拼湊出2048這個數字就算成功。
如圖為游戲的初始界面：
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
二、代碼講解
1、項目結構
如圖：
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
主要包含三個包：model、pages以及util。
- model 包：該包包含應用程序中使用的數據模型，比如說網絡請求返回的數據模型、本地存儲的數據模型等。這些數據模型用于傳遞數據，使得應用程序中各個組件之間的數據傳遞變得更加簡單和可靠。
- pages 包：該包包含了應用程序中所有的 Activity、Fragment 等 UI 組件。這些組件被組織成不同的模塊（module），每個模塊都包含了一組相關的 UI 組件。例如，一個包含登錄、注冊等頁面的模塊可以被命名為 auth。
- util 包：該包包含了應用程序中常用的工具類和輔助函數。例如，日期時間格式化、網絡連接狀態檢查、字符串處理等。這些工具類和輔助函數可以減少代碼的冗余，提高代碼的可讀性和可維護性。
2、model包
首先我們聲明該類為GameController，下面為了方便理解，我將分步給出部分代碼并介紹該類的主要方法和屬性。
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- cellArr: number[][]: 一個二維數組，用于存儲游戲單元格的數字。每個單元格可以存儲一個數字，數字可以是 2 或 4。
- isGameOver: boolean: 表示游戲是否結束。
- init(cellArr: number[]): void: 初始化游戲，將一個一維數組轉換為二維數組，并生成兩個隨機數字填充到單元格中。
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- fillOneEmptyCell(): void: 找到一個空單元格，生成一個隨機數字填充到該單元格中。
- findOneEmptyCell(): number: 找到一個空單元格的索引。
- getRandomValue(): number: 生成隨機數字，90%幾率生成2，10%幾率生成4。
- randomVal(): 生成一個隨機整數，范圍在0（包括）和
max（不包括）之間。
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- canMove(): boolean: 判斷游戲是否可以繼續移動，依次檢查每個單元格是否為空、是否和右側單元格相等、是否和下方單元格相等。
- horizontalMoveCells(toLeft: boolean): void: 將單元格向左或向右移動，移除0并對相鄰相同數進行疊加。
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- verticalMoveCells(toUp: boolean): void: 將單元格向上或向下移動，移除0并對相鄰相同數進行疊加。toUp表示是否是向上
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- removeZerosAndAdd(arr: number[], toHead: boolean): number[]: 壓縮數組并對相鄰相同的數進行疊加。
去掉數組中的0，向頭或向尾壓縮數組。
0,4,0,4向左壓縮變成：4,4,0,0. 向右壓縮變成：0,0,4,4
相鄰的數如果相同，則進行相加運算。
4,4,0,0向左疊加變成：8,0,0,0. 向右疊加變成：0,0,0,8
toHead表示是否是頭壓縮
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
- moveUp(): void: 向上移動單元格。
- moveDown(): void: 向下移動單元格。
- moveLeft(): void: 向左移動單元格。
- moveRight(): void: 向右移動單元格。
- checkGameOverOrContinue(): void: 檢查游戲是否結束，如果可以繼續移動，生成一個新數字填充到單元格中，否則標記游戲結束。
- getFlatCellArr(): number[]: 將二維數組轉換為一維數組。
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
首先我們定義了一個 GameDataSource 類，實現了 IDataSource 接口的方法。該類有一個 dataArray 屬性，用于存儲字符串數組類型的數據。constructor 方法接收一個參數 ele，并通過循環將其內容推入 dataArray 數組中。totalCount 方法返回 dataArray 數組的長度，即數據總數。getData 方法接收一個數字類型的參數 index，并返回 dataArray 數組中索引為 index 的元素。registerDataChangeListener 和 unregisterDataChangeListener 方法在接口中定義，但在該類中并未實現任何功能。
通過這段代碼，我們實現了一個數據源類，可以用于獲取、存儲和管理數據。如果需要在數據源中添加數據監聽器，可以通過實現 IDataSource 接口來實現該功能。
3、pages包（僅展示部分代碼）
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
Lblbc 組件實現了游戲邏輯和界面渲染。它包含了一個 flatCellArr 數組，用于存儲游戲中的數字方塊的值。gameController 和 colorUtil 屬性分別是游戲控制器和顏色工具類的實例。
組件中的 startGame 方法用于初始化游戲，并將 flatCellArr 數組重置為初始狀態。moveUp、moveDown、moveLeft 和 moveRight 方法用于響應用戶的滑動手勢，移動數字方塊。updateCells 方法用于更新 flatCellArr 數組的值，并檢查游戲是否結束。
aboutToAppear 方法在組件即將出現時調用，并根據屏幕的大小設置游戲界面的大小。build 方法用于構建游戲界面，其中使用了 Column、Grid、Text 等 Ohos.js 組件。
GameOverView 組件是一個自定義對話框組件，用于在游戲結束時顯示。它包含一個 startGame 方法和一個 build 方法，用于重新開始游戲。
4、util包
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
這段代碼實現了一個 ColorUtil 類，提供了一個 getCellBackgroundColor 方法，用于根據數字方塊的值返回相應的背景顏色。具體實現是通過一個 switch 語句，根據不同的數字方塊的值返回不同的顏色值。在 switch 語句中，每個 case 語句對應一個數字方塊的值，返回一個對應的顏色值。如果傳入的數字方塊的值不在 case 列表中，default 語句會返回一個默認的顏色值。
在游戲界面中，數字方塊的背景顏色就是通過調用 ColorUtil 類的 getCellBackgroundColor 方法來獲取的。根據不同的數字方塊的值，游戲界面上的數字方塊會顯示不同的背景顏色，從而提高了游戲的可玩性和可視化效果。
結尾
我們需要在config.json中進行文件的配置用于描述應用程序的基本信息、模塊、設備配置和能力等。它由三個主要部分組成：app、deviceConfig 和 module。
首先是 app 部分，用于定義應用程序的基本信息，包括 bundleName、vendor 和 version 等。其中，bundleName 表示應用程序的包名，vendor 表示應用程序的開發商，version 表示應用程序的版本號，包括 code 和 name 兩個屬性。
然后是 deviceConfig 部分，用于定義設備的配置信息。
最后是 module 部分，用于定義應用程序的模塊和能力。其中，package 表示模塊的包名，name 表示模塊的入口文件，mainAbility 表示應用程序的主要入口能力。deviceType 表示設備類型，這里是手機。distro 表示應用程序的分發信息，包括 deliveryWithInstall、moduleName、moduleType 和 installationFree 等屬性。abilities 表示應用程序的能力列表。js 表示應用程序的 JS 配置信息，包括 mode、pages、name 和 window 等屬性。其中，mode 表示頁面的模式，這里是 ets。pages 表示應用程序的頁面列表，這里只有一個名為 pages/index 的頁面。name 表示頁面的名稱，這里是 .MainAbility。window 表示頁面的窗口配置，包括 designWidth 和 autoDesignWidth 等屬性。
最終的運行結果如圖所示：
2048小游戲——鴻蒙Arkts版-開源基礎軟件社區
好啦，本期的講解就此結束，博主第一次寫這玩意，希望大家一起努力共同進步。
文章相關附件可以點擊下面的原文鏈接前往下載：
https://ost.51cto.com/resource/2901
