Javascript lesson three. Arcanoid game. Organize your code.

Ok Google, where is my whiskey continuing with the Arcanoid game and Javascript lessons.

Before we start,

I believe you already know:

  • variable scope in Javascript;
  • objects;
  • JS Functions; anonymous functions; self-executing functions (read here).

Why modules?

Applications in real life are big enough. That means thousands lines of code. If all they were in one file, it would be really hard to handle it.
The obvious solution is divide the code in several files. There are some pitfalls here:

  • if you declare a variable in the file outside the function, this variable becomes global.
    • Now imagine how many i variables should you have for all the cycles you use?
  • An non-obvious outcome here: the variable that is significant in one file, can be spoiled in another.
  • What if other people would like to use your code? Should they take into accounting all the trash temporary variables you used?

Ok, what should we do?

  1. Let’s create as few global objects as possible. One should be enough.
    1. If you analyze JS libraries, they usually do so. Rarely they create one more extra shorthand in the global namespace (like $ and jQuery).
  2. That object should be of Object or Function type.
    1. What should you choose? — usually Object is more flexible. But if your code should do few things or produce some result, it’s fine to use the Function too.
  3. Each file (module) should be provide one part of the functionality and it’s better if this part is finalized: separate files should describe the ball and the racket.
  4. Modules can depend on each other but should not overlap each other:
    • GAME.ball and GAME.racket can require GAME.utils (since the last one contains methods for DOM handling),
    • but no ball functionality should be determined in GAME.racket neither any util.
    • You can ask for any separate module if you need it.
  5. Since modules provides functional parts one by one, after we load the last module we can run the game.
  6. We need to encapsulate (privatize) any temporary variables inside the module so we will use self-executing functions for it.
    1. An advantage of this approach is, we can control precisely what exactly is attached to the module.

Q: What about requireJS, AMD, browserify?
A: Nothing wrong; they work fine and do well what they were designed for. The principles I described work for all these module systems too.
Moreover, they do lot things for you, for instance, you do not need to wrap something in self-executing functions when you use browserify.
As I said before, we gonna write the the game without involving third party libraries and will do it simply.
After you understand how modules should work, you can easy migrate to any module system.

So I changed the code structure in the js/ folder and changed the HTML tags to conform the new structure. The code will be available on the GitHub in a day or two.
Hope you enjoy this.

Advertisements

One thought on “Javascript lesson three. Arcanoid game. Organize your code.

  1. Hi folks,

    here is the code on the GitHub. Some notes about my version:

    • all the elements inside the playground are wrapped in the object containing all the numbers we will be working with (x, y, width, height);
    • all the elements inside the playground resemble each other (logically, not visually :)) so it’s fine to instantiate ’em from one constructor (GameObject).

    Have fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s