Power Apps で神経衰弱を作ってみた

Power Apps で神経衰弱を作ってみました。カードが4枚しかない小さなゲームアプリですが、いろいろな関数を使用していて、アプリ作りの練習に良さそうでしたので、ここで作り方を紹介させて頂きたいと思います。

最初に画像を4枚用意します。動物のイラストを2枚。伏せたカードのイラストを1枚。背景のイラストを1枚用意します。今回作成したカードのイラストは Power Point を使って作成しています。

Power Apps を起動して、「キャンパスアプリを一から作成」を選択。電話形式のアプリを作成します。続いて、メディアからアップロードを選択。用意した4枚のカードをアップロードします。

アプリを起動したときのアクションを登録します。
ツリーから「App」を選択。プロパティ「OnStart」に下記内容を入力します。

ClearCollect(SetCard,
 {No:1,Card:inu,Flg:1},
 {No:2,Card:inu,Flg:1},
 {No:3,Card:neko,Flg:1},
 {No:4,Card:neko,Flg:1}
);

ここではClearCollectという関数を使って「SetCard」というコレクションを作成しています。コレクションとは下図のようにデータの入った箱のようなものと考えて下さい。コレクションの中にあるデータには、3種類の項目がセットされています。それぞれの項目の意味はこのようになっています。

No： カード番号
Card： 何のカードか（犬または猫）
Flg： カードの状態。初期値は1。
　　　 ※1:伏せた状態、2:めくった状態、3:ペアが見つかった状態。

このように項目がセットされたデータが4種類入った状態になっています。

続いて、ゲームをはじめる「ボタン」や、「カード」を画面に置いていきます。「挿入」から追加します。並べ方は下図を参考にして下さい。画像は最初にサンプル画像が表示されますが、今はそのままにしておきます。

各コントローラーのプロパティを設定します。「はじめる」ボタンを押すと、カードの並び順がランダムに入れ替わるように設定したいと思います。設定する箇所はプロパティ「OnSelect」です。下記の通り入力します。

ClearCollect(ShuffleCard,Shuffle(SetCard));

ここでは、Shuffleという関数を使って、コレクション「SetCard」のデータをランダムに並び替えています。並び替えた内容を元の「SetCard」には保存は出来ませんので、新規に「ShuffleCard」というコレクションを作成してセットしています。

ランダムにデータをセット出来たら、ここで指定したデータのみ取り出す方法を見ていきましょう。例えば先頭から2番目にあるデータのみ取り出すには下図のようにします。

最初にFirstNという関数で、先頭から指定した数だけデータを取り出します。カッコの中に、最初に「ShuffleCard」と入れておき、次に２とセットすると先頭から2個のデータが取得出来ます。

続いてLast関数を使って、取得したデータから一番最後にあるデータのみ取り出します。この方法を使って、指定した順番のデータのみを取り出していきます。

カードの表示の仕方について見ていきましょう。コレクション「ShuffleCard」のデータにはFlgがセットされてます。Flgが1の時は「伏せたカードのイラスト」を。Flgが1以外であれば、「猫」または「犬」の画像を表示します。「猫」「犬」の判断はデータの項目「Card」の内容を使います。Cardが「inu」なら「犬」を「neko」なら「猫」を表示します。

これを4枚の画像のそれぞれのプロパティ「Image」に下記のように設定します。

If(Last(FirstN(ShuffleCard, 1)).Flg=1,
  card,
  Last(FirstN(ShuffleCard, 1)).Card

)

FirstN関数のカッコの中にある数値は、Image1にセットする場合は1を。Image2にセットする場合は2をセットします。カードは4枚あるので、それぞれに同じようにセットします。

カードを押した時に、カードがめくれるアクションを設定したいと思います。カードを押した時のアクションはImage1～4のプロパティ「OnSelect」にセットします。

If(CountIf(ShuffleCard,Flg=2)<2,
   Patch(ShuffleCard,Last(FirstN(ShuffleCard,1)),{Flg:2});
);

ここで使用している CountIf関数 ですが、Flgが2（めくった状態）のデータの数をカウントするのに使用しています。Patch はFlgを2にする変更する関数です。この２つの関数をIf文で組合わせて、カードが1回で2枚以上めくれないようにしています。

If(CountIf(ShuffleCard,Flg=2)=2,
   If(Last(FirstN(Filter(ShuffleCard,Flg=2),1)).Card
　　　=Last(FirstN(Filter(ShuffleCard,Flg=2),2)).Card,
       UpdateIf(ShuffleCard,Flg=2,{Flg:3});
   );Set(Change,1)
);

カードをめくってペアが見つかったときはFlgを3（ペアが見つかった状態）にするアクションを設定します。これは先程のImage1～4のプロパティ「OnStart」のIf文に続けて書きます。

めくったカードがペアでなかったら、自動的にカードを伏せるアクションを設定します。これは「タイマー」というコントロールを使うことで実現出来ます。このタイマーというコントロールは、アプリが起動すると自動的に数値がカウントされるように設定出来ます。
そして、指定した数値までカウントされると自動的に0からスタートするようにループさせることが出来ます。このループする直前にアクションを実行させることも出来ます。設定する場合は下図を参考にしてみて下さ

ループの直前にアクションを実行するには、プロパティ「OnTimerEnd」をセットします。ここにはこのようにセットします。

Switch(Change,
   2,UpdateIf(ShuffleCard,Flg=2,{Flg:1});Set(Change,0);,
   1,Set(Change,2)
);

Switch関数で条件式をセットします。カードが2枚選択されたときにSet関数でChangeという変数に1をセットしています。Changeに1がセットされているとSwitch関数の中でChangeに2がセットされ、1秒待機することになります。
その後、再びSwitch関数の中では、Update関数が実行され、ペアでなかったカードはFlgが1に戻され、カードは伏せられた状態になります。変数Changeは0に戻され、Swichの処理から抜け出します。

カードが4枚めくれたら、メッセージを出してみましょう。メッセージはテキストラベルを使用します。挿入でテキストラベルを追加して、「よくできました」と設定します。テキストラベルの表示非表示の設定はプロパティ「Visible」を使用します。ここにIf文とCountIf関数を組合わせて、Flgが3のデータが4枚揃えばテキストラベルを表示するようにします。プロパティは下記の通りセットします。

If(CountIf(ShuffleCard,Flg=3)=4,true,false)

最期に背景をセットします。背景画像は「Screen1」のプロパティ「BackgroundImage」で設定出来ます。背景画像の名前は「haikei」です。入力後、画面に背景画像が表示されていれば完成です。

実際にアプリを動かすとこのようになります。

Power Apps で神経衰弱をつくってみました。https://t.co/SUnIcF0C8X#PowerApps pic.twitter.com/YmD6aTLtdn

— Masahiro Mishima (@MMishima_3) September 2, 2021

神経衰弱のアプリ作りは如何でしたでしょうか。簡単そうなアプリですが、実際に作成してみると設定する箇所はたくさんあったと思います。もちろんここで紹介した方法だけが正解ではなく、もっと簡単に作成出来る方法があるかもしれませんし、短時間で作成する方法もあるかもしれません。作り方を色々と考えてみると意外にも楽しいと思いますので、興味が湧いてきましたら、ぜひ他の方法にもトライしてみてください。

それではまたー。