HTMLDrop.

Phaser starter

Phaser 3 games: a scene with physics and particles, from the official tutorial.

Open in editor Free. No install, no sign-up.
  • phaser

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Phaser starter</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3/dist/phaser.min.js"></script>
  </head>
  <body></body>
</html>

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
}

// The Phaser hello world: a bouncing logo with a particle trail.
class Example extends Phaser.Scene {
  preload() {
    this.load.setBaseURL("https://labs.phaser.io");
    this.load.image("sky", "assets/skies/space3.png");
    this.load.image("logo", "assets/sprites/phaser3-logo.png");
    this.load.image("red", "assets/particles/red.png");
  }

  create() {
    this.add.image(400, 300, "sky");
    const particles = this.add.particles(0, 0, "red", {
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: "ADD",
    });
    const logo = this.physics.add.image(400, 100, "logo");
    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);
    particles.startFollow(logo);
  }
}

new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH },
  scene: Example,
  physics: { default: "arcade", arcade: { gravity: { y: 200 } } },
});

Questions

Can I use Phaser without a build step?

Yes. This starter loads Phaser straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a Phaser project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my Phaser demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits