75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2で遊ぶ (WhichIsMore App 1-1 )

2024-05-02 07:19:52 | 日記

Count Numbers App の変形版である WhichIsMore App - Level 1 -。

2種類の動物が16匹表示されるので、どちらが多いか、多いと思う動物の絵をタップする、というシンプルなゲーム。

今回は、計16匹だが、6X6の36匹位になると結構難しくなるかも。。。また、3つ、4つとアイコンの種類を多くしたらどうか?

実行画面:

いたってシンプル。画像をタップした時、どの画像をタップしたかはっきりしないので、少し工夫が必要かもしれない。

スクリーンのデザイン:

4x4のマス目状にImage(clickable)を配置。下部にReplayボタン。

                         .    

 

ブロック・コード:

最初にゲームの遊び方を表示。

関数randomOneOrTwoおよびsetImageを実行。

関数randomOneOrTwo:

1.  画像が2種類のみなので、そのいずれかを各ボタンに表示するため、ランダムに1と2を生成し、そのリストを変数whichListに格納する。

2.  1又は2が出た回数をそれぞれ変数totalOneおよびtotalTwoに格納。

3.  totalOneとtotalTwoが同数の場合は、変数moreNumberに0を、totalOneの方が多い場合は、変数moreNumberに1を、totalTwoの方が多い場合は、2を設定。=> このデータを基にタップした動物が多いかどうかを判別する。

関数setImage:

Image1よりImage16まで順番に、1と2がランダムに配列されている変数whichListの番号を取得して、1ならfox1.png、2ならowl1.pngの画像を割り当てて表示していく。(ほとんどが反復部分なので効率的なコーディングが可能かどうか要検討)

                                          =========== 以下省略 ==========

表示する結果をリストにしておく。

関数showResult:Image1よりImage16まで、タップした時の動作を設定する関数。

moreNumberが0の場合は、同数なので、「Same number」をウィンドウに表示。whichListのindex1の数字がmoreNumberの数字と合致していれば正解なので、「Well done」を、whichListのindex1の数字がmoreNumberを異なっていれば間違った画像のボタンをタップしたので、「Try again!」を表示。

Imageがタップされた際に上記関数showResultを実行。(Image1のみ。他省略)

なお、test用Labelを3つ設定して検証しながら作成。変数whichList(16個の1と2のランダムな組み合わせ)、変数totalOne/totalTwo(whichListのリスト中に1と2がそれぞれ何個ずつあるか)、変数moreNumber(1と2のどちらが多いか)は以下の通りとなる。1は、fox1.png、2は、owl1.png。

 

次回は、3種類の動物で6x6の36のマス目に挑戦。効率的なコーディングを考える必要がありそう。徐々にCopy&Pasteコーディングより脱してDRY(Don't repeat yourself)なブロック・コーディングができるようになればと思っているが。