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

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

»

野菜の絵柄の神経衰弱(絵合わせ)ゲームをGoogle App Inventorで作ろう、ということで、今日はその2日目です。
1日目では、カードを12枚並べてシャッフルするところまで作りました。

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

今回は、Vegetarian_openを作ります。
最初、全カード裏にして、タップすると、カードが開いて絵が出るようにします。

Designerで、Vegetarian_startを開いたら、Save Asで、「Vegetarian_open」という名前で保存してください。

Open_designer_01

今回、Designerでの変更はなく、このまま使います。

では、Blocks Editorを開いてください。

前回は、drawCardプロシージャで一気にカードに絵を描いていましたが、今回は、1つ1つタップ(エミュレータでは、クリック)されたときに、野菜の絵を描くようにします。

まずは、Screen1.Initializeと、ShuffleButton.Clickから、drawCardを外してみてください。

Open_blockseditor_01

エミュレータで確認してみると、すべてのカードが裏になっていると思います。

Open_blockseditor_02

SHUFFLEボタンを押しても、裏のままです。
(なので、何も動作してないように見えますが、シャッフルしているはずです)

では、1枚、1枚、開いていく処理を作ります。

Button1Imageを、ImageNameListに入っている絵の名前にする処理を、drawCardから、Button1.Clickに移します。

Open_blockseditor_03

同様に、Button2Button12についても、バラして、それぞれButton2.ClickButton12.Clickに処理を移します。

Open_blockseditor_04

エミュレータで、裏になっているカードをクリックしてみてください。
野菜の絵が2枚ずつ並んで出てくると思います。

Open_blockseditor_05

次に、すべてのカードを元の裏のカードに戻す処理を作ります。

resetAllImagesプロシージャを作って、Button1からのButton12Imageを「back.gif」にします。

Open_blockseditor_06

このresetAllImagesプロシージャは、ShuffleButton.Clickから呼ぶようにします。
また、アプリの起動時にもシャッフルするように、Screen1.Initializeからも、shuffleプロシージャを呼ぶ処理を追加します。

Open_blockseditor_07

drawCardプロシージャはゴミ箱に捨てちゃいましょう。

では、また、エミュレータで確認してみます。

Open_blockseditor_08_3

野菜の絵がバラバラに出てきて、

Open_blockseditor_09

SHUFFLEボタンを押すと、裏のカードに戻り、

Open_blockseditor_10

もう一度開くと、野菜の絵が変わっていれば、出来上がりです。

次回は、2枚開いて、次のカードを開こうとしたときに、開いた2枚を元の裏に戻すようにします。


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

Comment(0)

コメント

コメントを投稿する