JSFiddle - React, Tailwind, and code Playground

by adamholdenyall

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.0.2/phaser.min.js"></script>
<button id="pauseButton"></button>

JavaScript

var game = new Phaser.Game(480, 360, Phaser.AUTO, '', {
    preload: preload,
    create: create,
    update: update,
    render: render
});

function preload() {
    game.load.crossOrigin = true;
    game.load.image('sky', 'http://i.imgur.com/826zH6I.png');
    game.load.image('platform', 'http://i.imgur.com/32sy3D0.png');
    game.load.spritesheet('dude', 'http://i.imgur.com/70VF89Q.png', 32, 48);
    game.onPause.add(onPause);
    game.onResume.add(onResume);
}

function create() {
    sky = game.add.sprite(0, 0, 'sky');
    platform = game.add.sprite(32, 96, 'platform');
    player = game.add.sprite(204, 32, 'dude');
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    player.animations.currentFrame = 4;
    player.animations.play('right');       
    dark = game.add.sprite(game.width,game.height,'sky');
    dark.alpha = .5;
    dark.angle = 180;
    dark.tint = 000000;
    dark.visible = false;
}

function update() {

}

function render() {

}

function onPause(){
    dark.visible = true;
}

function onResume(){
    dark.visible = false;
}

$(function () {
    $("#pauseButton").text("Pause").data("paused", false).click(function () {
        $(this).data("paused", !$(this).data("paused"));
        if ($(this).data("paused")) {
            $(this).text("Resume");
            game.paused = true;
        } else {
            $(this).text("Pause");
            game.paused = false;
        }
    })
});