Какой образец объекта javascript использует этот пример?

Question

Я делаю javascript / canvas игру и я видел этот пример на CSS Tricks.Вот ссылка http://css -tricks.com / 9876-learn-canvas-snake-game / # comment-100804

В любом случае, мне интересно, потому что я рефакторинг своей игрыкод, и создание моих собственных объектов, и до сих пор это выглядит как хороший образец для использования.

Для меня это выглядит как шаблон модуля раскрытия, о котором я читал на http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Так я прав?

/* 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
  };
})();

Кроме того, есть ли лучший шаблончто я должен использовать при создании объектов в игре javascript / canvas?

Если вы хотите проверить мою игру, перейдите на мой сайт.http://magnut.comze.com

Игра, которую я создал, называется Fruit Blitz, и следующее обновление, над которым я сейчас работаю, станет большим, с врагами, усилениями и прочим.

Answer 1

Кроме того, есть ли лучший шаблон, который я должен использовать при создании объектов в игре javascript / canvas?

Я собираюсь сказать, использовать прототипы. Вы используете замыкания и литералы объектов.

Что касается кода, это не плохо. Это просто пространство имен, и вся логика запускается вызовом .init.

Многие из этих «шаблонов» (на самом деле они не являются шаблонами) являются личными предпочтениями.

если вы хотите пересмотреть код, тогда это другой вопрос.

Ссылка:

• JS, прототип ООП

Answer 2

Это не разоблачающий шаблон модуля. Шаблон модуля позволяет моделировать закрытые члены в JS, оборачивая открытые члены в блок return.

Для меня это просто JS с пространством имен (пространство имен JS_SNAKE).

Answer 3

Это непосредственно экземплярная функция (IIF), которая возвращает объект одним методом. Он создает метод JS_SNAKE.game.init, который может использовать все, что назначено в ИИФ путем замыкания. Я не знаю, имеет ли он конкретное имя шаблона. . Он известен как шаблон модуля .

См. этот SO-вопрос о немедленном вызове функции

Из ответа Рейноса я бы хотел позаимствовать: Многие из этих "шаблонов" (на самом деле они не являются шаблонами) являются личными предпочтениями .

Возможно, вам будет интересно узнать больше о шаблоне-прототипе - основе javascript - , это может стать хорошим началом.