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 game = new Phaser.Game(500, 500, Phaser.AUTO,"" , { preload: preload, create: create, update: update });

var options = {
	grid:{
		cols: 6,
    	rows: 6,
        itemWidth:70,
        itemHeight:70,
        itemGutter:7
	}
};

var colours = [
    0x00ff00,
    0xff0000,
    0x0000ff,
    0xffffff,
    0x99ffff,
    0xff6666
];

var level = [
	1,0,0,0,0,0,
    0,5,0,0,3,0,
    0,0,0,0,0,0,
    0,2,0,0,4,0,
    0,0,0,0,0,0,
    0,0,0,3,0,0
];

var gridSprites;
var bmd;   
    
function create() {
    
    gridSprites = 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();
    
    drawGrid();
    
}
    
function update() {
   gridItemHover()
}

function gridItemHover(){
    gridSprites.forEach(function(item) {
        if (item.input.pointerOver()){
            item.alpha = 1;
        }else{
            item.alpha = 0.5;
        }
    });
    
}

function drawGrid() {
   var gridIndex = 0;
    for(var r = 0; r < options.grid.rows; r ++){
    	for(var c = 0; c < options.grid.cols; c ++){
            
         	var sprite = game.add.sprite(
                (c*options.grid.itemWidth) 
                + (c*options.grid.itemGutter)
                + options.grid.itemGutter,
                
                (r*options.grid.itemHeight)
                + (r*options.grid.itemGutter) 
                + options.grid.itemGutter,
                
                bmd
            );
            sprite.gridIndex = gridIndex;
            sprite.tint = colours[ level[gridIndex] ];
            sprite.inputEnabled = true;
            
            gridSprites.add(sprite);
            
            text = game.add.text(
                sprite.x, 
                sprite.y,
                gridIndex
      ...