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

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

MIT App Inventorで遊ぶ (Count Numbers App 1)

2024-03-24 09:22:12 | 日記

 ちょっと趣きを変えて。"Count Numbers"というアプリ(英語版)。ランダムに配置した番号を順番にタップしていくという極めてシンプルなアプリ。と言っても、感じがわからないので、まずは実行画面から。

今回は、1つずつ増えていく数字のシークエンスであるが、飛び越す数を増やしたり、また、数字の上限を1000にしてみたりと色々バリエーションは考えられる。番号の代わりにキャラクターやイラスト、アイコンなどを表示して何かアプリができないか、考えてみたい。また、時間の要素(例えば、制限時間)も加えたらもう少しゲームらしくなるかもしれない。

実行画面:

スクリーンのデザイン:

スクリーンのデザインはいたってシンプル。2つのボタンと16個のLabelをマス目状に配置しただけ。

non-visible componentsとして、extensionのListUtilzとNotifierを使用。

 

プログラム(ブロック):

1. Designer Panelで、各ボタンの幅をscreenの10%に設定したので、高さをボタンの幅と同じサイズに設定。(Designer Panelで高さも設定しておけばこんなにブロックを重ねなくてもいいのだが。割合で設定することによりデバイスのサイズでデザインが変わることもないらしい。このような設定を推奨するYouTuberもいるし。)

NotifierのShowMessageDialogブロックを使って、アプリを実行した時に遊び方が表示されるようにした。

2. 変数の設定。

startingNumber => 1〜99までの数字の中から16個のシークエンスとなる数字を使うが、その最初の番号(ランダムに選択)を格納。

originalList => startingNumberより始まる16個の番号をlistとして格納。

shuffledNumber => originalListの番号をシャッフルしたlist

selectedNumber => タップしたボタンの番号を格納

selectedNumbersList => 16個の番号の一番小さな番号より順番にボタンをタップしていくが、正しくタップされた番号を格納していくlist

3. シャッフルされた番号のリストのindex 1より順番に16個のButtonに表示させる。途中省略。

4. リセットボタンの設定。ボタンに表示させた番号を消去し、全て有効にする(背景色とボタンの色が濃くなる)

5. ここからボタンの動作設定になる。16個のボタンに相当する16個のブロックがあるが、ボタン1のみ表示(他省略)。

最初にタップしたボタンの番号(tappedNumber)が、シャッフル前の番号リスト(originalList)の1番目であれば、番号リストの変数(originalListIndex)に1を加える。

そのボタンの番号を選択済み番号リスト(selectedNumbersList )に追加。そのボタンは無効とする。

もし、順番通りの番号がタップされなかった場合は、Notifier「Wrong number」が表示される。

そして、選択済み番号リストのアイテム数が16個になったら、ゲームオーバーで、終了のNotifierが表示される。

下の方に、testLabelに選択済み番号リスト(selectedNumbersList )を表示させるようになっているが、これは確認用のもので、本番では非表示にした。もし、Count Numbers 2を作るなら、体裁を整えて表示させたい。