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

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

MIT App Inventor 2で遊ぶ (Slot Machine 2)

2025-02-12 07:21:52 | 日記

賭け金の設定ができるようにした。

アプリ実行のビデオ:

3つの絵柄が揃う大当たりを出して録画しようと思って何度も回してみたが、ビデオの通りダメだった。

スクリーン・デザイン:

Tabletサイズのスクリーンショットを表示

                      

ブロック・コード:

以下3つの変数を追加

変数yourInitialFund:最初の手持ち金を格納

変数yourRemainingBetAmount:賭けた後の手持ち金を格納(yourRemainingFundAmountとすべきだったかも)

変数yourBetAmount:賭けたお金を格納

画面の初期化時に最初の手持ち金を表示

「Spin」ボタンをタップした時の動作で追加した主な部分(赤黄点線部分):

手持ち金より入力した賭け金が多い場合には、「手持ち金を超過している」旨のポップアップを表示

「Stop 3」ボタンをタップした時のみ関数checkImagesを実行して絵柄をチェックすることとした

関数checkImages:

画像が小さくて見えにくいが、要するに、

1. 3つの絵柄が合致すれば=>賭け金の10倍の当たり金がもらえる=>現在の手持ち金にその当たり金がプラスされて表示される

2. 2つの絵柄が合致すれば=>賭け金の2倍の当たり金がもらえる=>現在の手持ち金にその当たり金がプラスされて表示される

3. 絵柄が合わなければ、「Try again!」が表示される

4. そして、賭け金、当たり金、現在の手持ち金が表示される

サウンドなどを挿入すればもっと雰囲気が出るかもしれない。それとバナーもか。

                             **************************************************************************

前回までのブログ:

MIT App Inventor 2で遊ぶ (Slot Machine 1)


MIT App Inventor 2で遊ぶ (Slot Machine 1)

2025-02-07 16:18:26 | 日記

まずはスロット・マシンを動かすだけの単純なもの。賭け金の設定など、次回はもう少し「賭け事」らしくしたい。

アプリ実行のビデオ:

スクリーン・デザイン:

tabletサイズでのスクリーンショット。

                         

ブロック・コード:

変数images:使用するimageのファイル・リストを格納。

3つのスロットにそれぞれシャッフルされたimageリストをセットするための変数

変数lengthOfImagesList:imageの個数を格納

画面初期化時に使用する3つのClockのintervalを100ミリ秒に念のため設定するとともにimageの個数を変数lengthOfImagesListにセット。(intervalはあらかじめデザイナーパネルの属性設定欄で設定ずみではあるが)

関数clearSymbolImages:imageブロックの画像の初期化

「Spin」ボタンをタップした時の動作:

関数clearSymbolImagesを実行してimageブロックを初期化=>3つのClockを有効に=>各スロットごとにimageリストをシャッフルしてそれぞれの変数にセット (Clockを有効にしたので3つのスロットが動き始めるが、シャッフルを先に実行するべきであった。)

各スロットごとにシャッフルされたimageを順番に表示させる。

各スロットの下に配置された「Stop1~3」ボタンをタップしたら、当該のClockを無効にしてimageを表示させる。

なお、3番目の「Stop」ボタンをタップした時は、関数checkImagesを実行して表示されている図柄から勝ち・負けを判定して結果を表示する。3つとも同じ図柄の場合は、「Perfect!」でそのほかは「Try again!」

関数checkImages:単にすべての図柄が同じかどうかをチェックしている。

 いまのところ、Stopボタンは、左から右へ順番にタップする必要があるので、任意の順番でタップできるようにしたい。また、冒頭でも触れた通り、「賭け事」の「賭ける」部分が欠如しているので追加を検討したい。

 


MIT App Inventor 2でもできるかやってみた (Small Apps 3 じゃんけんゲーム1)

2025-02-02 07:24:50 | 日記

今回は、「9 HOURS of Python Projects - From Beginner to Advanced」#3 - Rock, Paper, Scissors (Easy)。プログラミング初心者向けTutorialsには必ずあると言ってもよい「じゃんけんゲーム」。

これもシンプルなゲーム。

アプリ実行のビデオ:

スクリーン・デザイン:

左端の初期画面の中で下部に配置されているボタンのうち「3」をタップすれば右側の画面に遷移する。

                               

ブロック・コード:

初期画面で「3」をタップした時に関係するブロックのみ。

「3」をタップしたら、関数makeVAVisibleがパラメーターとして「1VA3」を受け取り実行。また、関数initButtonImageを実行して、関係のButton、Image、Labelを初期化。

3つのボタン(グー、チョキ、パー)のリストを変数buttonListに格納。

