JSFiddle - React, Tailwind, and code Playground

by luckylooke

HTML

<script src="http://examples.phaser.io/_site/js/phaser.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', {
    preload: preload,
    create: create
});

function preload() {
    game.load.image('backdrop', 'http://fc04.deviantart.net/images/i/2003/39/d/c/Dirt___Ground_Cracks.jpg');
    game.load.image('test', 'http://png-3.findicons.com/files/icons/1588/farm_fresh_web/32/box.png');
}

function create() {
    game.world.setBounds(0, 0, 1920, 1200);
    game.add.sprite(0, 0, 'backdrop');

    var canvas = window.document.getElementsByTagName('canvas')[0],
        prevX = 0,
        prevY = 0,
        mouseDown = false;

    canvas.addEventListener('touchstart', function (e) {
        prevX = e.changedTouches[0].screenX;
        prevY = e.changedTouches[0].screenY;
    });

    canvas.addEventListener('mousedown', function (e) {
        mouseDown = true;
        prevX = e.screenX;
        prevY = e.screenY;
    });

    canvas.addEventListener('touchmove', function (e) {
        if (!game.dragWorldDisabled) {
            e.preventDefault();
            game.camera.x += prevX - e.changedTouches[0].screenX;
            prevX = e.changedTouches[0].screenX;
            game.camera.y += prevY - e.changedTouches[0].screenY;
            prevY = e.changedTouches[0].screenY;
        }
    });

    canvas.addEventListener('mousemove', function (e) {
        if (mouseDown && !game.dragWorldDisabled) {
            e.preventDefault();
            game.camera.x += prevX - e.screenX;
            prevX = e.screenX;
            game.camera.y += prevY - e.screenY;
            prevY = e.screenY;
        }
    });

    canvas.addEventListener('mouseup', function (e) {
        mouseDown = false;
    });

    canvas.addEventListener('mouseleave', function (e) {
        mouseDown = false;
    });

    test = game.add.sprite(300, 300, 'test');
    test.inputEnabled = true;
    test.input.enableDrag(true);

    test.events.onDragStart.add(function () {
        game.dragWorldDisabled = true;
    }, this);
   ...