How to use phaser - 10 common examples

var rootScope = {
	options:{
		width:300,
		height:300,
		where:'master-canvas'
	},
	debug:false // make sure set it to false when release
}

// @if !dist
require('./modules/stats')();
// @endif


var game = new Phaser.Game(rootScope.options.width, rootScope.options.height, Phaser.CANVAS, rootScope.options.where, rootScope.options.where);

game.state.add('game', require('./game')(game,rootScope));

// game.state.start('blank');
game.state.start('game');

/* eslint-disable class-methods-use-this */

import * as Phaser from 'phaser';
import { CST } from '../CST';

export default class MenuScene extends Phaser.Scene {
    constructor() {
        super({
            key: CST.SCENES.MENU,
        });
    }

    init(data) {
        console.log(data);
    }

    create() {
        this.sound.play('title_music', {
            loop: true,
        });

        const lava = this.add.particles('lava').setDepth(1);

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)

window.onload = function() {
  // aspec ratio - (160/400)= 0,4
  var game = new Phaser.Game(400, 160, Phaser.CANVAS, '', 
    { init: init, preload: preload, create: create, update: update, render: render });

  var pixel = { scale: 4, canvas: null, context: null, width: 0, height: 0 };

  var hero;
  var cursors;
  var fps;

  function init() {
    // game screen scaling (renders to a backbuffer and copies to main canvas)
    // http://www.photonstorm.com/phaser/pixel-perfect-scaling-a-phaser-game

    //  Hide the un-scaled game canvas
    game.canvas.style['display'] = 'none';
    //  Create our scaled canvas. It will be the size of the game * whatever scale value you've set
    pixel.canvas = Phaser.Canvas.create(game.width * pixel.scale, game.height * pixel.scale);

const height = 1160;
const ignoreKeys = ['company', 'onboarder', 'player'];

function extractData(obj) {
  return _.reduce(_.keys(obj), function(o, k) {
    var val = obj[k];
    if (!_.isFunction(val) && !_.contains(ignoreKeys, k)) {
      o[k] = val;
    }
    return o;
  }, {});
}

// singleton
const Manager = {
  game: new Phaser.Game(width, height, Phaser.AUTO, 'game', null, true),
  save: function() {
    // juggle some properties to avoid circular refs
    var playerData = extractData(this.player),
        companyData = extractData(this.player.company);
    localStorage.setItem('saveGame', JSON.stringify({
      player: playerData,
      company: companyData
    }));
    var lifetimeProfit = this.player.company.lifetimeRevenue - this.player.company.lifetimeCosts,
        highScore = this.highScore();
    if (lifetimeProfit > highScore) {
      localStorage.setItem('highScore', lifetimeProfit.toString());
    }
  },
  load: function() {
    var data = JSON.parse(localStorage.getItem('saveGame'));

import Phaser from 'phaser'
import { Boot, Game } from 'scenes'

const config = {
  type: Phaser.AUTO,
  parent: 'phaser-example',
  width: 800,
  height: 600,
  scene: [
    Boot,
    Game
  ]
}

const game = new Phaser.Game(config) // eslint-disable-line no-unused-vars

export function createGame(store, socket, gameData, gameState, playerProps) {
  const game = new Game(
    get(gameData, 'config.gameWidth') || 800,
    get(gameData, 'config.gameHeight') || 600,
    Phaser.AUTO,
    'phaser',
    null/* state */,
    false/* transparent */,
    false/* antialias */
  );

  game.state.add('game', new Castle(store, socket, gameData, gameState, playerProps), true/* autoStart */);

  return game;
}

window.onload = function () {
  // aspect ratio - (240/160)= 3:2
  const game = new Phaser.Game(240, 160, Phaser.AUTO, ''); 
  // const game = new Phaser.Game(360, 240, Phaser.AUTO, ''); // experiment

  game.state.add('bootstrap', new Bootstrap(game));
  game.state.add('preload', Preloader);
  game.state.add('mainmenu', MainMenu);
  game.state.add('options', Options);
  game.state.add('options-audio', OptionsAudio);
  game.state.add('credits', Credits);
  game.state.add('loading', Loading);
  game.state.add('intro', Intro);
  game.state.add('act1', Act1);
  game.state.add('act2', Act2);
  game.state.add('act5', Act5);
  game.state.add('gameover', GameOver);

  game.state.start('bootstrap');

import Phaser from "phaser";

import constants from "./config/constants";
import GameScene from "./scenes/game";

const config = {
  type: Phaser.AUTO,
  width: constants.WIDTH,
  height: constants.HEIGHT,
  physics: {
    default: "arcade",
    arcade: {
      gravity: {
        y: 200
      },
      debug: false
    }
  },
  scene: [GameScene]
};

// eslint-disable-next-line no-new
new Phaser.Game(config);