変数userPickにプレイヤーがタップしたボタンのindex (上記 buttonList) を格納。

generic componentである「when any Button.Click」eventを利用。

関数initButtonImageを実行し、関係のボタンimage、Labelなどを初期化。=>タップ(Click)されたボタンが、rockButton, scissorsButton, paperButtonのいずれかの場合、以下の通り当該ボタンのimageの背景を色付きのimageに設定する。

 >>>>> 

=>関数makecomputerChoiceを実行して、1、2、3の中から取り出したランダムな数字をindexとして変数gameImageList(下記)よりimageをcomputerChoiceImageにセットする=>関数judgeWinOrLoseを実行し勝ち負けを判定して、その判定に応じてwinOrLoseLabelに結果を表示する。

関数initButtonImageの内容

変数gameImageListに「グー、チョキ、パー」の画像ファイル名のリストを格納。

変数computerChoiceImage:コンピューターがピックアップした任意の数字にマッチする画像ファイルを格納。

変数computerPick:コンピューターがピックアップした任意の数字を格納。

関数makeComputerChoice:

1〜3の中の任意の数字を取得して変数computerPickに格納。gameImageListよりindexが変数computerPickの数字の画像ファイルを変数computerChoiceImageにセットし、同画像をcomputerChoiceImageに表示。

関数judgeWinOrLose:

以下のブロックの通り、ユーザーの選択とコンピューターの手を比較して、その結果に応じてwinOrLoseLabelに勝敗を表示。

「リセット」ボタンをタップした時の動作=>関係するButton、Image、Labelを初期化する関数initButtonImageを実行。

 

                                             *************************************************************************

前回までのブログ:

MIT App Inventor 2でもできるかやってみた  (Small Apps 2 数当てゲーム)

MIT App Inventor 2でもできるかやってみた  (Small Apps 1 略語クイズ)

 


MIT App Inventor 2でもできるかやってみた  (Small Apps 2 数当てゲーム)

2025-01-28 11:38:54 | 日記

今回は、数当てゲーム。「9 HOURS of Python Projects - From Beginner to Advanced」#2 - Number Guessing Game (Easy)

シンプルなアプリなので特に問題となるような点はなかった。

アプリ実行のビデオ:

スクリーン・デザイン:

左端:アプリの初期画面  中央・右端:初期画面で2をタップしたときに表示されるアプリの画面

     .   

       

ブロック・コード:

上限 (topOfrange) をインプットする=>0〜上限の間の数字から無作為に選択された数字を当てるゲーム。

上限の数字を格納する変数topOfRange、無作為に選択された数字を格納する変数randomNumber2を0で初期化。

関数clearVarsVA2:変数の初期化とTextBoxを空白で初期化。testLabelVA2はテスト用のLabelで、アプリ実行時には非表示とした。

アプリの初期画面で「2」のボタンをタップした時の動作を設定。

変数makeVAVisibleにパラメーター「1VA2」を渡して実行。=>explanationTextboxVA2に「Computer picks up a number between 0 and top of range number」を割り当てる。=>whatToDoTextBoxVA2に「Please input a number you think the computer has picked up from between 0 and top of the range you've specified」を割り当てる。 画面への表示は以下の通り。

                                                      .

既に前回紹介済みの部分。

パラメーターとして「1VA2」を渡し、関数makeVAVisibleを実行し、subScreen1VA2を表示する。他の画面については、初期画面も含め非表示とする。

「Let Computer Pick」ボタン (pickButtonVA2) をタップした時の動作を設定。

topOfRangeTextBoxが空白ではなければ、0〜上限(topOfRange)の間で無作為に選ばれた数字を変数randomNumber2にセット。

「Check」ボタン (checkVA2Button)をタップした時の動作を設定。=>コンピューターが生成し任意の数字 (randomNumber2)とmyGuessTextBoxに入力した数字が同じであれば、「You got it!」のやったね!メッセージを表示。=>入力した数字が任意の数字より大きい場合は、「Your guess is bigger than the computer-picked number. Make a guess again!」を表示。=>入力した数字が任意の数字より小さい場合は、「Your guess is smaller than the computer-picked number. Make a guess again!」を表示。

「Reset」ボタン (resetVA2Button) をタップした場合の動作。関数clearVarsVA2 (変数の初期化とTextBoxを空白で初期化)を実行し、topOfRangeTextBoxにカーソルを戻す。

 

                                             *************************************************************************

前回までのブログ:

MIT App Inventor 2でもできるかやってみた  (Small Apps 1 略語クイズ)

 


MIT App Inventor 2で遊ぶ -番外編1- (私の道具箱)

2025-01-28 11:38:27 | 日記

