<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);
This Pen doesn't use any external CSS resources.