phaser/examples/games/matching pairs.js

// mods by Patrick OReilly 
// twitter: @pato_reilly

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

    game.load.tilemap('matching', 'assets/tilemaps/maps/phaser_tiles.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.tileset('tiles', 'assets/tilemaps/tiles/phaser_tiles.png', 100, 100, -1, 1, 1);    
}

var timeCheck = 0;
var flipFlag = false;

var startList = new Array();
var squareList = new Array();

var masterCounter = 0;
var squareCounter = 0;
var square1Num;
var square2Num;
var savedSquareX1;
var savedSquareY1;
var savedSquareX2;
var savedSquareY2;

var map;
var tileset;
var layer;

var marker;
var currentTile;
var currentTilePosition;

var tileBack = 25;
var timesUp = '+';
var youWin = '+';


function create() {

        map = game.add.tilemap('matching');

        tileset = game.add.tileset('tiles');
    
        layer = game.add.tilemapLayer(0, 0, 600, 600, tileset, map, 0);

        //layer.resizeWorld();

        marker = game.add.graphics();
        marker.lineStyle(2, 0x00FF00, 1);
        marker.drawRect(0, 0, 100, 100);
    
    randomizeTiles();

}

function update() {
    
    countDownTimer();
    
    if (layer.getTileX(game.input.activePointer.worldX) <= 5) // to prevent the marker from going out of bounds
    {
        marker.x = layer.getTileX(game.input.activePointer.worldX) * 100;
        marker.y = layer.getTileY(game.input.activePointer.worldY) * 100;
    }

    if (flipFlag == true) 
    {
        if (game.time.now - timeCheck >1000)
        {   
            flipBack();
        }
    }
    else
    {
        processClick();
    }
}
   
   
function countDownTimer() {
  
    var timeLimit = 120;
  
    myTime = game.time.now;
    mySeconds = parseInt(myTime/1000);
    myCountdownSeconds = timeLimit - mySeconds;
    
    if (myCountdownSeconds <= 0) 
        {
        // time is up
        timesUp = 'Time is up!';    
    }
}

function processClick() {
   
    currentTile = map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y));
    currentTilePosition = ((layer.getTileY(game.input.activePointer.worldY)+1)*6)-(6-(layer.getTileX(game.input.activePointer.worldX)+1));
        
    if (game.input.mousePointer.isDown)
        {
        // check to make sure the tile is not already flipped
        if (currentTile == tileBack) 
        {
            // get the corresponding item out of squareList
                currentNum = squareList[currentTilePosition-1];
            flipOver();
                squareCounter++;
            // is the second tile of pair flipped?
            if  (squareCounter == 2) 
            {
                // reset squareCounter
                squareCounter = 0;
                square2Num = currentNum;
                // check for match
                if (square1Num == square2Num)
                {
                    masterCounter++;    
                    
                    if (masterCounter == 18) 
                    {
                        // go "win"
                        youWin = 'Got them all!';
                    }                       
                }
                else
                {
                    savedSquareX2 = layer.getTileX(marker.x);
                    savedSquareY2 = layer.getTileY(marker.y);
                        flipFlag = true;
                        timeCheck = game.time.now;
                }   
            }   
            else
            {
                savedSquareX1 = layer.getTileX(marker.x);
                savedSquareY1 = layer.getTileY(marker.y);
                    square1Num = currentNum;
            }           
        }           
    }    
}
 
function flipOver() {
 
    map.putTile(currentNum, layer.getTileX(marker.x), layer.getTileY(marker.y));
}
 
function flipBack() {
        
    flipFlag = false;
    
    map.putTile(tileBack, savedSquareX1, savedSquareY1);
    map.putTile(tileBack, savedSquareX2, savedSquareY2);
 
}
 
function randomizeTiles() {

    for (num = 1; num <= 18; num++)
    {
        startList.push(num);
    }
    for (num = 1; num <= 18; num++)
    {
        startList.push(num);
    }

    // for debugging
    myString1 = startList.toString();
  
    // randomize squareList
    for (i = 1; i <=36; i++)
    {
        randomPosition = game.rnd.integerInRange(0,startList.length);
    
        thisNumber = startList[ randomPosition ]; 
    
        squareList.push(thisNumber);
    
        a = startList.indexOf(thisNumber);
    
        startList.splice( a, 1);
    }
    
    // for debugging
    myString2 = squareList.toString();
  
    for (col = 0; col < 6; col++)
    {
        for (row = 0; row < 6; row++)
        {
            map.putTile(tileBack, col, row);
        }
    }
}

function getHiddenTile() {
        
    thisTile = squareList[currentTilePosition-1];
    return thisTile;
}

function render() {

    game.debug.renderText(timesUp, 620, 208, 'rgb(0,255,0)');
    game.debug.renderText(youWin, 620, 240, 'rgb(0,255,0)');

    game.debug.renderText('Time: ' + myCountdownSeconds, 620, 15, 'rgb(0,255,0)');
    
    //game.debug.renderText('squareCounter: ' + squareCounter, 620, 272, 'rgb(0,0,255)');
    game.debug.renderText('Matched Pairs: ' + masterCounter, 620, 304, 'rgb(0,0,255)');
    
    //game.debug.renderText('startList: ' + myString1, 620, 208, 'rgb(255,0,0)');
    //game.debug.renderText('squareList: ' + myString2, 620, 240, 'rgb(255,0,0)');

    game.debug.renderText('Tile: ' + map.getTile(layer.getTileX(marker.x), layer.getTileY(marker.y)), 620, 48, 'rgb(255,0,0)');

    game.debug.renderText('LayerX: ' + layer.getTileX(marker.x), 620, 80, 'rgb(255,0,0)');
    game.debug.renderText('LayerY: ' + layer.getTileY(marker.y), 620, 112, 'rgb(255,0,0)');

    game.debug.renderText('Tile Position: ' + currentTilePosition, 620, 144, 'rgb(255,0,0)');
    game.debug.renderText('Hidden Tile: ' + getHiddenTile(), 620, 176, 'rgb(255,0,0)');
}