『牛角书』HarmonyOS手机小游戏——数字华容道_华为鸿蒙手机自带小游戏-CSDN博客

本文链接：https://blog.csdn.net/sacgydyas/article/details/128403178

本文详细介绍了如何使用DevEco Studio从零开始开发一款鸿蒙OS上的数字华容道小游戏。涵盖了界面布局、数字随机打乱算法及游戏成功界面的实现，包括删除初始Text组件，添加图片和按钮，以及编写Java代码实现游戏逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

本个demo将从零基础开始完成鸿蒙小游戏APP在手机上的编译在项目中我们所使用到的软件为DevEco Studio，下载地址为：DevEco Studio下载、DevEco Studio安装教程，在项目中我们要实现的内容为数字华容道APP的开发。

1.打开引用首先为数字华容道的初始界面，点击开始游戏即会切换到数字华容道的游戏界面。

2. 进入数字华容道的游戏界面显示4*4的方阵，方阵中分布有随意打乱的1至15的数字和一个空白方格，方阵下方显示一个“重新开始”的按钮和一个“返回”按钮，点击“重新开始”按钮即会重新生成随意打乱的1至15的数字和一个空白方格的方阵，点击“返回”按钮即会切换到数字华容道的初始界面，最下方有四个指示不同方向箭头的按钮，点击任一按钮或向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格。

正文

1.先在entry>src>main>config.json文件中最下方"launchType": “standard"的后面添加以下代码，并且将上方的“label”：“MyPhoneApplication”修改成"label”: “数字华容道”，这样就实现去掉应用上方的标题栏和将应用名称改为数字华容道了。

"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>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_