JSFiddle - React, Tailwind, and code Playground

by luckylooke

HTML

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

JavaScript

// TODO: When mouse is going out of canvas, you need to click into canvas to get game react again

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);

    var canvas = window.document.getElementsByTagName('canvas')[0], // One canvas enviroment AND/OR first canvas is game canvas
        prevX = 0,
        prevY = 0;

    var ground = game.add.sprite(0, 0, 'backdrop');
    ground.inputEnabled = true;
    ground.input.enableDrag();

    // Disabling drag but allowing drag events to be fired
    ground.input.allowVerticalDrag = false;
    ground.input.allowHorizontalDrag = false;

    function mouseMove(e) {
        game.camera.x += prevX - e.screenX;
        prevX = e.screenX;
        game.camera.y += prevY - e.screenY;
        prevY = e.screenY;
    }
    
    function mouseLeave() {
        canvas.removeEventListener('mousemove', mouseMove);
        canvas.removeEventListener('mouseleave', mouseLeave);
    }

    function touchMove(e) {
        e.preventDefault(); // disable scrolling page
        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;
    }

    ground.events.onDragStart.add(function (evt, pointer) {
        prevX = pointer.screenX;
        prevY = pointer.screenY;
        if (pointer.isMouse) {
            canvas.addEventListener('mousemove', mouseMove);
            canvas.addEventListener('mouseleave', mouseLeave);
        } else {
            canvas.addEventListener('touchmove', touchMove);
        }
    }, this);
   ...