Refactored main, boot, and splash states

index.html

@@ -8,6 +8,7 @@
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
     <meta http-equiv="cleartype" content="on">
+    <link rel="stylesheet" type="text/css" href="style.css">
 
     <style>
         html,

src/imgTable.js

@@ -0,0 +1,22 @@
+export const imgTable = {
+  'sky': 'assets/images/back.png',
+  'cherry': 'assets/images/cherry-7.png',
+  'bullet': 'assets/images/star.png',
+  'spikes': 'assets/images/spikes.png',
+  'gem': 'assets/images/gem.gif',
+  'groundTile': 'assets/images/groundTile.png',
+  'healthbarBorder': 'assets/images/healthbar.png',
+  'tree': 'assets/images/tree.png',
+  'hiddenPlatform': 'assets/images/hiddenPlatform.png',
+  'treeTop': 'assets/images/treeTop.png',
+  'treeTrunk': 'assets/images/treeTrunk.png',
+  'black': 'assets/images/black.png',
+  'forest': 'assets/images/middle.png',
+  'crate-button': 'assets/images/white-button.png'
+}
+
+export const spriteTable = {
+  'player': ['assets/images/player-full.png', 32, 32],
+  'bot': ['assets/images/Old enemies 2 (1).png', 16, 16],
+  'blueBot': ['assets/images/blueBot.png', 16, 16]
+}

src/main.js

