Javascript lesson 5ive. Arcanoid game. Event handling.

Hi folks,

before we start making things move, one more boring thing that helps us in development.
The issue is, we don’t know when exactly game events happen. But we need to respond somehow on these events. For instance, we never know when the user moves the mouse but we need to move the racket accordingly.
The event handling mechanism comes to rescue.

Terms and prerequisites

  • Event happens unpredictably and we don’t know when exactly.
  • Handler (or listener) is the piece of code that is invoked when the event happens. This is usually the function.
  • Add the handler/listener to the event means make it possible that handler is invoked when event happens.
  • It’s fine to add several different handlers to the event. Sometimes the event has no handlers and cries alone.
  • The event can be emitted, let say ‘Yesss, eventually this happens, voilla!’. At this point all the handlers run.

Ok, got it. So what we gonna do?

Javascript allows handle functions like variables (actually, Function is a data type in JS):

var a = function () {
  return 5;
var b = a(); // 5
var c = a; // c is now function
c(); // 5

This is the treasure. Let’s create the object handlers like this one:

var handlers = {
  eventName_01: [
    // handler one
    function () {/*...*/},
    // handler two
    function () {/*...*/}
    // and so on

  eventName_02: []
  // ...

In addition, let’s add some methods:

  • on (event, handler) attaches the handler to the event (actually it places the handler into the handlers array);
  • off (event, handler) removes the event listener;
  • emit (event) runs all the handlers one by one.
    • Pay attention, we should be able to transfer some additional params to this method. It’s fine when the keyboard handler knows which key was pressed, right? The fine way to do it is call the handler with the parameter that will contain that info.

Q: Why “on” and “off”?
A: Well, it comes from the formula
“on <event-name> do something”,
like “print ‘Hello’ on key press”.
Regarding the “off” — looks like opposite to “on” 🙂

So guys, check out my version of event handling mechanism in the lesson/05 branch, the file is js/dispatcher.js.

What’s next?

Now the gameplay design looks clear:

  • we start the Timer and it starts emitting the event timer 30 times per second (this number might be different according to desired FPS);
    • GAME.Actors.* are already prepared to this, check this out in my code;
  • the Ball listens to that event and does (ok, will do after next lesson :)) Ball.move();
  • when any actor wins, it emits the event <actor-name>:win; the general gameplay listens to that event and does appropriate things,

…and so on!


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s