深センHonghuiグループ：HarmonyOSウォッチゲーム-黒と白のフリップチェス

はじめに
今回は、オットーとオットーという独自に開発した最初のデモであるHarmonyOSを学んだ後、深セングループ（Zzt_01-23）が開発した最初のデモです。オットーとオットーを書くというアイデアを詳細に説明しています。詳細な説明と興味のあるすべての読者とHarmonyOS開発を研究し、互いにコミュニケーションを取り、一緒に進歩することを歓迎します。

概要
このデモでは、ウェアラブルデバイスでのHongmeng Mini Game APPのコンパイルを最初から完了します。例としてスポーツウォッチを取り上げます。プロジェクトで使用するソフトウェアはDevEcoStudioです。ダウンロードアドレスは次のとおりです。DownloadDevEcoStudio、inこのプロジェクトで達成したいコンテンツは、白黒のチェスAPPの開発です。

初期インターフェースには7 * 7のボードが表示され、ボード内の黒と白のブロックがランダムに乱れます。ボードにはゲームフリップの数が表示され、ボードの下部に「再起動」ボタンが表示され、ユーザーはゲームを再開できます。
7 * 7ボードの任意のカラーブロックをクリックすると、上下左右の4つのカラーブロックも一緒に色を変更し（端のカラーブロックは一部のカラーブロックの色のみを変更します）、ボードの上の現在のステップ数が対応します順次増加します。
数回クリックした後、すべてのカラーブロックが白になると、ゲーム成功インターフェイスがポップアップ表示されます。このとき、ボードをもう一度クリックしても変更はありません。[再起動]ボタンをクリックして、手順1のインターフェイスに戻ります。示されています。

テキスト
作成プロジェクトファイル
DevEcoStudioが正常にダウンロードされたら、左上隅の[ファイル]をクリックし、[新規]をクリックして、[新しいプロジェクト]を選択し、[Lite Wearable]オプションを選択し、デフォルトのテンプレートを選択して、保存パスを選択し、ファイルにMyGameという名前を付けます（ファイル名は中国語で表示できません）。または、図に示すように、特殊文字を指定しないと、プロジェクトファイルが正常に作成されません）。

主なファイルは、index.css、index.hml、index.jsです。開始パスは図のとおりです。Index.hmlはページに含まれるコンポーネントを説明するために使用され、index.cssはページ内のコンポーネントがどのように見えるかを説明するために使用されます。、Index.jsは、ページ内のコンポーネントがどのように相互作用するかを説明するために使用されます。

スタートインターフェースのレイアウトを実現するには、
まずスポーツウォッチに7 * 7のチェスボードを描く必要があります。まず、カラーブロックの色をすべて白に設定します。チェスボードの上部には「現在のステップ：0」が表示され、チェスボードの下部には「更新」が表示されます。図に示すように、開始ボタン：

まず、index.hmlファイルにcontainerという名前の基本的なコンテナdivクラスを作成し、コンテナの中央にstepsという名前のテキストコンポーネントテキストクラスを追加し、表示の固定部分「現在のステップ番号：」を書き込んで、動的変換部分を指定します。 currentStepsという名前の変数、次にcanvasという名前のキャンバスコンポーネントcanvasクラスを追加し、このキャンバスに7 * 7テーブルを描画するための参照属性refを追加し、最後に共通ボタンを追加します。クラス名はビットで、値 "を割り当てます。再起動"
```
<div class = "container"> 
    < 
        textclass = "steps">当前п数：{{currentSteps}} 
    </ text> 
    <canvas class = "canvas" ref = "canvas"> </ canvas> 
    <input type = "button" value = "重新開始" class = "bit" /> 
</ div>
```
index.cssに追加したばかりのコンポーネントのスタイルを記述します。まず、コンテナのスタイルを記述します。flex-directionはコンテナの主軸方向であり、列（上から下への垂直方向）を選択します。justify-contentはコンテナの現在の行の主軸配置形式です。中央を選択します。（アイテムはコンテナの中央にあります）、align-itemsはコンテナの現在の行の軸間位置合わせ形式であり、中央を選択し（要素は交差軸の中央にあります）、幅と高さはそれぞれピクセル単位のコンテナの幅と高さです。 450px;ステップのスタイルを記述します。font-sizeはテキストのサイズを設定し、18pxに設定し、text-alignはテキストのテキストの配置を設定し、中央を選択し（テキストは中央に配置されます）、幅と高さはそれぞれ300pxと20pxに設定します。、文字間隔はテキストの文字間隔を設定し、0pxに設定し、margin-topは上余白を設定し、10pxに設定します。キャンバスのスタイルを書き込み、幅と高さは320pxに設定し、background-colorはbackgroundに設定します。色、＃BBADA0に設定、書き込みビットスタイル、幅と高さは150pxと30pxに設定、background-colorは＃AD9D8Fに設定、font-sizeは24pxに設定、margin-topは10pxに設定
```
.container { 
    flex-direction：column; 
    justify-content：center; 
    align-items：center; 
    幅：450px; 
    高さ：450px; 
} 
.steps { 
    font-size：18px; 
    text-align：center; 
    幅：300px; 
    高さ：20px; 
    letter-spacing：0px; 
    margin-top：10px; 
} 
.canvas { 
    width：320px; 
    高さ：320px; 
    背景色：＃BBADA0; 
} 
.bit { 
    width：150px; 
    高さ：30px; 
    背景色：＃AD9D8F; 
    font-size：24px; 
    margin-top：10px; 
}
```

