もぐらたたきゲーム

簡単なゲームを作りましょう

[プロジェクト]メニューから[プロジェクトを新規作成]を選択し、"MoleMash"と名前を付けます。

デザイン編集

Screen1のタイトルを"もぐらたたき"にします。モグラの画像をここをクリックしてパソコンにダウンロードします。

コンポーネントを追加

描画とアニメーションパレットから、 キャンバスコンポーネントをビューアーにドラッグアンドドロップします。その下にユーザーインターフェースパレットから、ラベルボタンをドラッグアンドドロップします。

キャンバス1のプロパティの高さと幅を300ピクセルに変更し、ラベルは名前を"点数"にテキストを"点数:0″に設定します。ボタンは名前を"リセットボタン"にテキストを"リセット"に設定します。

さらにメディアパレットから、 コンポーネントをビューアーにドラッグアンドドロップします。コンポーネントを使ってモグラがたたかれた時にスマホをバイブレートさせます。

タイマーコンポーネントを追加

モグラは定期的にジャンプして位置を変えます。このためにセンサーパレットのタイマーコンポーネントを使います。タイマーコンポーネントをビューアーにドラッグアンドドロップしてください。タイマーイベント間隔を700ミリ秒に設定してこの間隔でモグラが動くようにします。タイマー有効がチェックされていることも確認してください。

イメージスプライトを追加

イメージスプライトを使ってモグラを描画します。イメージスプライトはキャンバスの中を移動する画像です。イメージスプライトには速さ、ヘディング(進む方向)、描画間隔を指定でき、タッチされたかを検出することもできます。

描画とアニメーションパレットから、 イメージスプライトコンポーネントをキャンバス1にドラッグアンドドロップして名前をモグラにします。引き続きプロパティを以下のように設定してください。

  • 画像:先ほどダウンロードしたmole.pngをアップロードして使います。
  • 有効:チェック
  • 描画間隔(ミリ秒):使わないので500のままにしてください
  • ヘディング:0、これも使いません
  • 速さ:0.0、これも使いません
  • 見える:チェック
  • 高さ、幅:自動

ブロック編集機能を使用したプログラミング

アプリの動作をプログラミングするには、 ブロック編集機能にアクセスする必要があります。 画面右上のブロック編集ボタンをクリックしてブロック編集機能に行きます。

手続きの追加

繰り返して使用するコードを手続きとして定義することができます。ここでは以下の二つの手続きを作ります。

  • モグラを動かす:キャンバス上ランダムな場所にモグラを動かします。
  • 点数更新:点数を更新します。

モグラを動かす

組み込みブロック内の手続きをクリックして"渡す 手続き 実行"ブロックをドラッグアンドドロップし、"手続き"を"モグラを動かす"に変更します。ブロック編集機能の左側にあるモグラパネルをクリックして開き、"設定 モグラ X"と"設定 モグラ Y"を実行の横にはめ込みます。さらに下図にあるようにランダム分数や掛け算、引き算などのブロックを組み込みブロック内の数学からドラッグしてきて組み上げます。キャンバス1の高さ、幅、モグラの高さ、幅も使用します。

点数更新

まず、点数を保持するためにグローバル変数を定義します。組み込みブロック内の変数をクリックして"グローバル変数 変数名 を次の値で初期化"ブロックをドラッグアンドドロップし、変数名を"点数"に変更した後、組み込みブロック内の数学から青い0ブロックをドラッグしてはめ込みます。次に、組み込みブロック内の手続きをクリックして"渡す 手続き 実行"ブロックをドラッグアンドドロップし、"手続き"を"点数更新"に変更します。ブロック編集機能の左側にある点数パネルをクリックして開き、"設定 点数 テキスト"を実行の横にはめ込んだ後、組み込みブロック内のテキストから"結合する"ブロックをドラッグして空白テキストと"取得 グローバル 点数"を使って下図のように組み上げます。

タイマーの追加

タイマーを使ってモグラが動き続けるようにします。ブロック編集機能の左側にあるタイマー1パネルをクリックして開き、"いつもタイマー1.タイマー 実行する"をドラッグアンドドロップし、組み込みブロック内の手続きをクリックして"呼び出す モグラを動かす“ブロックを下図のようにはめ込みます。

モグラ.タッチされたらハンドラーの追加

モグラがタッチされたら点数を1点増やし、新しい点数を表示します。このためにブロック編集機能の左側にあるモグラパネルをクリックして開き、"いつもモグラ.タッチされたら 実行する"をドラッグアンドドロップします。そして下図のようにグローバル 点数を1増やす、音1を使ってバイブレートする、"呼び出す 点数更新“、"呼び出す モグラを動かす“、をはめ込みます。

点数リセット

点数をリセットするには下図のように組み上げます。

 
これで完成です。スマホでテストしてください。面白いですか?
 

ソースコードのダウンロード

App Inventorでこのサンプルを使用したい場合は、 ソースコードをコンピュータにダウンロードしてからApp Inventorを開き、[ プロジェクト ]をクリックして[ローカルコンピュータからプロジェクト(.aia)をインポート]を選択し、ソースコードを選択してインポートしてください。

チュートリアル