<footer><div id=version></div></footer>
html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #111;
  color: #eee;
  font: caption;
}

#version {
  position: absolute;
  left: 0;
  top: 0;
  padding: 1px 2px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
/* global colors, Phaser, PhaserPluginInspector, Tweakpane */

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: "phaser-example",
  physics: {
    default: "arcade",
    arcade: { debug: true, fps: 300, timeScale: 1 }
  },
  scene: { preload, create, update },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  plugins: PhaserPluginInspector.DefaultPluginsConfig
};

let blocks, clowns, cursor;

function preload() {
  this.load.image("block", "assets/sprites/32x32.png");
  this.load.image("clown", "assets/sprites/clown.png");
  this.load.image("cursor", "assets/sprites/flower-exo.png");
  this.load.scenePlugin(
    "PhaserDebugBodyColorsPlugin",
    "https://cdn.jsdelivr.net/npm/phaser-plugin-debug-body-colors@3.0.0"
  );
}

function create() {
  blocks = this.physics.add.staticGroup({
    key: "block",
    frameQuantity: 26,
    setXY: { x: 0, y: 300, stepX: 32 }
  });
  clowns = this.physics.add.group({
    key: "clown",
    frameQuantity: 50,
    setXY: { x: 0, y: 150, stepX: 40, stepY: 6 }
  });
  cursor = this.add.image(400, 450, "cursor");

  this.physics.add.collider(clowns);
  this.physics.add.collider(clowns, blocks);
}

function update() {
  const { activePointer } = this.input;
  const { moveToObject } = this.physics;

  if (activePointer.active) {
    cursor.copyPosition(activePointer);
  }

  updateClowns.call(this);
}

function updateClowns() {
  for (const clown of clowns.getChildren()) {
    clown.body.pushable = clown.body.blocked.none;

    if (clown.body.blocked.none && clown.body.touching.none) {
      this.physics.moveToObject(clown, cursor, 300);
    }
  }
}

document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;

new Phaser.Game(config);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.js
  2. https://cdnjs.cloudflare.com/ajax/libs/colors/3.0.0/js/colors.js
  3. https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.js
  4. https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@1.5.0/dist/phaser-plugin-inspector.umd.js