Phaser を整える。

＝ Scene に図形を置いて create/update で動かす——2D ゲームエンジンをブラウザ内で試す

Phaser が初めての方は、先にそもそも Phaser とは・どんな場面で使うかをどうぞ。

サンプルコード（クリックでエディタに挿入）

JS EDITOR Phaser 4.2.1

Ctrl/⌘ + Enter で実行

PREVIEW

コンソール

「▶ 実行」を押すとここにログが出ます。キー入力を試すサンプルは、先にプレビュー内をクリックしてください。

そもそも Phaser とは

ブラウザで動く2Dゲームを作るための、道具一式。

Phaser は、ブラウザで遊べる 2D ゲームを作るための JavaScript フレームワークです。画面の描画・キー入力やタッチの受け取り・当たり判定・アニメーション・音といった、ゲームに必要な機能がひとまとめに入っています。

Richard Davey 氏らによって開発されてきたオープンソースです。Canvas や WebGL を使って描くので、アプリのインストールなしに、スマホにもパソコンにも同じゲームを届けられます。絵を描く p5.js や 3D の Three.js と違い、「ゲームの進行」を支える仕組みが中心です。

どこで・どんな場面で使うか

ブラウザで遊べるミニゲーム

URL を開くだけで遊べるので、配布やアップデートの手間が少なくて済みます。
キャンペーン・広告のゲーム

企業サイトやイベントの告知に、遊べる仕掛けとして組み込まれることがあります。
教育・ゲームジャム・プログラミング学習

動くゲームを短時間で作れるため、学習の題材として使いやすい道具です。
ゲームの試作

アイデアを最小限の形で動かして、面白いかどうかを早く確かめるのに向いています。
キャラクターの動きや当たり判定を学ぶとき

ゲーム特有の考え方を、実際に動かしながら身につけられます。

向いている場面・向いていない場面

向いている：インストール不要で遊べる2Dゲーム。URL を共有するだけで届けられます。
向いている：ゲームの基本機能を一から作りたくないとき。描画・入力・当たり判定が最初から揃っているので、中身に集中できます。
向いていない：大規模な3Dゲームや、高度な描画が必要なもの。そうした用途には、専用のゲームエンジンや3D 向けの道具のほうが適しています。

上の練習場でサンプルを動かし、速さや位置を変えて、ゲームがどう変わるか試してみてください。

このページについて

ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。画像アセットは使わず、図形（矩形・円・テキスト）だけで組んでいます。
「停止」は iframe を破棄して作り直します。update() ループを使うサンプルはゲームが動き続けるので、書き換える前に一度「停止」を押すか、そのまま「▶ 実行」で作り直してください。
キー入力のサンプルは、先にプレビュー内をクリックして iframe にフォーカスを移してから矢印キーを押してください。