How to use the phaser.State function in phaser

import Phaser from 'phaser'
import config from '../config'
import {makeGreen, makeYellow, getRandomCheer} from '../utils'
import Player from '../sprites/Player'
import _ from 'lodash'

export default class extends Phaser.State {
	init() {
		this.game.sound.mute = this.loadSoundMuteState()
		this.skipIntro = this.loadSkipIntro()
		if(this.game.device.desktop) {
			this.jumpInput = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR)
		} else {
			this.jumpInput = this.game.input.pointer1
		}
		this.initialOrientation = this.game.scale.isLandscape ? 'landscape' : 'portrait'
	}

	preload() {
		// load sounds
		this.soundCoin = this.game.add.audio('coin')
		this.soundOuch = this.game.add.audio('ouch')
	}

/* globals __DEV__ */
import Phaser from 'phaser'
import Player from '../sprites/Player'
import Meter from '../sprites/Meter'
import Boomerang from '../sprites/Boomerang'
import Score from '../sprites/Score'
import EndGame from '../sprites/EndGame'
import Button from '../sprites/Button'
import LevelManager from '../sprites/LevelManager'
import ControlsUI from '../sprites/ControlsUI'

export default class extends Phaser.State {
    init() {
    }

    preload() {
    }

    create() {
        const bannerText = 'bmrng'
        let banner = this.add.text(this.world.centerX, this.world.centerY, bannerText)
        banner.font = 'Fugaz One'
        banner.padding.set(10, 16)
        banner.fontSize = 190
        banner.fill = '#e7e8c4'
        banner.smoothed = false
        banner.anchor.setTo(0.5)

import * as Phaser from 'phaser';
import $ from 'jquery';
import _ from 'underscore';
import Debug from 'debug/Debug';
import Manager from 'app/Manager';
import Manage from 'states/Manage';
import Market from 'states/Market';
import MainMenu from 'views/MainMenu';
import Onboarding from 'states/Onboarding';


let params = location.search.slice(1);
let DEBUG = params.includes('debug=true');
let DEBUG_MARKET = params.includes('debug_market=true');

class Boot extends Phaser.State {
  preload() {
    // retina support
    this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
    this.game.scale.setUserScale(0.5, 0.5);
    this.game.canvas.id = 'market';
    $(this.game.canvas).appendTo('main');
  }

  create() {
    Manager.newGame('DEFAULTCORP');

    if (DEBUG) {
      Debug.setupCompany(Manager.player);
      window.player = Manager.player;
      window.company = Manager.player.company;
    }

import Phaser from 'phaser'
import { centerGameObjects } from '../utils'

export default class extends Phaser.State {
  init () {}

  preload () {
    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('mole', 'assets/images/mole.png')
    this.load.image('moleWarn', 'assets/images/moleWarn.png')
    this.load.image('target', 'assets/images/target.png')
    this.load.image('meter', 'assets/images/meter.png')
    this.load.image('squareButton', 'assets/images/squareButton.png')

import { forEach, get, last, now } from 'lodash';
import Phaser, { Physics, Keyboard, Tilemap, Group } from 'phaser';
import { updateState } from '../actions/entity';
import { createLocalPlayer, createEntity } from '../factories/entity';
import { createLayer } from '../factories/layer';
import RenderGroup from './groups/render';
import Text from './text';
import StateManager from '../managers/state';
import EntityManager from 'shared/managers/entity';
import { MUSIC_VOLUME, TILE_LAYER } from '../constants';
import { EntityTypes } from 'shared/constants';

// Require for dynamic loading of assets provided by the server.
const req = require.context('resources/assets', true, /\.(png|jpg|mp3|ogg|wav)$/);

class State extends Phaser.State {
  /**
   * Creates the actual game state.
   * @param store
   * @param socket
   * @param {Object} gameData
   * @param {Object} gameState
   * @param {Object} playerProps
   */
  constructor(store, socket, gameData, gameState, playerProps) {
    super();

    this._store = store;
    this._socket = socket;
    this._playerProps = playerProps;
    this._gameData = gameData;
    this._player = null;

import Phaser from 'phaser'
import axios from 'axios'
import _ from 'lodash'
import config from '../config'
import {centerGameObjects} from '../utils'

export default class extends Phaser.State {
	init() {
		this.stage.backgroundColor = config.css.webWhite
	}

	preload() {
	}

	create() {
		const margin = 50
		this.game.add.text(margin, 50, 'High Scores:', config.text.xl)
		const logo = this.game.add.sprite(margin, 100, 'liipLogo')
		logo.scale.setTo(0.62)

		this.playerTimeout = setTimeout(() => {
			this.player = this.game.add.sprite(margin, 100, 'player')
			this.game.add.tween(logo).to({alpha: 0}, 300, Phaser.Easing.Linear.None, true)

import Phaser from 'phaser'
import WebFont from 'webfontloader'
import config from '../config'

export default class extends Phaser.State {
	init() {
		this.stage.backgroundColor = config.css.webWhite
		this.fontsReady = false
		this.fontsLoaded = this.fontsLoaded.bind(this)
	}

	preload() {
		WebFont.load({
			custom: {
				families: ['Liip Etica Bd', 'Ubuntu Mono']
			},
			active: this.fontsLoaded
		})
	}

	create() {

import Phaser from 'phaser';
import { config } from '../config';
import Btn from './ui/btn';
import Background from '../common/actors/background';
import preload from './preload';
import { GAME_SCENES, REACT_SCENES } from '../../model/scene';

export default class Menu extends Phaser.State {
  preload() {
    preload(this.load);
  }

  create() {
    this.stage.backgroundColor = config.backgroundColor;

    this.createBackground();
    this.createPlayBtn();
    this.createShopBtn();
    this.createLogo();
  }

  createLogo() {
    const style = {
      font: '50px Open Sans',

import Phaser from 'phaser'

export default class extends Phaser.State {
  init () {
    this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL
    document.body.style.backgroundColor = '#000'
  }

  preload () {
    const text = this.add.text(
      this.world.centerX,
      this.world.centerY, 'LOADING',
      { font: '16px Arial', fill: '#ff0', align: 'center' })
    text.anchor.setTo(0.5, 0.5)

    let link = document.querySelector("link[rel*='icon']") || document.createElement('link')
    link.type = 'image/x-icon'
    link.rel = 'shortcut icon'
    link.href = 'favicon.png'

import Phaser from 'phaser'
import WebFont from 'webfontloader'

export default class extends Phaser.State {
  init () {
    this.fontsReady = false
    this.fontsLoaded = this.fontsLoaded.bind(this)
  }

  preload () {
    WebFont.load({
      google: {
        families: ['Cabin Sketch']
      },
      active: this.fontsLoaded
    })

    let text = this.add.text(this.world.centerX, this.world.centerY, 'Loading...', { font: '16px Cabin Sketch', fill: '#dddddd', align: 'center' })
    text.anchor.setTo(0.5, 0.5)