JSFiddle - React, Tailwind, and code Playground
JavaScript
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'gameArea', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('space', 'assets/skies/deep-space.jpg');
game.load.image('bullet', 'assets/games/asteroids/bullets.png');
game.load.image('ship', 'assets/ball48.png');
game.load.image('enemy', 'assets/ball32.png');
}
var sprite;
var ship;
var cursors;
function create() {
// This will run in Canvas mode, so let's gain a little speed and display
game.renderer.clearBeforeRender = true;
game.renderer.roundPixels = true;
// We need arcade physics
game.physics.startSystem(Phaser.Physics.ARCADE);
// A spacey background
game.add.tileSprite(0, 0, game.width, game.height, 'space');
// Our player ship
sprite = game.add.sprite(0, 0, 'ship');
sprite.anchor.set(0.5);
// and its physics settings
game.physics.enable(sprite, Phaser.Physics.ARCADE);
//sprite.body.velocity.setTo(10 + Math.random() * 40, 10 + Math.random() * 40);
//IMPORTANT: SPRITE.BODY.DRAG IS THE REASON FOR UNCONTINUOUS MOVEMENT IN SAME DIRECTION RIGHT BEFORE STOPPING
sprite.body.drag.set(25);
sprite.body.maxVelocity.set(175);
sprite.body.collideWorldBounds = true;
var enemy = game.add.sprite(300, 0, 'enemy');
var enemy2 = game.add.sprite(75, 75, 'enemy');
var enemy3 = game.add.sprite(0, 300, 'enemy');
game.physics.arcade.enable(enemy);
game.physics.arcade.enable(enemy2);
game.physics.arcade.enable(enemy3);
enemy.body.velocity.setTo(100, 100);
enemy2.body.velocity.setTo(200, 200);
enemy3.body.velocity.setTo(300, 300);
enemy.body.bounce.set(1.005);
enemy2.body.bounce.set(1.005);
enemy3.body.bounce.set(1.005);
enemy.body.collideWorldBounds = true;
enemy2.body.collideWorldBounds = true;
enemy3.body.collideWorldBounds = true;
// Game input
cursors =...