Hello everyone im new and need some advice

[TheNewRobot]

Hey everyone I am new to the HTML5 world. I have made a few flash games before, and I consider myself a decent AS3 programmer. I am still learning Javascript at the moment, trying to get the hang of things. I was wondering if anyone here could point me in a good direction on what books would be good for me. I have already downloaded easeljs and played around with it for a little bit ,but there are still something that I just don't get. I just downloaded Phaser because I read that it was much faster than easeljs, so I will probably go through some tutorials on that sometime this weekend.

 

My specific question really is about inheritance and extending a class. As I understand it in Javascript all variables and functions are global unless they are encapsulated.  I want to program in the similar style as I did in AS3 where each Class would be a different object in my game, but every tutorial I find everything seems to be done in either one JS file or on the html file. In AS3 I would program each class independently create a static array variable  in each class and push that object when they were created so that other classes could interact with each other. I would really like to know if this kind of thing in Javascript is possible, and if I'm using the correct framework to do just that. Also if this comes off very noobish I'm sorry I'm still going through the tutorial on CodeAcademy on Javascript.

 

P.S. If this post comes off as a little scattered brained I'm sorry.

[d13]

Hello, and welcome to the forum!

 

> books

 

For games, you could try this one: http://www.apress.com/programming/javascript/9781430247166

It might make sense to you if you have a Flash background.

The best general book on JavaScript I've read is Stoyan Stephanov's JavaScript Patterns:

http://shop.oreilly.com/product/9780596806767.do

 

> I have already downloaded easeljs and played around with it for a little bit ,but there are still something that I just don't get

 

​I actually suggest you don't start using any frameworks yet until you're more comfortable coding in pure JS/HTML5. It's not hard at all to create your own framework from scratch, tailored to your project. That way you learn JS and HTML5  completely, plug the framework's inevitable leaks and bugs, and avoid having to work inside someone else (possibly) awkwardly designed logic system. 

​You can build a complete game from scratch, including a the sprite and rendering system and sound system, in pure JS/HTML5 with only a few hundred lines of code.

Then, rather than a complete game engine, consider incorporating a good rendering system (Pixi), and a good sound system (Howler), over top of your own logic framework.

Phaser is probably the best current general purpose game engine out there, but you should look at some newcomers like Goo.

 

> I want to program in the similar style as I did in AS3 where each Class would be a different object in my game

 

There aren't any classes in JavaScript. Instead, just pure objects, like this:

 

var monster = {

  eyes: 10,

  sayHello: function () {

    console.log("Hello!");

  }

};

 

console.log(monster.eyes)

//Displays: "10"

 

monster.sayHello();

//Displays: "hello"

 

That might be all you need.

Although JavaScript does have inheritance (objects can inherit from other objects), I suggest you don't use it. That's because JavaScript's *prototypal inheritance* works nothing at all like class-based inheritance that you use in AS3 and Java. That's by design. It's a complex topic, but the bottom line is that if you use prototypal inheritance, it can be unclear which properties belong to the parent and which belong to child, and, if you not sure about this, it can lead to extremely difficult to diagnose bugs your code.

 

So instead of inheritance, you can use functional composition. Just create a function that returns an object containing the properties that you need:

 

function monster () {

  var o = {

    eyes: 10,

    sayHello: function() {

      console.log("Hello!");

   }

  };

  return o;

}

 

Create the monster like this:

 

var sprite = monster();

 

"sprite" is now an object that contains all the properties and methods of the object returned by the monster function.

 

You can initialize new sprites by using a config object as an argument, like this:

 

sprite = monster({

  eyes: 6

});

 

Then set up the monster function to accept a configuration object as an argument, like this:

 

function monster (config) {

  var o = {

    eyes: config.eyes,

    sayHello: function() {

      console.log("Hello!");

   }

  };

  return o;

}

 

sprite.eyes will now have the vaue "6"

 

This is a fun system, and really powerful because you can call functions inside other functions to create objects composed of other objects (research the "mixin pattern" and it's many variants). It's completely modular, but flat, so you don't have to worry about long chains of inheritance hierarchies.

 

> every tutorial I find everything seems to be done in either one JS file or on the html file

 

Unlike AS3 you don't have to create a new file for each class. Just  organize your code into different files that seem to make sense in your project.

 

This is a huge topic, obviously, but I hope this helps a bit. In general I find making games with HTML5/JS a lot more fun and a lot easier than with Flash/AS3, so it's worth the time you spend learning it.

[TheNewRobot]

Yea it's starting to make sense, thanks. I'm going to get that javascript book for sure, because I really want to get a good understanding of the language and the object creation patterns.

[postepenno]

Just a small note: there is an easy inheritance implementation in JS. You can use a technique described here: http://ejohn.org/blog/simple-javascript-inheritance/

[OadT]

If you want to see how you can implement inheritance in JS I can also recommend this site. But as d13 already mentioned it's different from object orientated languages, so be careful.

 

@d13 Is there a reason why you didn't use the new invocation? like:

function Monster (numberOfLegs) {    this.eyes = 10;    this.legs = numberOfLegs    this.sayHello = function() {        console.log("Hello!");    }};var sprite = new Monster(7); //creates Monster with 10 eyes and 7 legs 

I just want to know if there is anything bad at this code

[Sebi]

I'm using class.js by John Resig http://ejohn.org/blog/simple-javascript-inheritance/

var Person = Class.extend({  init: function(isDancing){    this.dancing = isDancing;  }}); var Ninja = Person.extend({  init: function(){    this._super( false );  }}); var p = new Person(true);p.dancing; // => true var n = new Ninja();n.dancing; // => false

[dmitsuki]

You might want to check out Phaser with typescript, example code from my current project

module GoRocket{    export class Boot extends Phaser.State     {        preload()        {            this.load.image("LoadImage", "assets/loader.png");        }        create()        {            this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;            this.stage.scale.pageAlignHorizontally = true;            this.game.stage.scale.refresh();            this.game.state.start("Preloader", true, false);        }    }} 

There is another engine made completely in typescript, however it's name currently escapes me.

[d13]

On second thought, just use ES6 classes with Traceur.

 

Here's how to use classes:

http://www.es6fiddle.net/hsc8kr9x/

 

And you're need Traceur:

https://github.com/google/traceur-compiler

 

(Traceur complies your code down to ES3 so you can use modern syntax and still have backwards compatibility)

[TheNewRobot]

Thanks guys I was looking into TypeScript, and since it complies into JavaScript there should be no performance difference between coding in JavaScript or TypeScript, right?

[away168]

Thanks guys I was looking into TypeScript, and since it complies into JavaScript there should be no performance difference between coding in JavaScript or TypeScript, right?

 

I'm using TypeScript and I believe the compiled results are as close as JS native. TypeScript is just a sugar coated code almost like CoffeeScript as it has explicit syntax, unlike Google Dart where the compiled code are fully modified (aiming to be faster than normal on large scale codes, like asm.js).

 

Be careful though, JavaScript is an interpreted language that reads in order. So even if you use TypeScript, in case of doing large-scale development, you have to carefully design your code to avoid circular reference. This means if you have a cross-reference between two classes (A have B and B have A) during class initialization, it may throw an error. This issue becomes very common to rise when your application goes larger, and unfortunately still very hard to solve yet unless you manage to carefully design your code.