<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: 5px;
  background: rgba(0, 0, 0, 0.8)
}
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload: preload,
    create: create,
    update: update
  },
  loader: {
    baseURL: 'https://labs.phaser.io',
    crossOrigin: 'anonymous'
  },
  physics: {
    default: 'arcade',
    arcade: {
      debug: true,
      gravity: { y: 200 }
    }
  }
};

function preload() {
  this.load.image('logo', 'assets/sprites/phaser3-logo.png');
  this.load.image('red', 'assets/particles/red.png');
}

function create() {
  var world = this.physics.world;

  world.setFPS(100);
  
  this.events
    .off('update', world.update, world)
    .off('postupdate', world.postUpdate, world);
  
  var rt = this.add.renderTexture(0, 0, 800, 600);
  var circ = this.add.circle(400, 600, 10, 0x00FF00);
  var body = this.physics.add.existing(circ).body;
  
  /*
  this.input.on('pointermove', (pointer) => {
    var angle = Phaser.Math.Angle.BetweenPoints({x: pointer.x, y: 600}, {x: 400, y: 300})
    drawArc(this, angle, rt, circ, body);
  });
  */
  drawArc(this, 1.5, rt, circ, body);

}

function drawArc(scene, angle, rt, circ, body){
  var world = scene.physics.world;

  rt.clear();
  // body.setVelocity(100, 200);
  body.setBounce(.8, .8);
  body.setCollideWorldBounds(true);
  
   // scene.physics.velocityFromAngle(angle, 900, body.velocity);
    scene.physics.velocityFromAngle(angle * (180/Math.PI), 500, body.velocity);
  
  var max = 100
  for(var i = 0; i< max; i+=1){
    world.update(0, i);
    // circ.setAlpha((max - i)/max)
    rt.draw(circ);
    world.postUpdate();
  }
}

function update() {
  /*
  var world = this.physics.world;
  
  if (this.input.activePointer.isDown) {
    world.update(0, world._frameTimeMS);
    world.postUpdate();
  }
  */
}

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

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/@samme/colors@1.2.0/dist/colors.umd.js