Here we go with another prototype updated to the last Phaser official release, 2.6.2.

After updating and improving Space is Key andString Avoider prototypes, now it’s time to update and improve the drag and match engine .

The improvement has been made over three main features:

* A mask has been added to hide tiles outside the game field, this is very important to grant the effect of a tile disappearing from a side of the board and appearing to the other side.

* A lot of custom options have been added, inside gameOptions global object. You can change several things such as tile size, board size and offset, as well as the number of different colors on the board

* All the code which handles something which moves basically the tiles has been placed inside update method which Phaser runs at each frame, to prevent strange flickering which appears in latest Phaser versions when you move sprites outside update method.

Now, it’s time to play:

I placed the board inside a way bigger canvas to show you how mask works, hiding the part of the sprites which are outside the board. Drag and move the tiles around the board.

If you have a mobile device, you can play directly fronthis link.

And here we go with the completely commented source code:

// the game itself
var game;
// global game options
var gameOptions = {
// width of the game, in pixels
gameWidth: 600,
// height of the game, in pixels
gameHeight: 600,
// size of the sprite sheet, in pixels
spritesheetSize: 50,
// size of each tile, in pixels
tileSize: 50,
// size of the field, in tiles
fieldSize: 6,
// different tile types
tileTypes: 6,
// distance from the left of the screen to the left of the board, in pixels
offsetX: 150,
// distance from the top of the screen to the top of the board, in pixels
offsetY: 150
}
// some constants to be used in the game
// I am not dragging
var NO_DRAG = 0;
// I am dragging horizontally
var HORIZONTAL_DRAG = 1;
// I am dragging vertically
var VERTICAL_DRAG = 2;
// The game state is "doing nothing"
var GAME_STATE_IDLE = 0;
// When the player is dragging a row/column
var GAME_STATE_DRAG = 1;
// When the player stops dragging
var GAME_STATE_STOP = 2;
// when the window has been fully loaded
window.onload = function() {
// creation of a Game instance
game = new Phaser.Game(600, 600);
// adding "PlayGame" state
game.state.add("PlayGame", playGame)
// starting "PlayGame" state
game.state.start("PlayGame");
}
var playGame = function(game){}
playGame.prototype = {
// when the state preloads
preload: function(){
// loading the spritesheet with all tile images
game.load.spritesheet("tiles", "tiles.png", gameOptions.spritesheetSize, gameOptions.spritesheetSize);
// setting the game on maximum scale mode to cover the entire screen
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
// once the state has been created
create: function(){
// tileArray is the array which will contain all tiles
this.tileArray = [];
// creation of the group which will contain all tiles
this.tileGroup = game.add.group();
// adjusting group position according to offset
this.tileGroup.x = gameOptions.offsetX;
this.tileGroup.y = gameOptions.offsetY;
// creation of a mask with the same size of the board to be placed in the same position of the group
// this way we are hiding everything is outside the board
this.tileMask = game.add.graphics(this.tileGroup.x, this.tileGroup.y);
this.tileMask.beginFill(0xffffff);
this.tileMask.drawRect(0, 0, gameOptions.fieldSize * gameOptions.tileSize, gameOptions.fieldSize * gameOptions.tileSize);
this.tileGroup.mask = this.tileMask;
this.tileMask.visible = true;
// filling the board with tiles thanks to "addTile" method
for(var i = 0; i < gameOptions.fieldSize; i++){
this.tileArray[i] = [];
for(j = 0; j < gameOptions.fieldSize; j++){
this.addTile(i, j);
}
}
// adding the temporary tile thanks to addTempTile method
this.addTempTile();
// waiting for player input to call pickTile method
game.input.onDown.add(this.pickTile, this);
// the game has just been created, so we are doing nothing
this.gameState = GAME_STATE_IDLE;
},
// function to add a tile at a given row and column
addTile: function(row, col){
// choosing a random tile
var randomTile = game.rnd.integerInRange(0, gameOptions.tileTypes - 1);
// creation of the sprite in the proper position
var theTile = game.add.sprite(col * gameOptions.tileSize, row * gameOptions.tileSize, "tiles");
// setting tile width and height
theTile.width = gameOptions.tileSize;
theTile.height = gameOptions.tileSize;
// showing the frame according to tile value
theTile.frame = randomTile;
// saving the value inside a custom property
theTile.value = randomTile;
// inserting the tile in tileArray array
this.tileArray[row][col] = theTile;
// adding the sprite to tileGroup group
this.tileGroup.add(theTile);
},
// function to add the temporary tile
addTempTile: function(){
// creation of the sprite, no matter the position, we won't show it at the moment
this.tempTile = game.add.sprite(0, 0, "tiles");
// setting its width and height
this.tempTile.width = gameOptions.tileSize;
this.tempTile.height = gameOptions.tileSize;
// setting the sprite to non visible
this.tempTile.visible = false;
// adding the sprite to tileGroup group
this.tileGroup.add(this.tempTile);
},
// function to triggered when the player touches/clicks on the canvas
pickTile: function(e){
// determining row and column according to input position, tile size and offset
this.movingRow = Math.floor((e.position.y - gameOptions.offsetY) / gameOptions.tileSize);
this.movingCol = Math.floor((e.position.x - gameOptions.offsetX) / gameOptions.tileSize);
// if row and column are actually inside game field...
if(this.movingRow >= 0 && this.movingCol >= 0 && this.movingRow < gameOptions.fieldSize && this.movingCol < gameOptions.fieldSize){
// at the moment we aren't dragging
this.dragDirection = NO_DRAG;
// removing the listener which waits for the input to begin
game.input.onDown.remove(this.pickTile, this);
// adding a listener which waits for the input to end then call releaseTile method
game.input.onUp.add(this.releaseTile, this);
// adding a listener which waits for the input to move then call moveTile method
game.input.addMoveCallback(this.moveTile, this);
}
},
// function to be executed at each frame
update:function(){
// checking game state to see what to do
switch(this.gameState){
// we are dragging