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