未加星标

HTML5 SameGame engine powered by Phaser adding animations

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

If you enjoyed the html5 SameGame example I showed you last week, here is the second part with animations and a deeply commented source code.

Three different animations have been featured:

* The fade-out animation when tiles are removed, using a tween on alpha property.

* The animation of tiles falling down, using a tween on y property

* The animation of tiles scrolling to the left, using a tween on x property with a bounce easing.

Adding animations made the game more polished, as you can see.

And here is the complete source code, as promised:

// the game itself var game; // this object contains all customizable game options // changing them will affect gameplay var gameOptions = { gameWidth: 800,// game width, in pixels gameHeight: 800,// game height, in pixels tileSize: 100,// tile size, in pixels fieldSize: {// field size, an object rows: 8,// rows in the field, in units cols: 8// columns in the field, in units }, colors: [0xff0000, 0x00ff00, 0x0000ff, 0xffff00] // tile colors } // function to be execute once the page loads window.onload = function() { // creation of a new Phaser Game game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight); // adding "TheGame" state game.state.add("TheGame", TheGame); // launching "TheGame" state game.state.start("TheGame"); } /* ****************** TheGame state ****************** */ var TheGame = function(){}; TheGame.prototype = { // function to be executed when the game preloads preload: function(){ // setting background color to dark grey game.stage.backgroundColor = 0x222222; // load the only graphic asset in the game, a white tile which will be tinted on the fly game.load.image("tiles", "assets/sprites/tile.png"); }, // function to be executed as soon as the game has completely loaded create: function(){ // scaling the game to cover the entire screen, while keeping its ratio game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // horizontally centering the game game.scale.pageAlignHorizontally = true; // vertically centering the game game.scale.pageAlignVertically = true; // this function will create the level this.createLevel(); }, createLevel: function(){ // canPick tells if we can pick a tile, we start with "true" has at the moment a tile can be picked this.canPick = true; // tiles are saved in an array called tilesArray this.tilesArray = []; // this group will contain all tiles this.tileGroup = game.add.group(); // we are centering the group, both horizontally and vertically, in the canvas this.tileGroup.x = (game.width - gameOptions.tileSize * gameOptions.fieldSize.cols) / 2; this.tileGroup.y = (game.height -gameOptions.tileSize * gameOptions.fieldSize.rows) / 2; // two loops to create a grid made by "gameOptions.fieldSize.rows" x "gameOptions.fieldSize.cols" columns for(var i = 0; i < gameOptions.fieldSize.rows; i++){ this.tilesArray[i] = []; for(var j = 0; j < gameOptions.fieldSize.cols; j++){ // this function adds a tile at row "i" and column "j" this.addTile(i, j); } } }, // function to add a tile at "row" row and "col" column addTile: function(row, col){ // determining x and y tile position according to tile size var tileXPos = col * gameOptions.tileSize + gameOptions.tileSize / 2; var tileYPos = row * gameOptions.tileSize + gameOptions.tileSize / 2; // tile is added as a button which will call "pickTile" function if triggered var theTile = game.add.button(tileXPos, tileYPos, "tiles", this.pickTile, this); // setting tile registration point to its center theTile.anchor.set(0.5); // adjusting tile width and height according to tile size theTile.width = gameOptions.tileSize; theTile.height = gameOptions.tileSize; // time to assign the tile a random value, which is also a random color theTile.value = game.rnd.integerInRange(0, gameOptions.colors.length - 1); // tinting the tile theTile.tint = gameOptions.colors[theTile.value]; // saving tile coordinate as a Point, to quickly have access to this information theTile.coordinate = new Phaser.Point(col, row); // adding the button to "tilesArray" array this.tilesArray[row][col] = theTile; // also adding it to "tileGroup" group this.tileGroup.add(theTile); }, // this function is executed each time a tile is selected pickTile: function(e){ // can the player pick a tile? if(this.canPick){ // the most secure way to have a clean and empty array this.filled = []; this.filled.length = 0; // performing a flood fill on the selected tile // this will populate "filled" array this.floodFill(e.coordinate, e.value); // do we have more than one tile in the array? if(this.filled.length > 1){ // ok, this is a valid move and player won't be able to pick another tile until all animations have been played this.canPick = false; // function to destroy selected tiles this.destroyTiles(); } } }, // this function will destroy all tiles we can find in "filled" array destroyTiles: function(){ // looping through the array for(var i = 0; i < this.filled.length; i++){ // fading tile out with a tween var tween = game.add.tween(this.tilesArray[this.filled[i].y][this.filled[i].x]).to({ alpha: 0 }, 300, Phaser.Easing.Linear.None, true); // once the tween has been completed... tween.onComplete.add(function(e){ // remove the tile e.destroy(); // we don't know how many tiles we have already removed, so counting the tweens // currently in use is a good way, at the moment // if this was the last tween (we only have one tween running, this one) if(tween.manager.getAll().length == 1){ // call fillVerticalHoles function to make tiles fall down this.fillVerticalHoles(); } }, this); // tilesArray item is set to null, this means it's empty now this.tilesArray[this.filled[i].y][this.filled[i].x] = null; } }, // this function will make tiles fall down fillVerticalHoles: function(){ // filled is a variable which tells us if we filled a hole var filled = false; // looping through the entire gamefield for(var i = gameOptions.fieldSize.rows - 2; i >= 0; i--){ for(var j = 0; j < gameOptions.fieldSize.cols; j++){ // if we have a tile... if(this.tilesArray[i][j] != null){ // let's count how many holes we can find below this tile

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

主题: HTMLHTML5
分页:12
转载请注明
本文标题:HTML5 SameGame engine powered by Phaser adding animations
本站链接:http://www.codesec.net/view/480983.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(27)