pre final version

src/configs/phaser.js

@@ -12,7 +12,7 @@ export default {
   scale: {
     parent: 'game',
     mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_BOTH,
+    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
     min: {
       width: 320,
       height: 320,

src/configs/scenes.js

@@ -4,10 +4,18 @@ export const scene1 = {
     h: 9,
   },
   tiles: ['tile-1', 'tile-2', 'tile-3', 'tile-4', 'tile-5'],
-  minScore: 150,
-  minSimilarTiles: 2,
+  minScore: 100,
+  minTilesTarget: 2,
+  bonuses: [
+    {
+      name: 'bomb',
+      title: 'Bomb!',
+      amount: 1,
+      params: { range: 1 },
+    },
+  ],
   autoShufl: 10,
-  maxMoves: 7,
+  maxMoves: 10,
   nextScene: 'Scene2',
 }
 
@@ -17,9 +25,17 @@ export const scene2 = {
     h: 9,
   },
   tiles: ['tile-1', 'tile-2', 'tile-3', 'tile-4', 'tile-5'],
-  minScore: 500,
-  minSimilarTiles: 2,
+  minScore: 300,
+  minTilesTarget: 2,
+  bonuses: [
+    {
+      name: 'bomb',
+      title: 'Bomb!',
+      amount: 1,
+      params: { range: 1 },
+    },
+  ],
   autoShufl: 10,
-  maxMoves: 14,
+  maxMoves: 20,
   nextScene: 'SceneWin',
 }

src/faviconData.json

@@ -1 +1 @@
-{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/browserconfig.xml","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/favicon.ico","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#00539e\">\n<meta name=\"msapplication-TileColor\" content=\"#00539e\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/08a88a01ac3a2e5b8434d41c2498308db06e3598/favicon_preview.png","version":"0.16"}
+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/favicon_package_v0.16.zip","files_urls":["https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/android-chrome-512x512.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/browserconfig.xml","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/favicon.ico","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/safari-pinned-tab.svg","https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/package_files/site.webmanifest"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/site.webmanifest\">\n<link rel=\"mask-icon\" href=\"/safari-pinned-tab.svg\" color=\"#00539e\">\n<meta name=\"msapplication-TileColor\" content=\"#00539e\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/"},"preview_picture_url":"https://realfavicongenerator.net/files/817d14dc31f58896a4b18888c2d511c88d869ff3/favicon_preview.png","version":"0.16"}

src/index.js

@@ -8,6 +8,7 @@ import GridTilesPlugin from '@/plugins/gridTiles/GridTilesPlugin'
 import TileItemPlugin from '@/plugins/tileItem/TileItemPlugin'
 import ScoreBarPlugin from '@/plugins/scoreBar/ScoreBarPlugin'
 import TopBarPlugin from '@/plugins/topBar/TopBarPlugin'
+import BonusBlockPlugin from '@/plugins/bonusBlock/BonusBlockPlugin'
 
 import SceneBoot from '@/scenes/SceneBoot'
 import ScenePreload from '@/scenes/ScenePreload'
