目錄：
前言
概述
正文
建立專案
實現初始介面佈局
實現數字的隨機打亂
實現滑動或點選調換數字
實現遊戲成功介面
結語
原始碼包

前言

12月16號HarmonyOS2.0手機開發者Beta版已經發布了，作為“1+8+N”戰略的重要入口和生態核心，怎麼能少得了手機應用開發呢，今天將由深鴻會深大學習小組從零基礎開發第一個HarmonyOS手機小遊戲——數字華容道（介面略醜陋，大佬別噴），此前已經在運動手錶上成功開發了：HarmonyOS運動手錶遊戲合併、HarmonyOS手錶遊戲——數字華容道，同樣是深鴻會深大小組學習完HarmonyOS後自行開發的一個鴻蒙demo，詳細講述了數字華容道在鴻蒙手機上開發思路。深鴻會深大學習小組是一群熱衷於學習鴻蒙相關知識和開發鴻蒙相關應用的開發者們，我們的學習專案為：荔園Harmony、Awesome-HarmonyOS_木棉花，同時也歡迎與各位感興趣的讀者一起學習HarmonyOS開發，相互交流、共同進步。

概述

本個demo將從零基礎開始完成鴻蒙小遊戲APP在手機上的編譯在專案中我們所使用到的軟體為DevEco Studio，下載地址為：DevEco Studio下載、DevEco Studio安裝教程，在專案中我們要實現的內容為數字華容道APP的開發。

1、開啟引用首先為數字華容道的初始介面，點選開始遊戲即會切換到數字華容道的遊戲介面。

2、進入數字華容道的遊戲介面顯示4*4的方陣，方陣中分佈有隨意打亂的1至15的數字和一個空白方格，方陣下方顯示一個“重新開始”的按鈕和一個“返回”按鈕，點選“重新開始”按鈕即會重新生成隨意打亂的1至15的數字和一個空白方格的方陣，點選“返回”按鈕即會切換到數字華容道的初始介面，最下方有四個指示不同方向箭頭的按鈕，點選任一按鈕或向上、下、左、右任一方向滑動，空白方格周圍對應位置的方格便會隨之向對應的方向移動一格。

3、經過若干次滑動或點選後，當所有的數字按順序排列後，則會彈出遊戲成功的介面，再滑動或點選也不會有任何變化。

正文

建立專案

DevEco Studio下載安裝成功後，開啟DevEco Studio，點選左上角的File，點選New，再選擇New Project，選擇Phone選項，選擇預設的模板（java版），然後選擇儲存路徑，將檔案命名為MyPhoneApplication（檔名不能出現中文或者特殊字元，否則將無法成功建立專案檔案），最後點選Finish。

實現初始介面佈局

首先，我們要先實現數字華容道的初始介面，點選開始遊戲即會切換到另一個空白的介面。

1、先在entry>src>main>config.json檔案中最下方"launchType": "standard"的後面新增以下程式碼，並且將上方的“label”：“MyPhoneApplication”修改成"label": "數字華容道"，這樣就實現去掉應用上方的標題欄和將應用名稱改為數字華容道了

config.json最下面部分程式碼：

"orientation": "unspecified",
        "name": "com.example.myphoneapplication.MainAbility",
        "icon": "$media:icon",
        "description": "$string:mainability_description",
        "label": "數字華容道",
        "type": "page",
        "launchType": "standard",
        "metaData": {
          "customizeData": [
            {
              "name": "hwc-theme",
              "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
              "extra": ""
            }
          ]
        }
   

2、先將我們事先準備好的圖片複製貼上到entry>src>main>resources>base>media資料夾中（ctrl+c、ctrl+v複製貼上），並且命名為game，點選OK

在entry>src>main>resources>base>layout>ability_main.xml中添加布局，先將事先存在的Text元件刪去，新增Image圖片元件，引入我們剛才複製貼上的圖片，再新增一個Button按鈕元件，加入唯一識別符號id並配置好其他相應的屬性

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Image
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:image_src="$media:game"
        ohos:layout_alignment="center"
        />

    <Button
        ohos:id="$+id:button_game"
        ohos:height="150"
        ohos:width="515"
        ohos:text_alignment="center"
        ohos:top_margin="-810"
        ohos:left_margin="250"
        />

</DirectionalLayout>

3、在entry>src>main>java>com.example.myphoneapplication>slice中右鍵選擇New>Java Class增加一個空白的類以用來後面編寫數字華容道的遊戲介面，並且命名為SecondAbilitySlice

將entry>src>main>java>com.example.myphoneapplication>slice>SecondAbilitySlice中的程式碼修改成如下：

package com.example.myphoneapplication.slice;

import com.example.myphoneapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;

public class SecondAbilitySlice extends AbilitySlice {

    public void onStart(Intent intent) {
        super.onStart(intent);
        
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

4、在entry>src>main>java>com.example.myphoneapplication>slice>MainAbilitySlice中的onStart函式中新增一個按鈕指向我們（2）中新增的按鈕，按鈕新增一個響應點選事件的函式，用parsent函式跳轉到SecondAbilitySlice

package com.example.myphoneapplication.slice;

import com.example.myphoneapplication.ResourceTable;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;

public class MainAbilitySlice extends ohos.aafwk.ability.AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Button button = (Button) findComponentById(ResourceTable.Id_button_game);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                present(new SecondAbilitySlice(),new Intent());
            }
        });

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

至此，這一部分就完成了。

實現數字的隨機打亂

然後我們要在數字華容道的遊戲介面生成隨意打亂的1至15的數字和一個空白方格的方陣。

檢視更多章節

作者：夕陌
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto.com/