HarmonyOS（鸿蒙）运动手表第二个小游戏app——数字华容道

m0_67856527

已于 2022-12-18 08:43:10 修改

阅读量1.3k

点赞数 1

文章标签： harmonyos 华为

于 2022-12-16 20:51:40 首次发布

本文链接：https://blog.csdn.net/m0_67856527/article/details/128347703

版权

本文详述了使用HarmonyOS开发数字华容道小游戏的过程，从初始界面设计到游戏规则实现，包括计时器、重新开始按钮等功能。开发者通过此项目实战提升了对鸿蒙应用开发的理解，尤其是栈、按钮、画布、计时器和滑动组件的运用。

摘要由CSDN通过智能技术生成

前言

这次博客是学完鸿蒙应用开发之后，自行开发的鸿蒙小游戏——数字华容道，这篇博客详细地讲了数字华容道的开发思路。

概述

本个demo将从零基础开始完成鸿蒙小游戏APP在可穿戴设备上的编译，此处以运动手表为例，在项目中我们所使用到的软件为DevEco Studio。

1.在初始界面中显示4*4的方阵，方阵中分布有随意打乱的1至15的数字和一个空白方格，方阵上方增加一个计时器，显示游戏进行的时间，单位为秒，方阵下方显示一个“重新开始”的按钮，为用户提供重新开始游戏的机会。

2.向上、下、左、右任一方向滑动，空白方格周围对应位置的方格便会随之向对应的方向移动一格，计时器也会显示游戏开始到当前的时间。

3.经过若干次移动后，当所有的数字按顺序排列后，则会弹出游戏成功的界面，再滑动也不会有任何变化，此时方阵上方的计时器停止计时，点击“重新开始”的按钮后则会重新返回步骤1界面所示。

主要源代码：

index.html如下：

<div class="container" >
    <text class="seconds">
        当前秒数：{
  {currentSeconds}}
    </text>
    <stack class="stack">
        <canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>
        <div class="subcontainer" show="{
  {isShow}}">