<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();

  // Icy platform
  platforms.create(300, 450, 'ground')
    .setData('drag', new Phaser.Math.Vector2(40, 0))
    .setTintFill(0xccccff);

  // Sticky platform
  platforms.create(500, 300, 'ground')
    .setData('drag', new Phaser.Math.Vector2(1280, 0))
    .setTintFill(0xff0000);

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

  player.setBounce(0.2);
  player.setCollideWorldBounds(true);

  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, function (_player, platform) {
    var drag = platform.getData('drag');

    if (drag) {
      player.body.drag.copy(drag);
    } else {
      player.setDrag(320, 0);
    }
  });
}

function update () {
  // Player drag was already set in collider callback, if colliding.
  if (player.body.blocked.none) {
    player.setDrag(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);
  }
}

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