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

 

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

 

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

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

 

rather: 

 

obejct.pad = function() {}

 

or just

 

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

 

In general not bad topic.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...