Phaser Template

In this example below you will see how to do a Phaser Template with some HTML / CSS and Javascript

Base Phaser kit for quick html5 game dev prototyping.http://twitter.com/benjaminmiles http://phaser.io/

Thumbnail
This awesome code was written by benjaminmiles, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright benjaminmiles ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Phaser Template</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="game"></div>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-19784624-1', 'auto');
  ga('send', 'pageview');

</script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.6/phaser.min.js'></script>
<script src='js/d14661d23aaff5e33949bd197.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/benjaminmiles/phaser-template-BrHbe */
body {
  background: #222;
}

#game {
  width: 800px;
  height: 600px;
  margin: 50px auto;
}


/*Downloaded from https://www.codeseek.co/benjaminmiles/phaser-template-BrHbe */
(function() {
  //PREVIEW IMAGE
  var create, game, preload, preview, render, update;

  preview = new PreviewImage("https://phaser.io/images/img.png");

  //PRELOAD
  preload = function() {};

  
  //CREATE
  create = function() {
    var style, text;
    
    //remove preview image
    preview.clear();
    
    //add some text to the scene
    text = "PHASER STARTER";
    style = {
      font: "45px Arial",
      fill: "#FFFFFF",
      align: "center"
    };
    return game.add.text(180, 200, text, style);
  };

  
  //UPDATE
  update = function() {};

  
  //RENDER
  render = function() {};

  
  //INIT
  game = new Phaser.Game(800, 600, Phaser.AUTO, "game", {
    preload: preload,
    create: create,
    update: update,
    render: render
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTtBQUFBLE1BQUEsTUFBQSxFQUFBLElBQUEsRUFBQSxPQUFBLEVBQUEsT0FBQSxFQUFBLE1BQUEsRUFBQTs7RUFDQSxPQUFBLEdBQVUsSUFBSSxZQUFKLENBQWlCLGtDQUFqQixFQURWOzs7RUFJQSxPQUFBLEdBQVUsUUFBQSxDQUFBLENBQUEsRUFBQSxFQUpWOzs7O0VBUUEsTUFBQSxHQUFTLFFBQUEsQ0FBQSxDQUFBO0FBR1AsUUFBQSxLQUFBLEVBQUEsSUFBQTs7O0lBQUEsT0FBTyxDQUFDLEtBQVIsQ0FBQSxFQUFBOzs7SUFHQSxJQUFBLEdBQU87SUFDUCxLQUFBLEdBQ0U7TUFBQSxJQUFBLEVBQU0sWUFBTjtNQUNBLElBQUEsRUFBTSxTQUROO01BRUEsS0FBQSxFQUFPO0lBRlA7V0FJRixJQUFJLENBQUMsR0FBRyxDQUFDLElBQVQsQ0FBYyxHQUFkLEVBQW1CLEdBQW5CLEVBQXdCLElBQXhCLEVBQThCLEtBQTlCO0VBWk8sRUFSVDs7OztFQXdCQSxNQUFBLEdBQVMsUUFBQSxDQUFBLENBQUEsRUFBQSxFQXhCVDs7OztFQTRCQSxNQUFBLEdBQVMsUUFBQSxDQUFBLENBQUEsRUFBQSxFQTVCVDs7OztFQWdDQSxJQUFBLEdBQU8sSUFBSSxNQUFNLENBQUMsSUFBWCxDQUFnQixHQUFoQixFQUFxQixHQUFyQixFQUEwQixNQUFNLENBQUMsSUFBakMsRUFBdUMsTUFBdkMsRUFDTDtJQUFBLE9BQUEsRUFBUyxPQUFUO0lBQ0EsTUFBQSxFQUFRLE1BRFI7SUFFQSxNQUFBLEVBQVEsTUFGUjtJQUdBLE1BQUEsRUFBUTtFQUhSLENBREs7QUFoQ1AiLCJzb3VyY2VzQ29udGVudCI6WyIjUFJFVklFVyBJTUFHRVxucHJldmlldyA9IG5ldyBQcmV2aWV3SW1hZ2UoXCJodHRwczovL3BoYXNlci5pby9pbWFnZXMvaW1nLnBuZ1wiKVxuXG4jUFJFTE9BRFxucHJlbG9hZCA9IC0+XG4gIFxuICBcbiNDUkVBVEVcbmNyZWF0ZSA9IC0+XG4gIFxuICAjcmVtb3ZlIHByZXZpZXcgaW1hZ2VcbiAgcHJldmlldy5jbGVhcigpXG4gIFxuICAjYWRkIHNvbWUgdGV4dCB0byB0aGUgc2NlbmVcbiAgdGV4dCA9IFwiUEhBU0VSIFNUQVJURVJcIlxuICBzdHlsZSA9XG4gICAgZm9udDogXCI0NXB4IEFyaWFsXCJcbiAgICBmaWxsOiBcIiNGRkZGRkZcIlxuICAgIGFsaWduOiBcImNlbnRlclwiXG5cbiAgZ2FtZS5hZGQudGV4dCgxODAsIDIwMCwgdGV4dCwgc3R5bGUpXG5cbiAgXG4jVVBEQVRFXG51cGRhdGUgPSAtPlxuICBcblxuI1JFTkRFUlxucmVuZGVyID0gLT5cbiAgXG5cbiNJTklUXG5nYW1lID0gbmV3IFBoYXNlci5HYW1lKDgwMCwgNjAwLCBQaGFzZXIuQVVUTywgXCJnYW1lXCIsXG4gIHByZWxvYWQ6IHByZWxvYWRcbiAgY3JlYXRlOiBjcmVhdGVcbiAgdXBkYXRlOiB1cGRhdGVcbiAgcmVuZGVyOiByZW5kZXJcbikiXX0=
//# sourceURL=coffeescript

Comments