序文
は以前に黒と白のチェスゲームの開発アイデアを共有しました。興味のある読者は学び、交換することができます：黒と白のチェス。次に、非常に古典的なゲームである2番目のゲームの開発アイデアを共有します。 -Digital Huarong Roadは、HarmonyOSを研究した後、Shenzhen Honghui Groupによって開発されたHongmengデモでもあります。これは、Digital Huarong Roadの記述アイデアを詳細に説明し、詳細な説明を含みます。同時に、関心のあるすべての読者を歓迎します。 HarmonyOSの開発を学び、互いにコミュニケーションを取り、共に進歩します。
概要
このデモでは、ウェアラブルデバイスでのHongmengゲームAPPのコンパイルをゼロベースで完了します。例としてスポーツウォッチを示します。プロジェクトで使用するソフトウェアはDevEcoStudioです。ダウンロードアドレスは次のとおりです。DevEcoStudiodownload、 DevEco Studioインストールチュートリアル、プロジェクトで達成したいコンテンツは、デジタルHuarongdaoAPPの開発です。
- 4 * 4の正方形のマトリックスが初期インターフェースに表示されます。正方形のマトリックスには、1から15までのランダムなランダムな数字と空白の正方形が含まれています。正方形のマトリックスの上にタイマーが追加され、ゲームの時間が秒単位で表示されます。 「再起動」ボタンが正方形のマトリックスの下に表示され、ユーザーにゲームを再起動する機会を提供します。
- 上、下、左、または右にスワイプすると、空白の正方形の周りの対応する位置にある正方形が対応する方向に1つの正方形を移動し、タイマーはゲームの開始から現在の時刻までの時間を表示します。
- 数回の移動の後、すべての数字が順番に並べられると、ゲーム成功インターフェースがポップアップし、もう一度スライドしても変化はありません。このとき、正方形のマトリックスの上のタイマーがタイミングを停止し、「再開」ボタンをクリックします。次に、手順1に示したインターフェイスに戻ります。
テキストダウンロードとインストールが正常に完了したら
、プロジェクト
DevEcoStudioを作成します。DevEcoStudioを開き、左上隅の[ファイル]をクリックし、[新規]をクリックして、[新しいプロジェクト]を選択し、[Lite Wearable]オプションを選択し、デフォルトのテンプレートを選択して、保存パスを選択し、ファイルにGame1（ファイル）という名前を付けます。名前を中国語や特殊文字で表示することはできません。表示しないと、プロジェクトファイルが正常に作成されません）、最後に[完了]をクリックします。
主なファイルは、index.css、index.hml、index.jsです。開始パスは図のとおりです。Index.hmlはページに含まれるコンポーネントを説明するために使用され、index.cssはページ内のコンポーネントがどのように見えるかを説明するために使用されます。 、Index.jsは、ページ内のコンポーネントがどのように相互作用するかを説明するために使用されます。 
スタートインターフェースのレイアウトを実現するには、
まず4 * 4の正方形のマトリックスを描く必要があります。1から15までの数字が順番に表示されます。正方形の上部には「現在の秒数：0.0」、下部には「」が表示されます。 「再起動」ボタン。
- index.hmlに対応するページコンポーネントを追加します。最初に、他のすべてのコンポーネントを保持するために使用されるcontainerという名前の基本的なコンテナdivクラスを作成します。次に、この基本的なコンテナにsecondsという名前のテキストコンポーネントテキストクラスを追加し、表示を示します。 「currentseconds：」の固定部分は、currentStepsという名前の変数を動的変換部分に与えます。これは、ゲームの秒数を動的に表示するために使用されます。canvasというキャンバスコンポーネントを追加し、を使用して参照属性refを追加します。子要素または子コンポーネントを指す参照情報を指定するには、参照を親コンポーネントの$ refsプロパティオブジェクトに登録して、このキャンバスに4 * 4の正方形のマトリックスを描画できるようにします。最後に、共通のボタンコンポーネントが追加され、クラス名は次のようになります。ビット、および「再起動」を割り当ててゲームを再起動します
<div class = "container">
<text class = "seconds">
当前秒数：{{currentSeconds}}
</ text>
<canvas class = "canvas" ref = "canvas"> </ canvas>
<input type = "button" value = "重新開始" class = "bit" />
</ div>
2. index.cssに追加したばかりのページコンポーネントのスタイルを説明します。最初にコンテナのスタイルを記述します。flex-directionはコンテナの主軸方向であり、列を選択し（上から下への垂直方向）、justify-contentはコンテナの現在の行の主軸です。配置形式、選択中心（アイテムはコンテナの中央にあります）、align-itemsはコンテナの現在の行の交差軸配置形式、選択中心（要素は交差軸の中心にあります）、幅と高さはそれぞれコンテナの幅と高さ（ピクセル単位）です。 、450pxに設定;次に秒のスタイルを記述します。font-sizeはテキストのサイズを設定し、font-sizeはテキストのテキスト配置を設定し、text-alignはテキストのテキスト配置を設定し、中央（中央に配置されたテキスト）、幅、高さをそれぞれ選択します300pxと20pxに設定すると、letter-spacingはテキストの文字間隔を設定し、0pxに設定し、margin-topは上マージンを設定し、10pxに設定します。次に、キャンバススタイルを書き込み、幅と高さを320pxに設定します。 、Background-colorは背景色を設定し、＃FFFFFFに設定します。最後にビットスタイルを書き込み、幅と高さを150pxと30pxに設定し、background-colorを＃AD9D8Fに設定し、font-sizeを24pxに設定します。 -topは10pxに設定されています
.container {
flex-direction：column;
justify-content：center;
align-items：center;
幅：450px;
高さ：450px;
}
.seconds {
font-size：18px;
text-align：center;
幅：300px;
高さ：20px;
letter-spacing：0px;
margin-top：10px;
}
.canvas {
width：305px;
高さ：305px;
背景色：#FFFFFF;
}
.bit {
width：150px;
高さ：30px;
背景色：＃AD9D8F;
font-size：24px;
margin-top：10px;
}
3. index.jsのページでコンポーネントの相互作用を説明します。まず、データのcurrentSeconds値を0.0に設定します。
data: {
currentSeconds:'0.0',
}
然后在文件开头定义一个全局变量context，定义一个全局变量的二维数组grids，其中的值为1至15和0，定义全局常量方格的边长SIDELEN为70，方格的间距MARGIN为5，创建一个onReady()函数，用于定义2d绘画工具
var grids=[[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
[13, 14, 15, 0]];
var context;
const SIDELEN = 70;
const MARGIN = 5;
onReady(){
context=this.$refs.canvas.getContext('2d');
}
再创建drawGrids()函数，先将grids的值利用toString()函数全部转化为字符串，fillStyle为画图工具context的方格的颜色，方格的背景颜色定义为#BBADA0，数字的颜色定义为#000000，fillRect为画图工具context的画图矩形的大小，其中有四个参数，第一个参数指定矩形左上角的x坐标，第二个参数指定矩形左上角的y坐标，第三个参数指定矩形的高度，第四个参数指定矩形的宽度。font为为画图工具context的字体大小，定义为30px HYQiHei-65S，因为要出现一个空白的方格，所以需要添加一个判断语句，当数字为0时不显示数字。fillText为画图工具context的文本字体大小，其中有三个参数，第一个参数为绘制的文本，第二个参数指定文本左上角的x坐标，第三个参数指定文本左上角的y坐标，最后创建onShow()函数，用于调用drawGrids()函数
onShow() {
this.drawGrids();
},
drawGrids() {
for (let row = 0; row < 4; row++) {
for (let column = 0; column < 4; column++) {
let gridStr = grids[row][column].toString();
context.fillStyle = "#BBADA0";
let leftTopX = column * (MARGIN + SIDELEN) + MARGIN;
let leftTopY = row * (MARGIN + SIDELEN) + MARGIN;
context.fillRect(leftTopX, leftTopY, SIDELEN, SIDELEN);
context.font = "30px HYQiHei-65S";
if (gridStr != "0") {
context.fillStyle = "#000000";
let offsetX = (4 - gridStr.length) * (SIDELEN / 8);
let offsetY = (SIDELEN - 30) / 2;
context.fillText(gridStr, leftTopX + offsetX, leftTopY + offsetY);
}
}
}
}
至此，运行即可得出上述界面布局了。
实现数字的随机打乱和方格的移动
其次我们要在屏幕上随机生成一个数字被随意打乱的4*4的方阵，并且向任意方向滑动屏幕，空白方格周围对应位置的方格便会随之向对应的方向移动一格
1. 在index.hml中添加相应的页面组件：我们需要在画布中添加一个swipe属性，用于响应滑动事件，赋予一个所自动调用的函数swipeGrids
<canvas class="canvas" ref="canvas" onswipe="swipeGrids"></canvas>
2. 在index.css中描述刚才添加的页面组件的样式：这一部分不需要添加或修改页面组件的样式
3. index.jsでページ上のコンポーネントの相互作用を説明します。まず、グリッドを移動し、関数changeGrids（direction）を作成し、スライドの方向を示すパラメーターの方向を受け入れ、最初に空白のグリッドがどこにあるかを調べます。対応する2次元配列の添え字で、パラメータの方向が「左」、「右」、「上」、または「下」であると判断します。isShowがfalseの場合、対応する正方形と空白の正方形は2次元配列に対応します。値の交換、スライディングイベントに応答して自動的に呼び出される関数swipeGrids（event）の作成、パラメーターはスライディングイベント、関数changeGrids（direction）の呼び出し、スライディングの方向への受け渡し、最後に関数drawGrids（）の呼び出し
記事のフォローアップコンテンツと添付ファイルは、以下の元のリンクをクリックして、元のリンクを確認できます
：https： //harmonyos.51cto.com/posts/2006#bkwz
51CTOとHuaweiの公式戦略協力によって構築されたHongmengテクノロジーコミュニティ
https://harmonyos.51cto.com/#bkwz