JSFiddle - React, Tailwind, and code Playground

by Peter Doyle

HTML

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

JavaScript

var scaleFactor = window.devicePixelRatio;

var game = new Phaser.Game(500, 500, Phaser.CANVAS, "");

var options = {
	grid:{
		cols: 8,
    	rows: 8,
        itemWidth:50,
        itemHeight:50,
        itemGutter:7 
	}
};

options.grid.itemsCount = (options.grid.cols * options.grid.rows)-1;

var colours = [
   	0xffffff,
    0x000000,
    0xff0000,
    0x00ff00
];

var level = [
	0,22,1,2,2,0,0,0,
	0,22,1,2,2,0,0,0,
	0,22,1,0,0,0,0,0,
	0,22,1,0,0,0,0,0,
	0,0,1,0,0,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0
];

var gridSprites;
var bmd;  
var boxSprites;

var upKey;
var downKey;
var leftKey;
var rightKey;

var winCount = setWinCount();
var currentCount = 0;

var doubleCheckCanMove = [];

playGame = {
  	create: function(){ 
  		game.stage.backgroundColor = "#000000"; 
  		gridSprites = game.add.group();
	    boxSprites = game.add.group();
	    
	    // create a new bitmap data object
	    bmd = game.add.bitmapData(options.grid.itemWidth,options.grid.itemHeight);

	    // draw to the canvas context like normal
	    bmd.ctx.beginPath();
	    bmd.ctx.rect(0,0,options.grid.itemWidth,options.grid.itemHeight);
	    bmd.ctx.fillStyle = '#ffffff';
	    bmd.ctx.fill();
	    
	    playGame.drawGrid(); 
	    
	    upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
	    downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
	    leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
	    rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);

	    upKey.onDown.add( function(){playGame.moveBoxes("up")}, this);
	    downKey.onDown.add(function(){playGame.moveBoxes("down")}, this);
	    leftKey.onDown.add(function(){playGame.moveBoxes("left")}, this);
	    rightKey.onDown.add(function(){playGame.moveBoxes("right")}, this);
	},
	drawGrid: function() {
	  var gridIndex = 0;
	    for(var r = 0; r < options.grid.rows; r ++){
	    	for(var c = 0; c < options.grid.cols; c ++){
	            
	            var spriteX = (c*options.grid.itemWidth)...