Jump to content

Coding an HTML5-game for 30 minutes, or an introduction to the Phaser framework


Recommended Posts

Hello guys, 

I'm new to HTML5 game dev and new to this community, but still I want to share my tutorial about Introduction to the Phaser framework. 

This tutorial is about Pong game. 


Demo: http://gamedev.antonoffplus.com/games/phaser-pong/

Full tutorial: http://www.antonoffplus.com/coding-an-html5-game-for-30-minutes-or-an-introduction-to-the-phaser-framework/


Any feedback found be great. Thank you in advance.


Link to comment
Share on other sites

Well it's a little strange to write tutorials when you're learning the framework yourself...


But on the other side you have a demo and it works :P so readers can still learn how to make it so i like it.


The only thing which came to my mind is that i didn't find a link for a archive of the game so i can download it and experiment myself.

Well i checked the source code of course but a beginner user may find it easy to have the source code locally.


Ahhh and good choice to pick up phaser ;)

Link to comment
Share on other sites

Thank you for this tutorial! I'm following it to try using Phaser.

I have a problem: when I call

playerBat = createBat(game.world.centerX, game.world.height - 80);

in the create function, the bat is not placed at horizontal center. It seems like if it's considering the sprite anchor (0, 0). But in the createBat function I set anchor to the center:

        // add a bat sprite to the game and return its reference        function createBat(x, y) {            var bat = game.add.sprite(x, y, 'bat');            bat.anchor.setTo(0.5, 0.5); // set hotspot to the center of the image            bat.body.collideWorldBounds = true; // don't allow the bat to exit from screen            bat.body.bounce.setTo(1, 1); // ???            bat.body.immovable = true; // when colliding with something, don't be thrown away            return bat;        }

Note that I'm using version 1.07 of Phaser, probably a more recent version than the version used for this tutorial. Do you have changed something in Phaser that makes it not work? The code is almost the same of the tutorial (just changed some variables name, the y position of the player bat, and the world size).


Thank you in advance! :)

Link to comment
Share on other sites

I am not greatest JavaScript expert, indeed I am new to it... But isn't var xyz =  function ( a,b ) {}; or var xyz =  function xyzF ( a,b ) {}; standard pattern instead of function xyz ( a,b ) {} ??




^That site called function xyz (a, b ) like declarations anti pattern....

Link to comment
Share on other sites

About the last post check this article: http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/


I personally dont see it as antipatern once you realize the difference. In some bigger code base you always goes for functions as methods to object and classes so you wouldn't see much

function abc() {}




obejct.pad = function() {}


or just


pad: function (str, len, pad, dir) {}  //as of phaser ;)


In general not bad topic.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...