フレームワークを整える
中級Phaser を整える。
＝ Scene に図形を置いて create/update で動かす——2D ゲームエンジンをブラウザ内で試す
サンプルコード（クリックでエディタに挿入）
JS EDITOR Phaser 4.2.1
Ctrl/⌘ + Enter で実行
PREVIEW
CONSOLE
「▶ 実行」を押すとここにログが出ます。キー入力を試すサンプルは、先にプレビュー内をクリックしてください。
このページについて
- ライブラリは
cdn.jsdelivr.netから読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。 - プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。画像アセットは使わず、図形（矩形・円・テキスト）だけで組んでいます。
- 「停止」は iframe を破棄して作り直します。update() ループを使うサンプルはゲームが動き続けるので、書き換える前に一度「停止」を押すか、そのまま「▶ 実行」で作り直してください。
- キー入力のサンプルは、先にプレビュー内をクリックして iframe にフォーカスを移してから矢印キーを押してください。
このツールについて
Phaser は Scene（画面の単位）に図形やテキストを置き、create() で初期化・update() で毎フレーム更新する2Dゲームエンジンです。物理エンジンを使わない簡易な当たり判定も含めて体験できます。
左にコード、右にゲーム画面。Phaser の Scene に図形を置き、矢印キーで動かしたり当たり判定やスコアを試せます。画像は使わず図形だけ。
主な機能
- 4サンプル（シーンと図形・キー入力・当たり判定・スコア表示）
- 画像アセット不使用・図形描画のみ
- 左エディタ／右プレビュー＋console・停止ボタン
- Phaser は cdn.jsdelivr.net から初回のみ・送信ゼロ
よくある質問
Q. 画像を使ったゲームは作れますか？
A. このページでは画像アセットは扱わず、矩形・円・テキストなど図形の描画だけで組みます（外部ファイルの取得を避けるため）。
Q. 矢印キーを押しても四角が動きません。
A. 先にプレビュー内（ゲーム画面）を一度クリックしてフォーカスを移してから矢印キーを押してください。
Q. 当たり判定に物理エンジンは使っていますか？
A. 使っていません。Phaser.Geom.Intersects で矩形の範囲を毎フレーム比較する簡易判定です。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
