パックマン
有名なゲームのパックマンを作ります
このチュートリアルでは、有名なゲームのパックマンを作ります。テトリスと同じように、Google Gemini 3 Proに相談してウェブビュー内のJavaScriptでゲーム本体は作りました。App InventorからはこのJavaScriptをコントロールしています。
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Pacman"と名前を付けます。
このチュートリアルで学べること
- ウェブビューでJavaScriptを実行する方法
- ウェブビューとの値の受け渡し方法
使用コンポーネント
ボタン、ラベル、ウェブビュー、水平配置、テーブル配置、サウンド
使用ブロック
ローカル変数、もしならば
デザイン編集
Screen1のタイトルを"パックマン"にし、水平に整列するは"中央揃え"にします。
ページの最後にあるダウンロードセクションからpacman.htmlとpackun_eating.mp3, death05.mp3をダウンロードして、すべてのファイルをメディアのファイルをアップロードボタンをクリックしてアップロードします。
レイアウト パレットから 水平配置コンポーネント をビューアーに追加します。水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。名前は水平配置1になります。
ユーザーインターフェース パレットからラベルを３個を水平配置1の中に追加します。名前はそれぞれラベル1、ラベル2、ラベル3になります。
ユーザーインターフェース パレットからウェブビューを水平配置1の下に追加します。横幅は"親要素に合わせる"に設定します。名前はウェブビュー1になります。
レイアウト パレットから テーブル配置コンポーネント(テーブル配置1) をウェブビュー1の下に追加し、列と行を共に"3″に設定します。テーブル配置1の中の行1列2、行2列2、行2列3、行3列2にユーザーインターフェース パレットからボタンを1個づつ追加します。名前はボタン1、ボタン2、ボタン3、ボタン4になります。
テーブル配置1の下にユーザーインターフェース パレットからボタンを1個追加します。名前はボタン4になります。
以下のようにボタンとラベルのプロパティを設定します。
- ラベル1: テキスト="得点：″
- ラベル2: テキスト="0″
- ラベル3: テキスト="″
- ボタン1: 高さ=60ピクセル、横幅60ピクセル、テキスト="▲″
- ボタン2: 高さ=60ピクセル、横幅60ピクセル、テキスト="◀″
- ボタン3: 高さ=60ピクセル、横幅60ピクセル、テキスト="▶″
- ボタン4: 高さ=60ピクセル、横幅60ピクセル、テキスト="▼″
- ボタン5: フォントサイズ=10、テキスト="スタート″
最後にメディアパレットから、 サウンドコンポーネントを2個、ビューアーにドラッグアンドドロップします。名前はサウンド1とサウンド2になります。サウンド1のソースプロパティをpackun_eating.mp3に、サウンド2のソースプロパティをdeath05.mp3に指定します。
下図のようになります。
