What javascript object pattern is this example using?

Question

I'm making a javascript/canvas game and I saw this example on CSS Tricks. Here's the link http://css-tricks.com/9876-learn-canvas-snake-game/#comment-100804

Anyways, I'm wondering because I'm refactoring my game code, and creating my own objects and so far this looks like a good pattern to be using.

To me, this looks like the Revealing Module Pattern I read about on http://addyosmani.com/resources/essentialjsdesignpatterns/book/

So am I right?

/* NOTE: this is just a snippet from the example, go to the link to see the
finished example */


var JS_SNAKE = {};

JS_SNAKE.game = (function () {
  var ctx;
  JS_SNAKE.width = 200;
  JS_SNAKE.height = 200;
  JS_SNAKE.blockSize = 10;
  var frameLength = 500; //new frame every 0.5 seconds
  var snake;

  function init() {
    $('body').append('<canvas id="jsSnake">');
    var $canvas = $('#jsSnake');
    $canvas.attr('width', JS_SNAKE.width);
    $canvas.attr('height', JS_SNAKE.height);
    var canvas = $canvas[0];
    ctx = canvas.getContext('2d');
    snake = JS_SNAKE.snake();
    bindEvents();
    gameLoop();
  }

  function gameLoop() {
    ctx.clearRect(0, 0, JS_SNAKE.width, JS_SNAKE.height);
    snake.advance();
    snake.draw(ctx);
    setTimeout(gameLoop, frameLength); //do it all again
  }

  function bindEvents() {
    var keysToDirections = {
      37: 'left',
      38: 'up',
      39: 'right',
      40: 'down'
    };

    $(document).keydown(function (event) {
      var key = event.which;
      var direction = keysToDirections[key];

      if (direction) {
        snake.setDirection(direction);
        event.preventDefault();
      }
    });
  }

  return {
    init: init
  };
})();

Also, is there a better pattern that I should be using when creating objects in a javascript/canvas game?

If you would like to check out my game, go to my website. http://magnut.comze.com

The game I created is called Fruit Blitz and the next update which I'm working on right now is going to a big one, with enemies, power ups and such.

score 2 · Answer 1 · edited May 23 '17 at 12:11

2

Also, is there a better pattern that I should be using when creating objects in a javascript/canvas game?

I'm going to say use prototypes. Your using closures and object literals.

As for the code, it's not bad. It's just namespaced and all logic is triggered by an .init call.

A lot of these "patterns" (they aren't really patterns) are personal preferences.

if you want code review then that's a different question.

References:

JS prototypical OOP

edited May 23 '17 at 12:11

Community

1
1

answered Jul 21 '11 at 16:03

Raynos

166,823
56
351
396

+1 for daring the truth: _A lot of these "patterns" (they aren't really patterns) are personal preferences._ – Mrchief Jul 21 '11 at 16:11
I like the namespacing idea, and I looked into prototyping earlier and thats another option I might use. Im just searching for my personal preference I would say. Thanks for the help! – Jacob Jul 21 '11 at 16:13

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

It's a immediately instantiated function (IIF) that returns an object with one method. It creates the JS_SNAKE.game.init method that can use everything assigned within the IIF by closure. ~~I don't know if it has has a specific pattern name.~~. It's known as the module pattern.

See this SO-question about immediate function invocation

From Raynos' answer I'd like to borrow: A lot of these "patterns" (they aren't really patterns) are personal preferences.

You may be interested in reading more about the prototype pattern - the base of javascript - this may be a good start.

edited May 23 '17 at 11:55

Community

1
1

answered Jul 21 '11 at 15:59

KooiInc

119,216
31
141
177

Do you have a link to a resource that can teach me about it? And do you recommend using it? – Jacob Jul 21 '11 at 16:00

score 1 · Answer 3 · answered Jul 21 '11 at 16:02

1

It's not the revealing module pattern. Module pattern allows you to simulate private members in JS by wrapping public members in the return block.

To me, its just JS with namespacing (namespace being JS_SNAKE).

answered Jul 21 '11 at 16:02

Mrchief

75,126
20
142
189

WHOA! What's a namespace? :O I know... noob question. But I searched google quickly. – Jacob Jul 21 '11 at 16:06
2

@Jake namespace is merely a global object that contains information. The global object is considered a namespace because your writing to a single global object rather then adding a lot of global variables. – Raynos Jul 21 '11 at 16:08

What javascript object pattern is this example using?

3 Answers3