以前、MIT App Inventor 2でアプリを作成していく際に参考にしたウエッブサイト、YouTubeなどをアップしたことがある。

今回はハードも含めて「私の道具箱」というタイトルで再度まとめてみた。

1. パソコン:

    1-1 MacBook Pro 13-inch M1 2020 メモリ : 16GB(メイン)

    1-2 MacBook Pro (Mid 2012) 2.3 GHz クアッドコアIntel Core i7 メモリ:16GB (古い古いCanon printer MP470専用)

    (2012年以前は、一時期Macを使った以外は主にNEC、Gateway、Dell、日立などのWindows PCを使用。)

2. スマホ:

 2-1 モトローラmoto g53y 5G(MIT App Inventor2で作成したアプリのシミュレーション用およびアプリのインストール先) 

    2-2 アップルiPhone XR(普段使いのスマホ)

3. パソコンのアプリ:

 3-1 Affinity Designer 2(アイコンその他画像の作成・修正・追加)

 3-2 Affinity Photo(背景削除、画像の修正など)

 3-3 Numbers(Macのスプレッドシート、csvファイルの作成など-無料-)

 3-4 画面のビデオ・静止画キャプチャ(Mac同梱のアプリ-無料-)

 3-5 Davinci Resolve 19(ビデオの編集-無料-)

 3-6 テキストエディット(JSONファイルも含めテキストファイルの内容確認他-無料-)

    3-7 X-Mirage (スマホ画面をパソコンに映してくれるミラリング・アプリ。最近調子が悪い)

4. MIT App Inventor YouTube Tutorials(Tutorials Azaotlを除き、最近はほとんど視聴することもなくなったが):

    The Coding Bus  MIT App Inventorの使い方全般(componentsの使い方など)

 Kelas Kodular - Ahmad Nasril   6年ほど前のFirebaseの使い方など

    Obsidian Soft   MIT App Inventorを使ったシンプルなアプリ開発

    Tutorials Azaotl   MIT App Inventorを使ったゲーム開発(マリオ型ゲームならまずこのYouTuber)

    Tao Zilla  MIT App Inventor全般にわたってのチュートリアル。

5. ウエッブサイトのMIT App Inventor関連チュートリアルなど:

    5-1 METRIC RAT AI2  ウエッブサイトのチュートリアルNo1。これだけまとまったチュートリアルは他にないのでは。

    5-2 MIT App Inventor Community Site  ほぼすべての疑問に答えてくれる

    5-3 StackOverflow すべてとは言わないが、かなりの疑問に答えてくれる

    5-4 Artificial Intelligence with MIT App Inventor    

6. ウエッブサイトのツール(無料):

    6-1 Google ドライブ(Androidスマホで撮影した画像および画面キャプチャーのドロップ先。Mac側での受け取り先)

 6-2 JSON Formatter & Validator (JSONファイルの整形、書き出し)

    6-3 JSON Formatter (Chromeの拡張機能。Chrome上でのJSONファイルの整形)

 6-3 Audio Editor Online   (サウンド編集。主に効果サウンドのトリミング)

 6-4 Unsplash(フリー画像のみ利用) 

 6-5 いらすとや-かわいいフリー素材集-

    6-6 Firebase(限度はあるが基本的に無料のデータベース。MIT App Inventor2にも外部データベースが備わっているが、やはり外部データベースを使うならFirebaseが一番。ただし、私の知識・技能不足のためRealtiem Databaseしか使っていない。また、他にもGoogle Sheetなどをデータベース代わりに使えるが、やはりFirebaseの方がデータベースを使っているというような気がする。自己満足?)

7. MIT App Inventorに既存のcomponent以外の機能を追加するextension(無料):

    7-1 ListUtilz (リストのソートなど)

    7-2 CornerRadius (VerticalArrangementなどのcomponentの角丸生成。 注意点

    7-3 DecoJson (JSONファイルの整形。labelなどに表示する場合の整形)

    7-4 UrsAI2Popup (ポップアップメニューの生成)

    7-5 MakeViewUp (componentの回転以外にも、padding、margin、不透明度、枠等の設定ができる)

    7-6 pl.extension.Keyboard (キーボードの表示・非表示など)

8. Public API(今までに使った中で印象に残っている主なもの。基本的に無料。):

    8-1 DummyJSON (本格的なダミーのJSONファイルを取得できる。componentのテストなどに利用。)

    8-2 OpenWeather (何度も使わせてもらっているお天気情報API)

    8-3 The Movie DB(映画関係の情報ならこのサイト)

    8-4 Nobel Prizes & Laureates  (ノーベル賞の受賞者データのサイト)

    8-5 Deck of Cards (トランプカードを用意して、希望の枚数ごとに配ってくれる便利なAPI)