JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.1/phaser.min.js"></script>
<div id="game-area">
</div>
JavaScript
var CANVAS_WIDTH = 600;
var CANVAS_HEIGHT = 400;
var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'game-area', { create: create, update: update});
var _platform;
var _object;
var _angle = 0;
function create(){
// set stage physics
game.stage.backgroundColor = 0x808080;
game.physics.startSystem(Phaser.Physics.arcade);
_platform = fakeSprite(220, 200, 100, 30, '#0000dd');
_object = fakeSprite(250, 160, 20, 30, '#00dd00');
game.physics.arcade.enable([_platform, _object]);
_object.body.gravity.y = 2000;
_platform.body.immovable = true;
_platform.body.velocity.x = 100;
}
function update(){
//rotate(_platform, 200, 200, 30, _angle+=2);
game.physics.arcade.collide(_platform, _object, CH_platform, null, this);
if(_platform.x > 400){
_platform.body.velocity.x = -100;
_platform.body.velocity.y = getRandomInt(-5,5)*10;
}else if(_platform.x < 100){
_platform.body.velocity.x = 100;
_platform.body.velocity.y = getRandomInt(-5,5)*10;
}
}
function getRandomInt(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function CH_platform(obj1, obj2){
null;
}
function rotate(obj, centerX, centerY, distance, angle) {
var angle_rad = Math.PI/ 180 * angle;
obj.body.x = centerX + distance * Math.cos(angle_rad);
obj.body.y = centerY + distance * Math.sin(angle_rad);
}
function fakeSprite(x, y, w, h, c) {
// create a new bitmap data object
var bmd = game.add.bitmapData(w, h);
// draw to the canvas context like normal
bmd.ctx.beginPath();
bmd.ctx.rect(0,0,w, h);
bmd.ctx.fillStyle = c;
bmd.ctx.fill();
// draw arrow pointing to right
bmd.ctx.beginPath();
bmd.ctx.moveTo(0, (h/2));
bmd.ctx.lineTo(w, (h/2)); // middle line
bmd.ctx.lineTo((w/2), (h/3)); // top arrow line
bmd.ctx.moveTo((w/2), h-(h/3));
bmd.ctx.lineTo(w, (h/2)); // bottom arrow line
// draw the lines
...