Phaser current version test environment

Basic Phaser setup for testing

by Lewis Lane

HTML

<script src="https://rawgit.com/photonstorm/phaser/master/build/phaser.min.js"></script>
<div id="container">
  <div id="map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d33410.72485395528!2d-0.14916012653289196!3d51.5083177294012!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1473946659231" width="600" height="400" frameborder="0" style="border:0" allowfullscreen></iframe></div>
  <div id="test"></div>
</div>

CSS

/* We must be sure to set the position of the container to relative otherwise the absolutely positioned sub-elements will be positioned relative to the document instead */
#container {
  position: relative;
}

#map, #test {
  position: absolute;
}

/* We can now put the map behind the game by giving the game a higher z-index */
#map {
  z-index: 1;
}

#test {
  z-index: 2;
}

JavaScript

// Phaser current version test environment

// The 6th parameter sets the game background to transparent
var game = new Phaser.Game(600, 400, Phaser.AUTO, 'test', null, true);

var BasicGame = function (game) {};

BasicGame.Boot = function (game) {};

BasicGame.Boot.prototype = {
    preload: function () {
			this.load.image('arrow', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAuBAMAAACCObfsAAAAFVBMVEUAAAAu5TIkyiwBJ0MfrCQMSTwVezckNAALAAAAAXRSTlMAQObYZgAAAKFJREFUOMul1NEJgDAMBFBX6ApZ4VbICl3B/UfwiDYQsRyS+xF9oSTU9ngFQHn/7Xai58OBlg+baLixInvUjlfYHwuyR+1WQ3Nnj6tA+6gxZ/i8h9Q+1/cnHokhtTPw4r6yhpQ+q2dio7Qf+PYYUvt+feP60rvz5/JZknxShW/313J/tZcQgg1k4Zv/Ow4IWfj+fJKpyvvnv3//9O+/7v17AdmLh5uD4GOYAAAAAElFTkSuQmCC');
    },
    create: function () {
			this.arrow = game.add.sprite(game.world.centerX, game.world.centerY, 'arrow');
      this.arrow.anchor.set(0.5);
    },
    update: function () {
    	this.arrow.angle++;
    },
    render: function () {
			
    }
};

game.state.add('Boot', BasicGame.Boot);
game.state.start('Boot');