index.jsに書き込み、ページ内のコンポーネントがどのように相互作用するかを記述します。まず、データ関数で現在のステップ番号を0に割り当てます。

データ：{ 
        currentSteps：0、
    }

ファイルの先頭にグローバル可変量コンテキストを定義し、onReady（）関数を作成して2Dペイントツールを定義します

varコンテキスト; 

onReady（）{ 
        context = this。$ refs.canvas.getContext（ '2d'）; 
    }

白には0、黒には1を使用します。このようにして、キーに0と1、値に色を使用してCOLORSの辞書を定義し、グローバル定数辺の長さSIDELENを40、間隔MARGINを5に定義し、グローバル変数の2番目を定義できます。値がすべて0である次元配列グリッド

var grids = [[0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0 ]、
           [0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0]、
           [0、0、0、0、0、0、0]]; 

const SIDELEN = 40; 
const MARGIN = 5; 

const COLORS = { 
    "0"： "#FFFFFF"、
    "1"： "＃000000" 
}

drawGrids（）関数を作成します。まず、toString（）関数を使用して、グリッドのすべての値を文字列に変換します。FillStyleは、会社が描いた画像の背景色を表します。辞書を参照してください。fillRectは、長方形のサイズを表します。4つのパラメータがあります。 2つのパラメーターは、長方形の左上隅のx座標を指定し、2番目のパラメーターは、長方形の左上隅のy座標を指定し、3番目のパラメーターは、長方形の高さを指定し、4番目のパラメーターは、長方形の幅を指定します。最後に、onShow（）を作成し、drawGrids（）関数を呼び出します。できる

onShow（）{ 
        this.drawGrids（）; 
    }、
    drawGrids（）{ 
        for（let row = 0; row <7; row ++）{ 
            for（let column = 0; column <7; column ++）{ 
                let gridStr = grids [row] [column] .toString（）; 

                context.fillStyle = COLORS [gridStr]; 
                leftTopX = column *（MARGIN + SIDELEN）+ MARGIN; 
                leftTopY =行*（MARGIN + SIDELEN）+ MARGIN; 
                context.fillRect（leftTopX、leftTopY、SIDELEN、SIDELEN）; 
            } 
        } 
    }

実行して、開始インターフェイスのレイアウトを取得します。

質問のランダム生成とカラーブロックの反転を実現します。
次に、スポーツウォッチでカラーブロックが中断された7 * 7チェスボードをランダムに生成し、ボード上の任意のカラーブロックをクリックすると、4つのカラーブロックもランダムに生成されます。色が一緒に変化すると（エッジのカラーブロックはそれらのいくつかの色のみを変更します）、図に示すように、チェスボードの上の現在のステップ数はそれに応じて増加します。

カラーブロックをクリックしたときに対応する2次元配列の添え字を取得するには、各カラーブロックにボタンボタンを追加し、クリックイベントクリックを追加して、これらのボタンにそれぞれクラス名とクリックボタンを設定する必要があります。次に、チェッカーボードグリッドの上部にボタンを表示するには、呼び出された関数でスタックスタッククラス名設定ビットスタックを追加して、キャンバスをスタックに進め、ボタンをスタックに押し込んで、期待される効果を実現する必要があります。index.hmlコードは次のとおりです。

記事のフォローアップコンテンツと添付ファイルは、以下の元のリンクをクリックして、元のリンクを確認できます
：https：//harmonyos.51cto.com/posts/2002#bkwz

詳細については、次のWebサイトをご覧ください。

51CTOとHuaweiの公式戦略協力によって構築されたHongmengテクノロジーコミュニティ

https://harmonyos.51cto.com/#bkwz

深センHonghuiグループ：HarmonyOSウォッチゲーム-黒と白のフリップチェス

おすすめ