JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

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

JavaScript

var game = new Phaser.Game(550, 450, Phaser.AUTO,"");

playGame = {
    create:function() {
        // Start/End point selection vars                
        startPoint = new Phaser.Point();
        endPoint = new Phaser.Point();
        mouseIsDown = false;
        
        // add mouse inputs to game. Up and Down
        game.input.onDown.add(playGame.mouseDown, this);    
        game.input.onUp.add(playGame.mouseUp, this); 
        
        finalDraw = game.add.graphics(0, 0);
        graphics = game.add.graphics(0, 0);

    },  
    update:function() {
        if(mouseIsDown){
           playGame.updateLine();
        }
    }, 
    updateLine:function(){
        graphics.clear();
        graphics.lineStyle(5, 0x33FF00);
        graphics.drawCircle(startPoint.x,startPoint.y, .01);
        
        graphics.moveTo(startPoint.x,startPoint.y);
        graphics.lineTo(game.input.x, game.input.y);
        
        endPoint.x = game.input.x;
        endPoint.y = game.input.y;  
        graphics.drawCircle(endPoint.x,endPoint.y, .01);
    },
    mouseDown:function() {
        mouseIsDown = true;
        startPoint.x = game.input.x;
        startPoint.y = game.input.y;
    },   
    mouseUp:function() {  
        mouseIsDown = false;
        playGame.finalDrawing();
        graphics.clear();
    },
    finalDrawing:function(){
        finalDraw.lineStyle(5, 0xFFFFFF);
        finalDraw.drawCircle(startPoint.x,startPoint.y, .5);
        
        finalDraw.moveTo(startPoint.x,startPoint.y);
        finalDraw.lineTo(game.input.x, game.input.y);
        
        endPoint.x = game.input.x;
        endPoint.y = game.input.y;  
        finalDraw.beginFill(0xffffff, 1);
        finalDraw.drawCircle(endPoint.x,endPoint.y, .5);
    }
}


game.state.add("playGame", playGame);
game.state.start("playGame");