JSFiddle - React, Tailwind, and code Playground

by Amadeus Demarzi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.2.1/phaser.js"></script>

JavaScript

var Reflection = function(game, x, y, width, height, group){
	this._texture = game.make.renderTexture(width, height);
	Phaser.Sprite.call(this, game, x, y, this._texture);
	this._group = group;
	this.scale.y = -1;
	this.alpha = 0.4;
};

Reflection.prototype = Object.create(Phaser.Sprite.prototype);
Reflection.prototype.constructor = Reflection;

Reflection.prototype.updateMirror = function(){
	this._texture.renderXY(this._group, 0, 0, true);
};

var Scene = {
    preload: function(game){
        game.load.crossOrigin = 'Anonymous';
        game.load.image('bg-gradient', 'http://fun.amadeusamade.us/phaser/bg-gradient.png?1');
        game.load.image('bg-buildings', 'http://fun.amadeusamade.us/phaser/bg-buildings.png?1');
        game.load.image('buildings', 'http://fun.amadeusamade.us/phaser/buildings.png?1');
    },
 
    create: function(game){
        var gradient, bgBuildings, water, effect;
        this.renderGroup = game.add.group();

		gradient = game.make.sprite(0, 0, 'bg-gradient');

		bgBuildings = game.make.sprite(game.camera.width / 2, 0, 'bg-buildings');
		bgBuildings.anchor.x = 0.5;
        bgBuildings.alpha = 0.4;
		bgBuildings.blendMode = Phaser.blendModes.COLOR_BURN;

		this.buildings = game.make.sprite(0, 0, 'buildings');

		this.renderGroup.add(gradient);
		this.renderGroup.add(bgBuildings);
		this.renderGroup.add(this.buildings);

		this.mirror = new Reflection(
			game,
			0,
			308,
			game.width,
			154,
			this.renderGroup
		);
		// this.renderGroup.__mirror = this.mirror;
		game.add.existing(this.mirror);

		this.tween = game.add.tween(this.buildings);
		this.tween.to({
			x: -(this.buildings.width - game.camera.width)
		}, 20000, Phaser.Easing.Sinusoidal.InOut, true);
    },
 
    preRender: function(game){
        if (this.mirror) {
            this.mirror.updateMirror()
        }
    }
}
    

var game = new Phaser.Game(446, 250, Phaser.WEBGL, document.body, null, false, false);
game.state.add('game', Scene)
game.state.start('game');