<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: 5px;
  top: 5px;
}
// console.clear();

var player;
var platforms;
var cursors;
var movingPlatform;
var graphics;

function preload() {
  this.load.image("sky", "src/games/firstgame/assets/sky.png");
  this.load.image("ground", "src/games/firstgame/assets/platform.png");
  this.load.image("star", "src/games/firstgame/assets/star.png");
  this.load.spritesheet("dude", "src/games/firstgame/assets/dude.png", {
    frameWidth: 32,
    frameHeight: 48
  });
}

function create() {
  // this.add.image(400, 300, 'sky');

  platforms = this.physics.add.staticGroup();

  platforms.create(400, 568, "ground").setScale(2).refreshBody();

  // Walls
  platforms.create(0, 450, "ground").setScale(0.1, 10).refreshBody();
  platforms.create(800, 450, "ground").setScale(0.1, 10).refreshBody();

  movingPlatform = this.physics.add.image(400, 400, "ground");

  movingPlatform.setImmovable(true);
  movingPlatform.body.allowGravity = false;
  movingPlatform.setVelocityX(50);

  player = this.physics.add.sprite(100, 150, "dude");

  player.setBounce(0.2);
  player.setCollideWorldBounds(true);
  // Player body `drag` is set conditionally, in update().
  
  graphics = this.add.graphics();

  this.anims.create({
    key: "left",
    frames: this.anims.generateFrameNumbers("dude", { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
  });

  this.anims.create({
    key: "turn",
    frames: [{ key: "dude", frame: 4 }],
    frameRate: 20
  });

  this.anims.create({
    key: "right",
    frames: this.anims.generateFrameNumbers("dude", { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
  });

  cursors = this.input.keyboard.createCursorKeys();

  this.physics.add.collider(player, platforms);
  this.physics.add.collider(player, movingPlatform);
}

function update() {
  // `touching` includes the moving platform (dynamic body)
  player.setDragX( player.body.touching.down ? 640 : 0 );
  player.setDragY( player.body.onWall() ? 320 : 0 );
  
  if (this.physics.world.drawDebug) {
    drawDrag();
  }

  if (cursors.left.isDown) {
    player.setVelocityX(-160);

    player.anims.play("left", true);
  } else if (cursors.right.isDown) {
    player.setVelocityX(160);

    player.anims.play("right", true);
  }

  if (cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-320);
  }

  if (player.body.velocity.x === 0) {
    player.anims.play("turn", true);
  }

  if (movingPlatform.x >= 500) {
    movingPlatform.setVelocityX(-50);
  } else if (movingPlatform.x <= 300) {
    movingPlatform.setVelocityX(50);
  }
}

function drawDrag () {
  var body = player.body;
    
  var dx = body.useDamping ?
      -body.velocity.x * (1 - body.drag.x) : 
      -Math.sign(body.velocity.x) * body.drag.x;
  
  var dy = body.useDamping ?
      -body.velocity.y * (1 - body.drag.y) : 
      -Math.sign(body.velocity.y) * body.drag.y;
  
  graphics
    .clear()
    .lineStyle(1, body.allowDrag ? 0xff9900 : 0x666666)
    .lineBetween(
      body.center.x,
      body.center.y,
      body.center.x + dx,
      body.center.y + dy
    );
}

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

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: "phaser-example",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 300 },
      debug: true
    }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  },
  plugins: {
    scene: [
      // <https://github.com/samme/phaser-plugin-debug-body-colors>
      {
        key: "DebugBodyColorsPlugin",
        plugin: PhaserDebugBodyColorsPlugin,
        mapping: "debugBodyColors"
      }
    ]
  }
};

var game = 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.23.0/dist/phaser.js
  2. https://cdn.jsdelivr.net/npm/phaser-plugin-debug-body-colors@2.0.2/dist/PhaserDebugBodyColorsPlugin.js
  3. https://cdn.jsdelivr.net/npm/@samme/colors@1.2.0/dist/colors.umd.js