オルタナティブ・ブログ > まあまあ元気になる話 >

IT業界での少し気分がアップする出来事、心持ち役立つこと、ややイイ話

パズル感覚でプログラミングが出来るApp InventorでAndroidゲームアプリを作ってみました【3日目】

»

野菜の絵柄の神経衰弱(絵合わせ)ゲームをGoogle App Inventorで作ろうシリーズも後半戦、今日は3日目です。
2日目までで、シャッフルしたカードを開くところまでができました。


  1. 1日目--Vegetarian_start:カードを12枚並べてシャッフルする
  2. 2日目--Vegetarian_open:裏返したカードを開く
  3. 3日目--Vegetarian_reverse:2枚開いて、次のカードを開くときには、開いた2枚は元に戻す
  4. 4日目--Vegetarian_final:2枚のカードの絵が一致していたら、開いたままにする

3日目の今日は、Vegetarian_reverse、開くカードを2枚までにして、それより開くときには、開いていたカードを元の裏の絵に戻します。

Designerで、Vegetarian_openを開いて、Save Asで、「Vegetarian_reverse」というProjectを作ります。

Designerの変更は今回もありません。

では、Blocks Editorを開きましょう。

各カードの状態を入れておくリスト変数cardStatListを用意します。

Reverse_blockseditor_01

カードの状態は、番号で表します。

cardStatList

番号状態
0開ける(裏)
1開いている(表)

最初は、すべて裏なので、setCardプロシージャで「0」をセットしておきます。

Reverse_blockseditor_02

開くカードの枚数をカウントする変数countも用意しましょう。ひっくり開いた枚数ではなく、次に開くのが何枚目か、という変数です。
1枚を開いていれば、countは、「2」。2枚開いていれば、次は、その2枚を裏に戻して、開くので、「1」になります。

Reverse_blockseditor_03

初期値は「0」にしておきます。本当は、最初の1枚を開くときも、「1」にしたいところですが、一番初めは元に戻すカードが無いので、他の「1」の場合と、区別しておきたいからです。

SHUFFLEボタンが押されたときも「0」にする必要がありますので、ShuffleButton.Clickでも、countに「0」をセットします。

Reverse_blockseditor_04

そうそう、cardStatListも、ShuffleButton.Clickで「0」をセットしましょう。

今度は、ひっくり返されたカードを元の裏に戻すresetImageプロシージャを作ります。
すべてのカードを元に戻すresetAllImagesプロシージャと違って、指定したカード(Button)だけ、裏の絵にします。

Reverse_blockseditor_05

buttonNoというのは、resetImageプロシージャを呼び出す側でセットされた値を受け取るための変数(引数)です。
このbuttonNoを使って、どのカード(Button)かを判定して、「back.gif」をセットします。
同様に、Button2~Button12の場合の処理もresetImageプロシージャに加えます。

Reverse_blockseditor_06

次に、countClickプロシージャを作ります。
このプロシージャでは、次の処理を行います。

  • どの位置のカード(Button)がタップされたのか、cardNoを受け取ります。
  • cardNoで指定されたカードの状態cardStatListをチェック、「0」だったら、以下の処理を行い、それ以外であれば、何もしません。
  • cardNoで指定されたカードの状態cardStatListを「1」にします。
  • 以下の処理は、countがいくつか、によって異なります。
  • これから開こうとする枚数が1枚目(countが「1」)のとき、resetImageプロシージャを2回呼んで、開いているカードを元に戻します。どのカードが開いているかは、card1card2で指定します。このcard1card2は、それぞれ、1枚目に開いたカードの番号、2枚目に開いたカードの番号が入っています。(初期値を「1」としていますが、初期値のまま、resetImageプロシージャに渡すことはありません) カードを元に戻したら、新たにcard1に、これから開こうとするcardNoをセットし、countを「2」に進めます。
  • これから開こうとする枚数が2枚目(countが「2」)のとき、card2に、これから開こうとするcardNoをセットし、countを「1」にします。 また、カードの状態cardStatListを「0」、つまり、開けるカードにしておきます。
  • それ以外(countが「0」のとき)は、最初なので、戻すカードはなく、card1に、これから開こうとするcardNoをセットし、countを「2」に進めます。

Reverse_blockseditor_07

countClickプロシージャを呼び出すのは、Button1.ClickButton12.Clickです。
呼び出す時に、それぞれ、自身の番号を渡します。

Reverse_blockseditor_08

では、エミュレータで動きを確認してみましょう。

Reverse_blockseditor_09

2枚開いたら、

Reverse_blockseditor_10

次のカードを開くときに、今まで開いていたカードは元に戻ります。

Reverse_blockseditor_11

また、2枚開いたら、

Reverse_blockseditor_12

今開いているカードを次の1枚とすることもできます。

Reverse_blockseditor_13

おっ、2つの絵が、一致しましたね。
でも、まだ、この2つが同じ絵だと判定する処理はありません。
次を開いたら、今開いているカードは閉じてしまいます。

次回は、いよいよ最終回。
2枚のカードの絵が一致していたら、開いたままにするようにします。

=============================
App Inventor関連

Comment(0)