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(800, 600, Phaser.AUTO,"" , { preload: preload, create: create, update: update });
 
    
function create() { 
    // create graphics item / set line style
    graphics = game.add.graphics(0, 0);
    graphics.lineStyle(20, 0xffffff, 1);
    
    // create ataris group and call function to create attari items
    ataris = game.add.group(); 
    buildGrid(); 
    
    // cycle through ataris to highlight
    cycleGridItems();  
}

function buildGrid(){  
    var offsetX = 200;
    var offsetY = 100;  
    for(var i = 0; i < 3; i ++){
        for(var j = 0; j < 3; j ++){   
            var atariX = j>3 ? ( offsetX+j*(offsetX) ) + 20 : offsetX+j*(offsetX);
            var atariY = i>2 ? offsetY+i*(offsetX) + 10 : offsetY+i*(offsetX); 
            var atari = game.add.sprite(atariX, atariY, 'atari');
            atari.anchor.setTo(0.5, 0.5);
            atari.width = 120;
            atari.height = 68;
            ataris.add(atari); 
        }
    }
    // move line to first item for amimation
    var firstItem = ataris.getAt(0);
    graphics.moveTo(firstItem.x, firstItem.y)
}

function cycleGridItems(){
    // for each atari in group call tint function with delay
    ataris.forEach(function(item) {  
        var i = ataris.getIndex(item);
        tintGridItem(item,500*i);
        
        // draw line from previous location to the anchor of current atari
        graphics.lineTo(item.x, item.y)
        graphics.moveTo(item.x, item.y)
        
    }, this);  
}

function tintGridItem(item,delay){
    setTimeout(function(){ 
        
        // draw line from previous location to the anchor of current atari
        graphics.lineTo(item.x, item.y)
        graphics.moveTo(item.x, item.y)
        
        // tint atari awful yellow colour
        item.tint = 0xFFBB00; 
    },delay);
}
    
function update() {
      
}

     
    

function preload() {
    game.load.image('atari',...