Phaser 3: ES6 Webpack Project Template

Leave a comment Standard

So I’ve been playing around with Phaser 3 a lot lately and one of the biggest issues for me was getting it up and running with Babel and Webpack along with writing unit tests and jsdoc and all that fun stuff. Hence why I decided to make this nice little project template repo that you can use to start development on your own Phaser 3 game.

Grab the code here:

Phaser 3 Webpack ES6 Project Template

A Phaser 3 project template using webpack, SASS, Babel ES6, and eslint set to use the airbnb preset. It also includes a folder of example scripts to help start your development.


We need Node.js to install and run scripts.

Setup & Development Commands

Run the appropriate command in your terminal:

Command Description
npm install Install dependencies and launch browser with examples.
yarn start Launch browser to show the examples.
Press Ctrl + c to kill http-server process.
yarn deploy Create a distributed version of the build that’s minified and uglified.
yarn lint Run the linter, defaults to using airbnb style guide (
yarn lint:fix-dry-run Run the linter and automatically fix without saving changes.
yarn lint:fix Run the linter and automatically fix problems and save changes.
yarn test Run the unit tests. Looks for files matching the pattern *.test.js.
yarn test:watch Run the unit tests but keep watch for changes.
Press Ctrl + c to kill the watch process.

Grab the Code

GIT Tutorial: Fetching and Testing Pull Request Branches Locally

Leave a comment Standard

There are a lot of times when you’re using Git and BitBucket in a work environment and you want to be able to test someone’s PR branch without having to download a patch or clone it. Here’s a nifty trick that will allow you to fetch and checkout PR branches on your master repo without having to clone or patch from BitBucket.

1. Add your remote master as an upstream

git remote add upstream ssh://user@myrepo.git

2. Change your new remote to fetch from your pull requests instead of regular branches

git config --add remote.upstream.fetch '+refs/pull-requests/*/from:refs/remotes/upstream/pr/*'

3. Now fetch the PR branches that are currently available in your repo

git fetch upstream

4. Finally, you can use the ID of the PR you want (the ID will be available in the URL of the link to the PR) and simply checkout the PR with that ID number by replacing ID with the number of the PR in the code snippet below.

git checkout upstream/pr/ID

5. Voila! You’ve now downloaded a PR branch to your local git instance and can run it like you would for any other branch.

Jasmine Tutorial: Unit Testing Promises In Angular Services

Leave a comment Standard

So recently I’ve been doing a lot of Angular unit tests with Jasmine and Grunt. I have to say, testing promises is extremely frustrating and most of the examples I found out there either 1) didn’t work or 2) wouldn’t allow you to test content in a then block if you had multiple chained promises, or if you had a promise being called from and returned from another service. After many hours of frustrating trial and errors I found a solution I’m happy with so I want to share.

Let’s assume this is your controller:

'use strict';

