ローコーディングで点灯消灯パズルを作る

かなり昔に点灯消灯パズルというのをJavaを作ったことがあったのですが、コーディングの学習を始めたばかりということもあって、半日ぐらい試行錯誤をしていたことがありました。
これをローコーディングで作ったらどれぐらいで出来るのだろう？と少し興味が湧いてきたので、Power Apps を使って試してみたいと思います。

点灯消灯パズルというのは、画面に並べられたパネルを押すと、隣り合うパネルも点灯するというルールになっていて、このルールで全てのパネルを点灯させることが出来ればプレイヤーの勝ちとなります。

早速作ってみたいと思います。Power Apps で開発画面を立ち上げて、最初に画面にボタンを挿入します。ボタンを押したときのアクション（OnSelect）はこのようにセットします。

[OnSelect]
ClearCollect(Tile,
{No:11,iro:0},{No:12,iro:0},{No:13,iro:0},
{No:21,iro:0},{No:22,iro:0},{No:23,iro:0},
{No:31,iro:0},{No:32,iro:0},{No:33,iro:0}
);

Set(StartTime,Now());

No列がパネルの番号で、1桁目が横の並び順、2桁目が縦の並び順を表しています。
Lit列は0が消灯、1が点灯です。コレクションの後に現在時間をセットする変数[StartTime]もセットしています。これはクリア時間を計るために作成します。

続いてパネルを作成します。1枚目のパネルは以下のようにします。

プロパティ[Fill]
If(LookUp(Panel,No=Rectangle_1.TabIndex).Lit=0,
  RGBA(20, 50, 80, 1),RGBA(205, 225, 255, 1))

プロパティ[OnSelect]
UpdateIf(Panel,No=Rectangle_1.TabIndex,
 {Lit:If(LookUp(Panel,No=Rectangle_1.TabIndex).Lit=0,1,0)});
UpdateIf(Panel,No=Rectangle_1.TabIndex-1,
 {Lit:If(LookUp(Panel,No=Rectangle_1.TabIndex-1).Lit=0,1,0)});
UpdateIf(Panel,No=Rectangle_1.TabIndex+1,
 {Lit:If(LookUp(Panel,No=Rectangle_1.TabIndex+1).Lit=0,1,0)});
UpdateIf(Panel,No=Rectangle_1.TabIndex-10,
 {Lit:If(LookUp(Panel,No=Rectangle_1.TabIndex-10).Lit=0,1,0)});
UpdateIf(Panel,No=Rectangle_1.TabIndex+10,
 {Lit:If(LookUp(Panel,No=Rectangle_1.TabIndex+10).Lit=0,1,0)});

Set(EndTime,Now());

パネルの名前は[Rectangle_1]とします。名前の後ろを"_1"としておくとコピーした際に、名前を"_2"、"_3"と自動的に連番で割り当ててくれます。プロパティ[Fill]ではIf文で点灯と消灯をコントロールしています。
プロパティ「タブの移動順」にパネルのNoをセットしておき、LookUpでPanelのNoと一致する番号を呼び出すときに、[Rectangle_1.TabIndex]でタブにセットした数値を呼び出します。取得した[Lit]の値が0ならば消灯、1ならば点灯という判定をして、RGBA値で四角形をそれぞれの色で塗りつぶします。

プロパティ「OnSelect」はパネルを押した時の処理です。パネルを押すとUpdate関数が動き、消灯なら点灯、点灯なら消灯します。一番下にあるSet関数ではパネルを押した時間を変数に入れています。開始ボタンのStartTimeとパネルのEndTimeの時間を比較することでクリア時間を計算することが出来ます。

隣り合うパネルは、押したパネルの値を足し引きすることで判断しています。例えば押したパネルのNoが22であれば、1を足せば右隣の23が、10を足せば下にある32を指定することが出来ます。

クリア時のポップアップを作成します。ラベルを挿入して、メッセージをセットします。もし下図のように「かかった時間」を表示したい場合は下図のようにセットをしてみて下さい。時間の計算はDateDiff関数で出来ます。

[Text]
"よくできました"&"
かかった時間 : " & DateDiff(StartTime,EndTime,Seconds) & " 秒"

最期に背景画像をセットして完成です。

実際に動かすと、このようになります。

はてなブログに投稿しました #はてなブログ #PowerApps
ローコーディングで点灯消灯パズルを作る
昔作ったアプリを Power Apps で作り直してみました。 pic.twitter.com/rwWFPEHM3o

— Masahiro Mishima (@MMishima_3) 2021年9月11日

さて、このアプリを作成するのにどれぐらいかかったのかですが、1時間ぐらいだったかなと思います。昔コーディングしたものを、改めてローコーディングで作り直すというのは意外にも楽しまめす。学習教材としても良いかもしれませんね。