@@ -29,6 +30,7 @@ const config = {
       { key: 'TileItemPlugin', plugin: TileItemPlugin, start: true },
       { key: 'ScoreBarPlugin', plugin: ScoreBarPlugin, start: true },
       { key: 'TopBarPlugin', plugin: TopBarPlugin, start: true },
+      { key: 'BonusBlockPlugin', plugin: BonusBlockPlugin, start: true },
     ],
   },
   scene: [

src/models/BonusModel.js

@@ -0,0 +1,8 @@
+export default {
+  name: null,
+  title: null,
+  amount: 0,
+  amountLeft: 0,
+  active: false,
+  params: {},
+}

src/objects/Bonus.js

@@ -0,0 +1,50 @@
+import bonusModel from '@/models/BonusModel'
+
+export default class Bonus
+{
+  #params
+
+  constructor ({ name, title, amount, params })
+  {
+    Object.assign(this, bonusModel)
+    this.model = bonusModel
+    this.name = name
+    this.title = title
+    this.amount = amount
+    this.amountLeft = this.amount
+    this.#params = params
+    this.active = false
+  }
+
+  get canAvailable ()
+  {
+    return this.amountLeft > 0
+  }
+
+  #amountDown ()
+  {
+    this.amountLeft = Math.max(this.amountLeft - 1, 0)
+    return this
+  }
+
+  activate (value = true)
+  {
+    if (this.canAvailable)
+    {
+      this.active = value
+    }
+    return this
+  }
+
+  accept ()
+  {
+    if (this.active)
+    {
+      this.#amountDown()
+      this.active = false
+      const params = this.#params
+      return { ...this, params }
+    }
+    return this
+  }
+}

src/objects/SceneGame.js

@@ -1,6 +1,8 @@
 import { Scene } from 'phaser'
 
 import configGame from '@/configs/game'
+import GameService from '@/services/GameService'
+import ScoresService from '@/services/ScoresService'
 
 export default class SceneGame extends Scene
 {
@@ -12,7 +14,8 @@ export default class SceneGame extends Scene
 
   create ()
   {
-    //
+    this.gameService = new GameService()
+    this.scoresService = new ScoresService()
   }
 
   update ()

src/objects/SceneLevel.js

@@ -1,25 +1,25 @@
 import SceneGame from '@/objects/SceneGame'
 
 import * as scenesConfig from '@/configs/scenes'
+import BonusesService from '@/services/BonusesService'
 
 export default class SceneLevel extends SceneGame
 {
   scenesConfig = scenesConfig
 
-  setParamsScene ({ maxMoves, minScore, minSimilarTiles, grid, tiles, nextScene })
+  setParamsScene ({ maxMoves, minScore, minTilesTarget, bonuses, grid, tiles, nextScene })
   {
     this.maxMovesCount = maxMoves
     this.targetScoresCount = minScore
     this.nextScene = nextScene
 
-    this.scoresCount = 0
-    this.movesCount = this.maxMovesCount
-
     this.gridTilesParams = {
       grid,
       tiles,
-      minSimilarTiles,
+      minTilesTarget,
     }
+
+    this.bonusesService = new BonusesService({ bonuses })
   }
 
   preload ()
@@ -31,6 +31,11 @@ export default class SceneLevel extends SceneGame
   {
     super.create()
 
+    this.scoresService.init({
+      scoresTarget: this.targetScoresCount,
+      movesLimit: this.maxMovesCount,
+    })
+
     this.audioManage()
     this.draw()
   }
@@ -39,8 +44,14 @@ export default class SceneLevel extends SceneGame
   {
     super.update()
 
-    this.scoreBar.updateMove(this.movesCount)
-    this.scoreBar.updateScore(this.scoresCount)
+    this.scoreBar.updateMove(this.scoresService.moves)
+    this.scoreBar.updateScore(this.scoresService.scores)
+
+    Object.keys(this.bonusesBlocks).forEach(name =>
+      {
+        const bonus = this.bonusesService.getBonus(name)
+        this.bonusesBlocks[name].update(bonus)
+      })
 
     this.grid.gridUpdate()
   }
@@ -55,49 +66,70 @@ export default class SceneLevel extends SceneGame
 
   draw ()
   {
-    this.grid = this.add.gridTiles(this.gridTilesParams)
-      .on('clickOnTile', (tile) => this.clickOnTile(tile))
+    const { fontFamily, colorTextBar } = this.configGame
+    const { width } = this.cameras.main
+    this.bonusesBlocks = []
+    const bonuses = this.bonusesService.getBonuses()
+    const padding = 20
+    const styleText = {
+      fontFamily,
+      fontSize: 24,
+      textAlign: 'center',
+      color: colorTextBar,
+    }
 
-    this.scoreBar = this.add.scoreBar()
     this.topBar = this.add.topBar()
+
+    this.grid = this.add.gridTiles(padding, 120, this.gridTilesParams)
+      .on('clickOnTile', (tile) => this.clickOnTile(tile))
+
+    this.scoreBar = this.add.scoreBar(0, 160)
+    this.scoreBar.setX(width - this.scoreBar.displayWidth - padding)
+
+    if (Object.keys(bonuses).length)
+    {
+      this.add.text(
+          width - this.scoreBar.displayWidth / 2 - padding,
+          this.scoreBar.y + this.scoreBar.displayHeight + padding,
+          'Bonuses:',
+          styleText,
+        )
+        .setOrigin(.5, 0)
+    }
+
+    Object.keys(bonuses).forEach((name, i) =>
+      {
+        const y = this.scoreBar.y + this.scoreBar.displayHeight + 60
+        this.bonusesBlocks[name] = this.add.bonusBlock(0, y, bonuses[name])
+        const x = width - this.scoreBar.displayWidth - 70 + this.bonusesBlocks[name].displayWidth * i
+        this.bonusesBlocks[name].setX(x)
+      })
   }
 
-  clickOnTile ({ tile, isCondition, tilesSimilar })
+  clickOnTile ({ isCondition, tilesTarget })
   {
     if (isCondition)
     {
       this.tileClickSound.play()
-      const tilesCount = tilesSimilar.length
-      const score = this.scoresCount + tilesCount * tilesCount
 
-      this.updateScoreAndMove(this.movesCount - 1, score)
+      this.scoresService
+        .addScores(tilesTarget.length)
+        .movesDown()
 
-      const progress = Math.min(this.scoresCount / this.targetScoresCount, this.targetScoresCount)
+      const progress = this.scoresService.progress
       this.topBar.updateProgress(progress)
-      // this.cameras.main.shake(150, 0.008)
     }
 
-    if (this.scoresCount >= this.targetScoresCount)
+    if (this.scoresService.scores >= this.scoresService.scoresTarget)
     {
       this.nextLevel()
     }
-    else if (this.movesCount <= 0)
+    else if (this.scoresService.moves <= 0)
     {
       this.endDefeat()
     }
   }
 
-  resetScoreAndMove ()
-  {
-    this.updateScoreAndMove()
-  }
-
-  updateScoreAndMove (move = this.maxMovesCount, score = 0)
-  {
-    this.movesCount = move
-    this.scoresCount = score
-  }
-
   endDefeat ()
   {
     this.stopScene()
@@ -106,7 +138,7 @@ export default class SceneLevel extends SceneGame
 
   nextLevel ()
   {
-    const scoreOnLevel = this.scoresCount
+    const scoreOnLevel = this.scoresService.scores
     this.stopScene()
 
     if (this.nextScene === 'SceneWin')
@@ -120,7 +152,10 @@ export default class SceneLevel extends SceneGame
 
   stopScene ()
   {
-    this.resetScoreAndMove()
+    this.scoresService
+      .resetScores()
+      .resetMoves()
+
     this.scene.stop()
   }