テトリス
有名なゲームのテトリスを作ります
このチュートリアルでは、有名なゲームのテトリスを作ります。App Inventorだけで作った記事がありましたが随分大変そうなので、Google Gemini 2.5 Proに相談してウェブビュー内のJavaScriptでゲーム本体は作りました。App InventorからはこのJavaScriptをコントロールしています。
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"Tetris"と名前を付けます。
このチュートリアルで学べること
- ウェブビューでJavaScriptを実行する方法
- ウェブビューとの値の受け渡し方法
使用コンポーネント
ボタン、ラベル、ウェブビュー、水平配置、垂直配置
使用ブロック
特別なものは無し
デザイン編集
Screen1のタイトルを"テトリス"にします。
ページの最後にあるダウンロードセクションからtetris.htmlとover.mp3をダウンロードして、両方のファイルをファイルをアップロードボタンをクリックしてアップロードします。
レイアウト パレットから 垂直配置コンポーネント をビューアーに追加します。水平に整列するは"中央揃え"に、高さと横幅は"親要素に合わせる"に設定します。
ユーザーインターフェース パレットからウェブビューを垂直配置コンポーネントに追加します。高さと横幅は"親要素に合わせる"に設定します。名前は垂直配置1になります。
レイアウト パレットから 水平配置コンポーネント(水平配置1) を垂直配置コンポーネントに追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。水平配置1の中にユーザーインターフェース パレットからボタンを5個追加します。名前はボタン1、ボタン2、ボタン3、ボタン4になります。
ユーザーインターフェース パレットからボタンとラベルを水平配置1の下に追加します。名前はそれぞれボタン5とラベル1になります。
以下のようにボタンとラベルのプロパティを設定します。
- ボタン1: テキスト="左″
- ボタン2: テキスト="回転″
- ボタン3: テキスト="右″
- ボタン4: テキスト="下″
- ボタン5: テキスト="スタート″
- ラベル1: テキスト="″、横幅="親要素に合わせる"
最後にメディアパレットから、 サウンドコンポーネントをビューアーにドラッグアンドドロップします。ソースプロパティをover.mp3に指定します。
下図のようになります。
