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 =; // 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 =, 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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

本文标题:HTML5 Drag and Match engine updated to Phaser 2.6.2 with masks and a lot of cust ...

技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)