Javascript lesson four. Arcanoid game. Game model.

Hi folks,

hope you managed to break your code apart. Today I bought another boring lecture about the game model. Why boring — there will be a lot of abstract thins and nothing changes significantly on the screen. On the other hand, we need to understand how the data flow in big application is organized and how is it made that programmers can handle hundreds of files and not get mad.

Spoiler: there will be another boring abstract session next time.
The lesson after the next one ties all these abstract thing together and allows you eventually to play your own game.

Ok, what is the game itself?

  • The game is the data bundle or let’s say data model.
    • All the active objects (bricks, ball, racket) belong to the data model.
  • Actors (one or more) do some actions and impact the data model in their own way.
    • If ActorOne is strong enough it pulls data to its side,
    • …and eventually we get the situation when ActorOne wins (if the game is finite).
  • That bring us to the necessity to add some conditions that decide which actor wins.

A tricky point about actors here: we have two actors in this game.
Who’s the second guy? — It’s the timer.
I know it sounds unexpected but it meets all the conditions from this chapter:

  • it changes the data model (the ball) and
  • it can win (actually you can fail but who cares :)) when the timer makes the ball touch the ground.

Bring some code!

Lets refactor our code first:

  1. create the .reset() method for each GameObject (it will reset the object to the values it was created with).
    • Pay attention, we attach this method to each object instance, not to the prototype because each object will have its own initial values.
  2. Remove the initialization logic from GAME.Ball, GAME.Bricks, GAME.Racket: we will init ’em later.

Now go ahead with the game model:

GAME = {
  Model: {
    Playground: null, // let's keep it here despite it's immutable
    Racket: null,
    Ball: null,
    Bricks: [],
    init: function () {
      // here we init all the components from above

  Actors: {
    User: {
      init: function () {},
       * Analyses `the Model` (actually returns `true` when no bricks left)
       * @return {Boolean}
      winsWhen: function () {}
    Timer: {
      init: function () {},
      start: function () {},
      pause: function () {},
      // similar to the `User`
      winsWhen: function () {}

  State: {
   // a place where general things are kept, like points or lives

…something like that. Whilst creating your code don’t forget to break your code into modules like we did in previous lesson!

My code is on the GitHub respecting our branching convention.


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