Here we are with the final step ofSameGame series, a complete playable SameGame with high scores and a “no more moves” check.

The game features four colors and a 25×10 grid like in the original game, and the score is based on n * (n - 2) formula where n is the number of removed tiles.

Your best score is saved in local storage, have a go with the game:

To check if there are no more moves, after each player move I just loop through the game field performing flood fill on each tile. When I find a flood fill with two or more tiles, I break the loop and allow the player to continue.

Here is the source code:

var game; var gameOptions = { gameWidth: 2200, gameHeight: 1400, tileSize: 100, fieldSize: { rows: 10, cols: 20 }, colors: [0xdb0a5b, 0x19b5fe, 0x00b16a, 0xf7ca18], localStorageName: "samegame" } window.onload = function() { game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight); game.state.add("TheGame", TheGame); game.state.start("TheGame"); } var TheGame = function(){}; TheGame.prototype = { preload: function(){ game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.stage.disableVisibilityChange = true; game.load.image("tiles", "assets/sprites/tile.png"); game.load.bitmapFont("font", "assets/fonts/font.png", "assets/fonts/font.fnt"); }, create: function(){ this.score = 0; this.savedData = localStorage.getItem(gameOptions.localStorageName)==null?{score:0}:JSON.parse(localStorage.getItem(gameOptions.localStorageName)); this.scoreText = game.add.bitmapText(10, 10, "font", "", 72); var bestScoreText = game.add.bitmapText(game.width - 10, 10, "font", "Best score: " + this.savedData.score.toString(), 72); this.gameText = game.add.bitmapText(game.width / 2, game.height - 50, "font", "SAMEGAME", 90) this.gameText.anchor.set(0.5, 1); bestScoreText.anchor.set(1, 0); this.updateScore(); this.createLevel(); }, createLevel: function(){ this.canPick = true; this.tilesArray = []; this.tileGroup = game.add.group(); var background = game.add.tileSprite(0, 0, gameOptions.tileSize * gameOptions.fieldSize.cols, gameOptions.tileSize * gameOptions.fieldSize.rows, "tiles"); background.alpha = 0.2; this.tileGroup.add(background); this.tileGroup.x = (game.width - gameOptions.tileSize * gameOptions.fieldSize.cols) / 2; this.tileGroup.y = (game.height -gameOptions.tileSize * gameOptions.fieldSize.rows) / 2; for(var i = 0; i < gameOptions.fieldSize.rows; i++){ this.tilesArray[i] = []; for(var j = 0; j < gameOptions.fieldSize.cols; j++){ this.addTile(i, j); } } }, addTile: function(row, col){ var tileXPos = col * gameOptions.tileSize + gameOptions.tileSize / 2; var tileYPos = row * gameOptions.tileSize + gameOptions.tileSize / 2; var theTile = game.add.button(tileXPos, tileYPos, "tiles", this.pickTile, this); theTile.anchor.set(0.5); theTile.width = gameOptions.tileSize; theTile.height = gameOptions.tileSize; theTile.value = game.rnd.integerInRange(0, gameOptions.colors.length - 1); theTile.tint = gameOptions.colors[theTile.value]; theTile.coordinate = new Phaser.Point(col, row); this.tilesArray[row][col] = theTile; this.tileGroup.add(theTile); }, pickTile: function(e){ if(this.canPick){ this.filled = []; this.filled.length = 0; this.floodFill(e.coordinate, e.value); if(this.filled.length > 1){ this.score += this.filled.length * (this.filled.length - 2); this.updateScore(); this.canPick = false; this.destroyTiles(); } } }, destroyTiles: function(){ for(var i = 0; i < this.filled.length; i++){ var tween = game.add.tween(this.tilesArray[this.filled[i].y][this.filled[i].x]).to({ alpha: 0 }, 150, Phaser.Easing.Linear.None, true); tween.onComplete.add(function(e){ e.destroy(); if(tween.manager.getAll().length == 1){ this.fillVerticalHoles(); } }, this); this.tilesArray[this.filled[i].y][this.filled[i].x] = null; } }, fillVerticalHoles: function(){ var filled = false; for(var i = gameOptions.fieldSize.rows - 2; i >= 0; i--){ for(var j = 0; j < gameOptions.fieldSize.cols; j++){ if(this.tilesArray[i][j] != null){ var holesBelow = 0; for(var z = i + 1; z < gameOptions.fieldSize.rows; z++){ if(this.tilesArray[z][j] == null){ holesBelow ++; } } if(holesBelow){ filled = true; this.moveDownTile(i, j, i + holesBelow); } } } } if(!filled){ this.fillHorizontalHoles(); } }, moveDownTile: function(fromRow, fromCol, toRow){ this.tilesArray[toRow][fromCol] = this.tilesArray[fromRow][fromCol]; this.tilesArray[toRow][fromCol].coordinate = new Phaser.Point(fromCol, toRow); var tween = game.add.tween(this.tilesArray[toRow][fromCol]).to({ y: toRow * gameOptions.tileSize + gameOptions.tileSize / 2 }, 125, Phaser.Easing.Linear.None, true); tween.onComplete.add(function(){ if(tween.manager.getAll().length == 1){ this.fillHorizontalHoles(); } }, this) this.tilesArray[fromRow][fromCol] = null; }, fillHorizontalHoles: function(){ var filled = false for(i = 0; i < gameOptions.fieldSize.cols - 1; i++){ if(this.tilesInColumn(i) == 0){ for(j = i + 1; j < gameOptions.fieldSize.cols; j++){ if(this.tilesInColumn(j) != 0){ for(z = 0; z < gameOptions.fieldSize.rows; z++){ if(this.tilesArray[z][j] != null){ filled = true; this.moveLeftTile(z, j, i) } } break; } } } } if(!filled){ this.canPick = true; this.checkForMoves(); } }, moveLeftTile: function(fromRow, fromCol, toCol){ this.tilesArray[fromRow][toCol] = this.tilesArray[fromRow][fromCol]; this.tilesArray[fromRow][toCol].coordinate = new Phaser.Point(toCol, fromRow); var tween = game.add.tween(this.tilesArray[fromRow][toCol]).to({ x: toCol * gameOptions.tileSize + gameOptions.tileSize / 2 }, 250, Phaser.Easing.Bounce.Out, true); tween.onComplete.add(function(){ if(tween.manager.getAll().length == 1){ this.canPick = true; this.checkForMoves(); } }, this) this.tilesArray[fromRow][fromCol] = null; }, checkForMoves: function(){ var noMoves = true; var boardCleared = true; for(var i =

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

主题: HTMLHTML5
分页:12
转载请注明
本文标题:Complete HTML5 SameGame game for you to play and download, featuring “no more m ...
本站链接:http://www.codesec.net/view/483006.html
分享请点击:


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