initial commit

firefoxos-gamedev · Jun 6, 2014 · c3c56e7 · sole · Jun 9, 2014 · soapdog
1 parent 3a70b50
commit c3c56e7
Show file tree

Hide file tree

Showing 27 changed files with 212,694 additions and 3 deletions.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+    "directory":"js"
+}
diff --git a/README.md b/README.md
@@ -1,4 +1,55 @@
-mortar-phaser-game-stub
-=======================
+# Phaser Game Stub
+
+This is a small game template to build games using the [Phaser Framework](http://phaser.io).
+
+This is part of the [mortar](https://github.com/mozilla/mortar/) template collection for building [Open Web Apps](https://developer.mozilla.org/en-US/Apps).
+
+
+## Downloading
+
+There are a few ways to get this template:
+
+If you use [Git](http://www.git-scm.com/):
+
+````bash
+git clone https://github.com/soapdog/mortar-phaser-game-stub.git
+````
+
+Or download the latest version in this [ZIP file](https://github.com/soapdog/mortar-phaser-game-stub/archive/master.zip).
+
+
+## Usage
+
+Start a local server to simulate accessing the hosted app from the browser, and trying the *Install* button flow.
+
+For example:
+
+````bash
+python -m SimpleHTTPServer 8000
+````
+
+then access `localhost:8000` or `your.computer.ip:8000` (for example, `192.168.0.25`) using Firefox (Desktop or Mobile), or the Browser app in a Firefox OS simulator (or device).
+
+You'll need to use the IP address when using a physical device. Change the port accordingly, if you're running a webserver in this port already.
+
+## Phaser Framework
+
+[Phaser](http://phaser.io) is a proven open source framework for creating HTML5 games. It has many features such as input control, game loops, camera control, tilemaps and more all baked in. Its a great tool to help you create your game and not focus on trivia stuff that is not related to your project or vision.
+
+
+## Code walkthrough
+The code is contained in three files &mdash boot.js, preloader.js, game.js &mdash each serves a different purpose and is explained below:
+
+### boot.js
+This file register our listener for the *DOMContentLoaded* event. This event will fire once all the html/css/js files are loaded.
+
+In this file we setup the Phaser framework and register our game states. A game can have multiple game states. This stub has two states each defined in their own file.
+
+### preload.js
+This is the first game state. Its responsible for loading all the assets needed for this stub (in this case the graphic files). Once all the files are loaded, it moves to the next state.
+
+### game.js
+This another game state. It is our **gameloop** in a real game, it would be where you process user input and update your display.
+
+Basically the **preload** state loads the resources to be used in the **game** state.
 
-A web game template using [phaser](phaser.io)
diff --git a/assets/background.png b/assets/background.png
diff --git a/assets/player.png b/assets/player.png
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,6 @@
+html, body {
+    background: #000;
+    display: block;
+    margin: 0;
+    padding: 0;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8" />
+    <title>Phaser Game Stub</title>
+    <link rel="stylesheet" href="css/style.css" type="text/css" />
+    <script src="js/phaser/phaser.js"></script>
+    <script src="js/game/boot.js"></script>
+    <script src="js/game/preloader.js"></script>
+    <script src="js/game/game.js"></script>
+</head>
+<body>
+
+<div id="game"></div>
+
+</body>
+</html>
diff --git a/js/game/boot.js b/js/game/boot.js
@@ -0,0 +1,19 @@
+
+document.addEventListener("DOMContentLoaded", function(event)  {
+
+    //	Create your Phaser game and inject it into the game div.
+
+    // Portrait game orientation. Invert the values if your game is in landscape orientation
+    var width = 320;
+    var height = 480;
+
+    var game = new Phaser.Game(width, height, Phaser.AUTO, "game");
+
+    //	Add the States the game has.
+    game.state.add('Preloader', BasicGame.Preloader);   // <-- Loads the assets
+    game.state.add('Game', BasicGame.Game);             // <-- Game loop.
+
+    //	Now start the Boot state.
+    game.state.start('Preloader');
+
+});
diff --git a/js/game/game.js b/js/game/game.js
@@ -0,0 +1,83 @@
+BasicGame.Game = function(game) {};
+
+/**
+ * This is the Game game state. Its our game loop responsible for the game itself.
+ *
+ * In the create() function we setup the display.
+ * In the update() function we do the gameloop.
+ *
+ * To learn more about states refer to:
+ * Refer to: http://docs.phaser.io/Phaser.State.html
+ */
+
+BasicGame.Game.prototype = {
+    create: function() {
+
+        // Add the background
+        this.add.sprite(0, 0, 'background');
+
+        // Add the player
+        this.player = this.add.sprite(300, 240, 'player');
+        this.physics.arcade.enable(this.player);
+        this.player.enableBody = true;
+        this.player.body.collideWorldBounds = true;
+
+        // Add cursor input.
+        this.cursors = this.input.keyboard.createCursorKeys()
+    },
+
+    update: function() {
+        /*
+        This function is called in a loop using requestAnimationFrame(). It is our game loop, our heartbeat. Every time
+        it is called we process the user input and update the display.
+         */
+
+
+        /*
+         Movement of the player using touch.
+
+         in this case we're just moving him
+         on one axis.
+
+         The keyboard example shows two axis movement.
+
+         To learn more about handling input refer to:
+         http://docs.phaser.io/Phaser.Input.html
+         */
+
+        if (this.input.pointer1.isDown) {
+            if (this.input.pointer1.worldX > 240) {
+                this.player.body.velocity.x = 150;
+            }
+
+            if (this.input.pointer1.worldX <= 240) {
+                this.player.body.velocity.x = -150;
+            }
+        }
+
+        /*
+        Moving the player using the keyboard keys.
+
+        The move here is continuous because we apply
+        a velocity to the axis.
+        */
+
+        if (this.cursors.right.isDown) {
+            this.player.body.velocity.x = 150;
+        }
+
+        if (this.cursors.left.isDown) {
+            this.player.body.velocity.x = -150;
+        }
+
+        if (this.cursors.down.isDown) {
+            this.player.body.velocity.y = 150;
+        }
+
+        if (this.cursors.up.isDown) {
+            this.player.body.velocity.y = -150;
+        }
+
+    }
+
+};
diff --git a/js/game/preloader.js b/js/game/preloader.js
@@ -0,0 +1,36 @@
+var BasicGame = {}; // <-- Object to hold all our game states.
+
+/**
+ * This is the Preloader game state. It is the first to run. It loads all the assets used by the game.
+ */
+
+BasicGame.Preloader = function (game) {
+    // placeholder, you can set some game state options in here if needed.
+    // Refer to: http://docs.phaser.io/Phaser.State.html
+};
+
+BasicGame.Preloader.prototype = {
+
+    /*
+    Game states have many functions that will be called at different stages of its lifecycle.
+
+    You can check these methods at:
+    - http://docs.phaser.io/Phaser.State.html#toc21
+
+    In this case here:
+    - preload(): will be called to load our game assets. Once loaded they are cached and any
+    other game state may use them.
+    - update(): this is the gameloop function. I will be called using requestAnimationFrame() in a loop
+    until we do something to exit. In this case we switch to the Game state.
+     */
+
+    preload: function() {
+        this.load.image('background', 'assets/background.png');
+        this.load.image('player', 'assets/player.png');
+    },
+    update: function() {
+        this.state.start('Game');
+    }
+
+
+};
diff --git a/js/phaser/.bower.json b/js/phaser/.bower.json
@@ -0,0 +1,40 @@
+{
+  "name": "phaser",
+  "version": "2.0.4",
+  "main": "./phaser.js",
+  "homepage": "http://phaser.io",
+  "authors": [
+    "photonstorm <[email protected]>"
+  ],
+  "description": "A fun, free and fast 2D game framework for making HTML5 games for desktop and mobile, supporting Canvas and WebGL.",
+  "keywords": [
+    "html5",
+    "game",
+    "games",
+    "framework",
+    "canvas",
+    "WebGL",
+    "tilemaps",
+    "physics",
+    "sprites",
+    "fonts",
+    "images",
+    "audio",
+    "Web",
+    "Audio",
+    "touch",
+    "input",
+    "mobile"
+  ],
+  "license": "MIT",
+  "_release": "2.0.4",
+  "_resolution": {
+    "type": "version",
+    "tag": "2.0.4",
+    "commit": "312d41912763d901490a6e00d461f95bf0bf475f"
+  },
+  "_source": "git://github.com/nDmitry/bower-phaser.git",
+  "_target": "~2.0.4",
+  "_originalSource": "phaser",
+  "_direct": true
+}
diff --git a/js/phaser/README.md b/js/phaser/README.md
@@ -0,0 +1,17 @@
+# bower-phaser
+
+The source for this package is in the [main Phaser repo](https://github.com/photonstorm/phaser).
+
+## Install
+
+Install with `bower`:
+
+```shell
+bower install phaser
+```
+
+Add a `<script>` to your HTML:
+
+```html
+<script src="/bower_components/phaser/phaser.js"></script>
+```
diff --git a/js/phaser/bower.json b/js/phaser/bower.json
@@ -0,0 +1,30 @@
+{
+  "name": "phaser",
+  "version": "2.0.4",
+  "main": "./phaser.js",
+  "homepage": "http://phaser.io",
+  "authors": [
+    "photonstorm <[email protected]>"
+  ],
+  "description": "A fun, free and fast 2D game framework for making HTML5 games for desktop and mobile, supporting Canvas and WebGL.",
+  "keywords": [
+    "html5",
+    "game",
+    "games",
+    "framework",
+    "canvas",
+    "WebGL",
+    "tilemaps",
+    "physics",
+    "sprites",
+    "fonts",
+    "images",
+    "audio",
+    "Web",
+    "Audio",
+    "touch",
+    "input",
+    "mobile"
+  ],
+  "license": "MIT"
+}