JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.23.0/phaser.min.js"></script>
<div id="phaser-example"></div>
JavaScript
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
this.load.image('logo', 'https://labs.phaser.io/assets/sprites/phaser3-logo.png');
}
function create ()
{
var container = this.add.container(0, 0);
container.setSize(800, 600);
var img = this.add.image(400, 300, 'logo');
img.setDepth(3);
container.add(img);
var graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
var line = new Phaser.Geom.Line(50, 300, 750, 300);
graphics.strokeLineShape(line);
graphics.setDepth(2);
container.add(graphics);
}