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>
CSS
canvas {
width:892px !important;
height:500px !important;
}
JavaScript
Phaser.Game.prototype._resolution = 4;
Phaser.Game.prototype.setUpRenderer = function(){
if (this.config.canvasID) {
this.canvas = Phaser.Canvas.create(
this.width,
this.height,
this.config.canvasID
);
} else {
this.canvas = Phaser.Canvas.create(
this.width,
this.height
);
}
if (this.config.canvasStyle) {
this.canvas.style = this.config.canvasStyle;
} else {
this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
}
if (this.device.cocoonJS) {
if (this.renderType === Phaser.CANVAS) {
this.canvas.screencanvas = true;
} else {
this.canvas.screencanvas = false;
}
}
if (
this.renderType === Phaser.HEADLESS ||
this.renderType === Phaser.CANVAS ||
(this.renderType === Phaser.AUTO && this.device.webGL === false)
) {
if (this.device.canvas) {
if (this.renderType === Phaser.AUTO) {
this.renderType = Phaser.CANVAS;
}
this.renderer = new PIXI.CanvasRenderer(
this.width,
this.height,
{
'view': this.canvas,
'transparent': this.transparent,
'resolution': this._resolution,
'clearBeforeRender': true
}
);
this.context = this.renderer.context;
} else {
throw new Error('Phaser.Game - cannot create Canvas or WebGL context, aborting.');
}
} else {
// They requested WebGL and their browser supports it
this.renderType = Phaser.WEBGL;
this.renderer = new PIXI.WebGLRenderer(
this.width,
this.height,
{
'view': this.canvas,
'transparent': this.transparent,
'resolution': this._resolution,
'antialias': this.antialias,
'preserveDrawingBuffer': this.preserveDrawingBuffer
}
);
this.context = null;
}
if (this.renderType !== Phaser.HEADLESS) {
this.stage.smoothed = this.antialias;
Phaser.Canvas.addToDOM(this.canvas, this.parent, false);
Phaser.Canvas.setTouchAction(this.canvas);
}
};
var Reflection = function(game, x, y, width, height, group){
this._texture = game.make.renderTexture(width,...