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

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

»

野菜の絵柄の神経衰弱(絵合わせ)ゲームをGoogle App Inventorで作ってみました。

タップすると、カードがひっくり返って絵が出ます。
絵が野菜ばかりなので、Vegetarian ベジタリアンと名付けました。

では、早速、一緒に作ってみましょう。
まだ、App Inventorがどんなものか知らない方は、以前のエントリーを参考にして下さい。

素人でもレゴを組み立てるようにAndroidアプリが開発できるGoogle「App Inventor」、その実力は?(2010/10/14)

この時点では、事前に申請しないと使えませんでしたが、現在では、一般公開されています。(About - App Inventor for Android
また、エミュレータが用意されて、実機(Android端末)がなくても楽しめるようになっています。

一度に全部やるのは大変なので、段階的に進めますね。

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

初日の今日は、Vegetarian_startを作ります。

Designerで、新しく「Vegetarian_start」という名前でProjectを作ったら、
Screen1Titleを「Vegetarian」に変更して、スタートです。

絵は7種類あります。野菜の絵が6つとカードの裏の絵です。

Back Img1 Img2 Img3
back.gif img1.gif img2.gif img3.gif
Img4 Img5 Img6
img4.gif img5.gif img6.gif

まず、これらの絵をPCにダウンロードしてください。

そして、これらをアップロードします。
Designerの画面右下のMediaAddボタンを押して、先ほどのgifファイルを一つずつ選択してください。

コンポーネントは次のものを使います。

Component Type Palette Group 使い方
TableArrangement Screen Arrangement カード(Button)を3行4列に並べるため
Button Basic 12個用意。カードとして使う
Button Basic SHUFFLEボタンとして使う

では、これらのコンポーネントを配置し、プロパティ(Properties)をセットしていきましょう。

  • TableArrangement1ColumnsRowsをそれぞれ「4」,「3」に変更(3行4列にカードを並べるため)
  • Button1~Button12TableArrangement1の中に、4行3列になるように配置します。Imageを「back.gif」、Textを空欄に変更します。
  • Button13TableArrangement1の下に配置し、名前をRenameボタンを押して「ShuffleButton」に、Textを「SHUFFLE」にします。

Start_designer_01

これで、Designerでの作業は終了です。
Blocks Editor is openボタンを押して、Blocks Editorを起動させましょう。

最初に、リスト変数を用意します。
イメージファイルの名前を入れておくImageListと、1~12のカードにどの番号の絵(イメージファイル名)が入っているかのImageNameListです。

Start_blockseditor_01

ImageList

Img1 Img2 Img3 Img4 Img5 Img6
絵の番号 1 2 3 4 5 6

ImageNameListは、まだ、中身がありません。
setCardというプロシージャ(procedure)を作って、1番の絵(img1.gif), 1番の絵(img1.gif), 2番の絵(img2.gif), 2番の絵(img2.gif),・・・6番の絵(img6.gif), 6番の絵(img6.gif)というように、2個ずつ、計12個の値をセットします。

Start_blockseditor_02

次は、カードを野菜の絵にします。
drawCardプロシージャを作って、Button1からのButton12Imageを順番にImageNameListに入っている絵の名前にします。

Start_blockseditor_03

Screen1.Initializeにアプリ起動時の処理を記述して、

Start_blockseditor_04

エミュレータで確認してみましょう。
Blocks Editorの上部メニューにあるNew emulatorボタンを押して、エミュレータを起動させたら、Connect to Deviceボタンで今、起動したエミュレータを選択します。

Start_emulator_01

Start_emulator_02

こんな風に表示されているはずです。

Start_blockseditor_05

絵が2枚ずつ並んでいます。
これを、shuffleプロシージャを作って、シャッフルします。
ここでは、ImageNameListの中身を1から順番に、乱数で決まった順番のカードと入れ替えていきます。

Start_blockseditor_06

最後に、SHUFFLEボタンが押されたときの処理をShuffleButton.Clickに記述して、初日は完成です。

Start_blockseditor_07

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

Start_blockseditor_08

SHUFFLEボタンを押すと、その度に、カードがシャッフルされるようになりました。
でも、せっかく、ボタン1つ1つに、カードの裏の絵(back.gif)を設定したのに、カードは全部、野菜の絵(表)ですね。
そこで、次回は一歩進み、最初は全カードを裏にして、タップすると、カードがひっくり返って絵が出るようにします。

=============================

App Inventor関連

Comment(0)

コメント

コメントを投稿する