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

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

MIT App Inventorで遊ぶ (ひとりビンゴ その1)

2024-04-09 07:47:20 | 日記

ビンゴを作ってみた。ビンゴ・マシンがちょっと変だけど、感じは出しているつもり。ビンゴカードは、100均で売っているものを使用する前提。。。

このアプリは、正に「力づく」で無理やり作ったという感じが強いもの。まず、75個のボールを作り、後はひたすらブロックを作っていった。もう少し効率的に作る方法があったのではないかと思う。「骨折り損のくたびれ儲け」とは、このアプリのことを言うのではないかと思う。

今回は、基本的な動作の確認。と言っても、これ以上どうしたいと言うアイデアは、今のところない。

実行画面:

スクリーンのデザイン:

右側のcomponents リストに赤枠で囲んだ「HorizontalArrangement」があるが、これが、7つあり、それぞれのHorizontalArrangementには、12個のLabel(最後は3個で計75個)が設定されている。最初のLabelである selectedLabel1 が見える。

non-visible component として Clockがある。Clock1 は、ビンゴマシンの内側を回転させるために使用、Clock2 はビンゴのボールを上から下に移動させる際に使用。

           

 

ブロック・コード:

1. 変数allNumbersList => ビンゴもの全数字(1〜75)を格納しておく変数。関数make75numbersで数字のリストを作成。

2. ビンゴマシンの内側と外側のリングのサイズ、位置を設定。selectedBallSprite(ビンゴの番号が付されたボール)の初期位置を設定。z座標値(0.9)により内側のリングの裏に設置(z座標値はDesigner画面で設定=>下図。デフォルト値は当然1.0)。

3. 初期画面で上記関数を実行。(selectedBallSpriteのY座標値の設定がダブっていた)

4. Startボタンをタップすると、Clock1を実行。selectedBallSpriteのY座標値を初期値(ビンゴマシンの裏側の見えない位置)に戻す。

5. Clock1の動作内容。内側のリングをClock1のTimeInterval (50ミリ秒) に合わせて10度ずつ時計回り(-10)に回転させる。-360まできたら、0に戻し反復させる。

6. selectedNum => ビンゴの番号、selectedNumList => 出た番号を格納。

7. 全ての番号(初期は1から75)が入っている allNumbersList よりランダムに番号を選択し、selectedNumに割り当てる。

選択された番号を allNumbersList より削除し、この番号をselectedNumListに追加する。

ボール(selectedBallSprite)の画像のファイル名を作成する(例えば、その番号が 6 なら、6.png のように)。

Clock2 を実行し、ボールのY座標300から360へ20ずつ下方へ下げていく。(下のClock2の component )

関数makeSelectedDimを実行し、当該Labelの文字色を薄グレーに変更する。

selectedNumListに格納されている数字の数が75個であれば、ゲームは終了。Notifier1を表示し、ゲームオーバーを告げる。

8. リセットボタンの動作設定。各 component及び変数をブランク、又は初期値に戻す。

9. <以下は、画面下半分に配置した数字のLabelに関する関数(ちょっと順序が逆転しているが)>

数字のLabelの文字色を元の黒色に戻す関数 makeSelectedBlack。リセットボタンをタップした時に実行。

selectedLabel75まであり。(以下同じ)

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

該当の数字が出れば、数字の文字色を薄グレーに変える関数 makeSelectedDim                       

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

数字Labelの幅、高さを設定する関数 setLabels。画面の初期化時に実行。

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