@@ -11,11 +11,9 @@ import config from './config'
 
 class Game extends Phaser.Game {
   constructor () {
-    // const docElement = document.documentElement
-    // const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
-    // const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight
-    const width = config.gameWidth
-    const height = config.gameHeight
+    const docElement = document.documentElement
+    const width = docElement.clientWidth > config.gameWidth ? config.gameWidth : docElement.clientWidth
+    const height = docElement.clientHeight > config.gameHeight ? config.gameHeight : docElement.clientHeight
 
     super(width, height, Phaser.CANVAS, 'content', null)
 

src/states/Boot.js

@@ -15,11 +15,12 @@ export default class extends Phaser.State {
       active: this.fontsLoaded
     })
 
-    let text = this.add.text(this.world.centerX, this.world.centerY, 'Loading...', { font: '16px Cabin Sketch', fill: '#dddddd', align: 'center' })
+    let text = this.add.text(this.world.centerX, this.world.centerY, 'Loading...', { font: '20px Cabin Sketch', fill: '#b4de5b', align: 'center' })
     text.anchor.setTo(0.5, 0.5)
 
-    this.load.image('loaderBg', './assets/images/loader-bg.png')
-    this.load.image('loaderBar', './assets/images/loader-bar.png')
+    // can load images here
+    // this.load.image('loaderBg', './assets/images/loader-bg.png')
+    // this.load.image('loaderBar', './assets/images/loader-bar.png')
   }
 
   create () {
@@ -29,6 +30,7 @@ export default class extends Phaser.State {
     this.game.renderer.renderSession.roundPixels = true // no blurring
   }
   render () {
+    this.game.stage.backgroundColor = '#fff'
     if (this.fontsReady) {
       this.state.start('Splash')
     }

src/states/Splash.js

@@ -1,5 +1,6 @@
 import Phaser from 'phaser'
-import { centerGameObjects } from '../utils'
+import { imgTable, spriteTable } from '../imgTable'
+import { centerGameObjects, loadImages, loadSprites } from '../utils'
 
 export default class extends Phaser.State {
   init () {}
@@ -8,53 +9,46 @@ export default class extends Phaser.State {
     // this.loaderBg = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBg')
     // this.loaderBar = this.add.sprite(this.game.world.centerX, this.game.world.centerY, 'loaderBar')
     // centerGameObjects([this.loaderBg, this.loaderBar])
-
     // this.load.setPreloadSprite(this.loaderBar)
-    //
-    // load your assets
-    //
-    this.load.image('sky', 'assets/images/back.png')
-    // this.load.image('ground', 'assets/images/platform.png')
-    this.load.image('cherry', 'assets/images/cherry-7.png')
-    this.load.image('bullet', 'assets/images/star.png')
-    this.load.image('spikes', 'assets/images/spikes.png')
-    this.load.image('gem', 'assets/images/gem.gif')
-    this.load.image('groundTile', 'assets/images/groundTile.png')
-    this.load.image('healthbarBorder', 'assets/images/healthbar.png')
-    this.load.image('tree', 'assets/images/tree.png')
-    this.load.image('hiddenPlatform', 'assets/images/hiddenPlatform.png')
-    this.load.image('treeTop', 'assets/images/treeTop.png')
-    this.load.image('treeTrunk', 'assets/images/treeTrunk.png')
-    this.load.image('black', 'assets/images/black.png')
-    this.load.image('forest', 'assets/images/middle.png')
-    this.load.image('crate-button', 'assets/images/white-button.png')
-
-    this.load.spritesheet('player', 'assets/images/player-full.png', 32, 32)
-    this.load.spritesheet('bot', 'assets/images/Old enemies 2 (1).png', 16, 16)
-    this.load.spritesheet('blueBot', 'assets/images/blueBot.png', 16, 16)
-    // this.load.spritesheet('cat', 'assets/images/cat_fighter_sprite1.png', 50, 50)
 
+    // Load assets
+    loadImages(imgTable, this)
+    loadSprites(spriteTable, this)
   }
 
   create () {
-    this.game.stage.backgroundColor = "#b4de5b"
-    var skyTile = this.game.add.tileSprite(0, 0, 288, 192, 'sky')
-    skyTile.fixedToCamera = true
-    this.game.add.tileSprite(-60, this.game.world.height - 100, 176, 368, 'forest')
-    var flipTile = this.game.add.tileSprite(50, this.game.world.height - 70, 176, 368, 'forest')
-    this.game.add.tileSprite(120, this.game.world.height - 100, 176, 368, 'forest')
-    this.game.add.tileSprite(190, this.game.world.height - 100, 176, 368, 'forest')
-    this.titleText = this.game.add.text(70, 40, 'Forest Adventure', { font: "20px Cabin Sketch", fill: "#ffffff", align: "center" })
-
-    // this.titleText.fixedToCamera = true
-    var button = this.game.add.button(this.game.world.centerX, this.game.world.centerY + 40, 'crate-button', this.startGame, this, 2, 1, 0)
-    button.anchor.setTo(0.5)
-    button.alpha = 0.9
-    this.startText = this.game.add.text(this.game.world.centerX, this.game.world.centerY + 42, 'Start', { font: "15px Cabin Sketch", fill: "#47f3ff", align: "center" })
-    this.startText.anchor.setTo(0.5)
+    this.splashBackground()
+    this.startButton()
   }
 
   startGame () {
     this.state.start('Game')
   }
+
+  splashBackground () {
+    this.game.stage.backgroundColor = '#b4de5b'
+    const skyTile = this.game.add.tileSprite(0, 0, 288, 192, 'sky')
+    skyTile.fixedToCamera = true
+    this.buildForest()
+    this.titleText = this.game.add.text(70, 40, 'Forest Adventure', { font: '20px Cabin Sketch', fill: '#ffffff', align: 'center' })
+  }
+
+  buildForest () {
+    const positions = [
+      [-60, this.game.world.height - 100, 176, 368],
+      [50, this.game.world.height - 70, 176, 368],
+      [120, this.game.world.height - 100, 176, 368],
+      [190, this.game.world.height - 100, 176, 368]
+    ]
+    positions.forEach(pos => this.game.add.tileSprite(...pos, 'forest'))
+  }
+
+  startButton () {
+    const button = this.game.add.button(this.game.world.centerX, this.game.world.centerY + 40, 'crate-button', this.startGame, this, 2, 1, 0)
+    button.anchor.setTo(0.5)
+    button.alpha = 0.9
+    this.startText = this.game.add.text(this.game.world.centerX, this.game.world.centerY + 42, 'Start', { font: '15px Cabin Sketch', fill: '#47f3ff', align: 'center' })
+    this.startText.anchor.setTo(0.5)
+    return button
+  }
 }

src/utils.js

@@ -3,3 +3,15 @@ export const centerGameObjects = (objects) => {
     object.anchor.setTo(0.5)
   })
 }
+
+export const loadImages = (imgTable, context) => {
+  Object.keys(imgTable).forEach(name =>
+    context.load.image(name, imgTable[name])
+  )
+}
+
+export const loadSprites = (spriteTable, context) => {
+  Object.keys(spriteTable).forEach(name =>
+    context.load.spritesheet(name, ...spriteTable[name])
+  )
+}

style.css

@@ -0,0 +1,4 @@
+#content {
+  margin: 0 auto;
+  height: 100vh;
+}