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

[Antonoff]

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.

 

[Mike]

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 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

[rich]

Great stuff Have pinned this topic as I think it serves as a good introduction to just making something in Phaser, regardless of the approach.

[K1kk0z90]

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!

[Rudrabhoj Bhati]

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 ) {} ??

 

https://github.com/shichuan/javascript-patterns/blob/master/general-patterns/function-declarations.html

 

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

[Mike]

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() {}

 

rather: 

 

obejct.pad = function() {}

 

or just

 

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

 

In general not bad topic.

[K1kk0z90]

Regarding my post, now it works correctly with Phaser 1.1.1!