angular.module('myModule').controller('myCtrl', ['$scope', 'api',
function ($scope, $api) {

  $ = null;
  $scope.message = null;

  * Load some data from the API service
  * @return boolean
  $scope.loadData = function () {

    var config = {
      method: 'GET',
      url: '',
      headers: {'Content-Type': 'application/json'},
      data: null

    return $api.load(config).then(function (request) {
      if (request) {
        $scope.message = 'Your data was successfully loaded';
        $ = request.response;
        return true;
      } else {
        $scope.message = 'The API service failed';
      return false;

And here is the service making your API calls:

'use strict';

angular.module('myModule').service('api', ['$rootScope', '$http',
  function ($rootScope, $http) {

    * Makes the $http request given the proper configuration options
    * @param Object configruation for the $http request
    * @return Object $http promise that resolves to request payload or error
    this.load = function (options) {
      return $http({
        method: options.method || 'GET',
        url: options.url || '',
        headers: options.headers || null,
        data: || null
        function (request) {
          //we got a response back, return just the API payload data
          if (request.status === 200 && {
          } else {
            return {
              results: false,
              message: 'API request error',
              response: request

Finally, this is your working unit tests:

'use strict';

describe('testing myModule', function () {


  var $controller, $rootScope, $scope, $api, $httpBackend, $q;

    inject(function (_$controller_, _$rootScope_, api, _$httpBackend_, _$q_) {
      $controller = _$controller_;
      $rootScope = _$rootScope_;
      $httpBackend = _$httpBackend_;
      $q = _$q_;
      $api = api;
      $scope = $rootScope.$new();

      $httpBackend.when('GET').respond('test http GET call');
      $httpBackend.when('POST').respond('test http POST call');

      $controller('myCtrl', {
        $scope: $scope,
        $api: $api

  it('has a $scope.loadData() function', function() {

    var testConfig = {
      method: 'POST',
      url: '',
      data: { some: 'data'}

    var fakeData = { data: 'is fake' };

    //we spy on the API service and also return a fake promise call
    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        deferred.resolve({result: true, response: fakeData});
        return deferred.promise;

    $scope.loadData(testConfig); //call the function we're testing in the controller
    $scope.$apply(); //we have to call this so Angular will try and resolve the promise
    expect($api.load.calls.count()).toEqual(1); //make sure it's called the api service
    expect($scope.message).toEqual('Your data was successfully loaded');

  it('returns an error if the API fails', function() {

    var testConfig = {
      method: 'POST',
      url: '',
      data: { some: 'data'}

    spyOn($api, 'load').and.callFake(
      function() {
        var deferred = $q.defer();
        result: false,
        message: 'api error'
      return deferred.promise;

    expect($scope.message).toEqual('api error');

Continue reading

HTML5 Tutorial: Simple Music Player

Leave a comment Standard

So this is a pretty simple example but I was playing around with flash for my chat room and this was byproduct of that experimentation. It’s funny how even when I’m trying to learn something new I do my best to make it useful for other situations which is a good habit to get into if you’re not doing it already.

Try out the working demo or download the code


This will only work on a browser that is HTML5 compliant and has support for audio. That means older browsers and most versions of Internet Explorer are not supported. Firefox, Chrome and Opera work as well as the newest versions of Internet Explorer.

The Audio Tag

If you’re familiar with HTML then most of the index file below will look pretty familiar. The thing you really have to pay attention to is the new <audio> tag. It looks like this:

<audio id="rock" src="" preload="auto"></audio>

You may notice that it looks a whole lot like a hyperlink with the src that defines the location of the file. Preload is an optional attribute, it tells your browser to start downloading the file as soon as the DOM, or page elements, have finished loading. In addition to setting preload to true I’ve added an ID attribute so I can reference this particular song in my music player.

The Index File

<!DOCTYPE html>
 <script data-require="jquery@*" data-semver="2.1.3" src=""></script>
 <link data-require="bootstrap-glyphicons@*" data-semver="3.2.1" rel="stylesheet" href="" />
 <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//" />
 <script data-require="bootstrap@*" data-semver="3.3.1" src="//"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
 <h1 class="text-center">Bootstrap HTML5 Music Player</h1>
 <audio id="rock" src="" preload="auto"></audio>
 <audio id="blues" src="" preload="auto"></audio>
 <audio id="electronica" src="" preload="auto"></audio>
 <audio id="classical" src="" preload="auto"></audio>
 <audio id="latin" src="" preload="auto"></audio>
 <audio id="indie" src="" preload="auto"></audio>
 <div class="audiocontroller">
 <i class="audio-logo glyphicon glyphicon-headphones"></i>
 <i class="dynamiclink glyphicon glyphicon-play" id="play"></i></a>
 <i class="dynamiclink glyphicon glyphicon-pause" id="pause"></i>
 <select id="currentTrack">
 <option value="rock">Rock</option>
 <option value="blues">Blues</option>
 <option value="electronica">Electronica</option>
 <option value="classical">Classical</option>
 <option value="latin">Latin</option>
 <option value="indie">Indie</option>
 <i class="dynamiclink glyphicon glyphicon-stop" id="stop"></i>
 <p class="text-center">
 <a id="author" href="" target="_blank">by, LLC</a>

The Javascript File

//Simple HTML5 Music Player by, LLC

var currentTrack = null;
var paused = false;

$(document).ready(function() {
 currentTrack = $('#currentTrack').val();
 $("#play").click(function() { play(); });
 $("#stop").click(function() { stop(); });
 $("#pause").click(function() { pause(); });

function play() {

 //set the track back to the beginning
 if (!paused) {
 currentTrack = $('#currentTrack').val();
 //make sure track starts from the begining each time

 //play the track
//stop playing the current track
function stop() {
 if (currentTrack) {
 paused = false;

//stop the track but don't go back to the beginning
function pause() {
 paused = true;

How It All Works

So now let’s talk about the javascript file. At first glance it looks relatively simple because it is! When you want to select a track you simply ask for it using getElementById and then you tell it to play or to pause. One thing that is sadly lacking is a stop() functionality. With html5 you can only pause an audio file — which does stop the playback but it also keeps the audio file at the same position as when you called pause on it. This means that if you wanted to play the audio file from the beginning again and you just called play() it would continue playing from where it left off. That’s where the load() function comes into play — this will tell the audio track to start loading if it wasn’t set to preload and it will reset the track back to the beginning.

The only other thing to mention is the currentTrack variable. I use this to keep track of which of the songs is currently selected and the user wasn’t to listen to.

Linux Tutorial: Fix Heartbleed on Ubutntu 14.04

Leave a comment Standard

I’ll keep this short and sweet!

sudo apt-get update && sudo apt-get install --only-upgrade bash

PHP Tutorial: Number Guessing Game (no database required)

Comments 4 Standard

Wow I guess it’s been a while since I’ve posted anything. I’ve been busy moving and working on my games but I did find a few minutes to make this little game. This randomly picks a number and then lets the player try to guess the number. If you like this game you might also like my Ajax Tic-Tac-Toe game or Ajax Hangman game. This assumes that you’ve already done some of my other game tutorials so you are familiar with my game manager and how it works. You can read the code below or you can be lazy and can download the code or view a working example.

* File: oop/class.guessnumber.php
* Author:, LLC
* Created: 8.21.2014
* License: Public GNU

class guessnumber extends game
    var $guesses;              //int - maximum guesses per game
    var $randomNumber = null;  //int - the random number they're trying to guess
    var $min = 50;             //int - the lowest value the random number can have
    var $max = 500;            //int - the highest value the random number can have

    * Purpose: default constructor
    * Preconditions: none
    * Postconditions: parent object started
    function guessnumber()
        * instantiate the parent game class so this class
        * inherits all of the game class's attributes 
        * and methods
    * Purpose: start a new guessing game
    * Preconditions: maximum number of guesses
    * Postconditions: game is ready to be displayed
    function newGame($max_guesses = 5, $min = null, $max = null)
        //set the min and max values for the random number
        if (!$min)
            $min = $this->min;
            $this->min = $min;
        if (!$max)
            $max = $this->max;
            $this->max = $max;
        //setup the game
        //generate the random number
        $this->randomNumber = rand($min, $max);
        //set how many guesses they get before it's a game over
        if ($max_guesses)
    * Purpose: set or retrieve maximum guesses before game over
    * Preconditions: the data submitted from the form
    * Postconditions: guess is calculated
    function playGame($postdata)
        //player pressed the button to start a new game
        if ($postdata['newgame'] || empty($this->guesses))
        //player is trying to guess a number
        if (!$this->isOver() && $postdata['number'])
            echo $this->guess($postdata['number']);
        //display the game
    * Purpose: set or retrieve maximum guesses they can make
    * Preconditions: amount of guesses (optional)
    * Postconditions: guesses has been updated
    function setGuesses($amount = 0)
        $this->guesses += $amount;
    * Purpose: display the game interface
    * Preconditions: none
    * Postconditions: start a game or keep playing the current game
    function displayGame()
        //while the game isn't over
        if (!$this->isOver())
            echo "<div id=\"range\">I'm thinking of a number from " . number_format($this->min) . " to " . number_format($this->max) . ".</div>
                  <div id=\"select_number\">
                        Your Guess:
                        <input type=\"text\" name=\"number\" />
                        <input type=\"submit\" name=\"submit\" value=\"Guess\" />
            //they've won the game
            if ($this->won)
                echo successMsg("Congratulations you guessed my number $this->randomNumber! You've won the game.<br/>
                                Your final score was: $this->score");
            else if ($this->health < 0)
                echo errorMsg("Game Over! Good try, my number was $this->randomNumber.<br/>
                                Your final score was: $this->score");

            echo "<div id=\"start_game\"><input type=\"submit\" name=\"newgame\" value=\"New Game\" /></div>";
    * Purpose: guess a number in this word
    * Preconditions: a game has started
    * Postconditions: the game data is updated
    function guess($number)

        if ($this->isOver())

        if (!$number || !is_numeric($number))
            return errorMsg("Oops! Please enter a number.");
         if ($number < $this->min)
            return errorMsg("You must enter $this->min or higher.");
         if ($number > $this->max)
            return errorMsg("You must enter $this->max ot lower.");

        //if the word contains this number
        if ($number == $this->randomNumber) {
            $this->won = true;
        else //word doesn't contain the number
            //reduce their health
            $this->setHealth(ceil(100/$this->guesses) * -1);
            //calculate 1/6 the random number to get a distance factor
            $distance = floor($this->randomNumber / 8);

            if ($this->isOver())
            else {
                if ($number < $this->randomNumber - ($distance * 4) || $number > $this->randomNumber + ($distance * 4))
                    return errorMsg("So cold.");
                else if ($number < $this->randomNumber - ($distance * 3) || $number > $this->randomNumber + ($distance * 3))
                    return errorMsg("You're getting warmer...");
                else if ($number < $this->randomNumber - ($distance * 2) || $number > $this->randomNumber + ($distance * 2))
                    return errorMsg("Warm, Warm, Warm.");
                else if ($number < $this->randomNumber - $distance || $number > $this->randomNumber + $distance)
                    return errorMsg("You getting hot!");
                    return errorMsg("You're really hot!!");