javascript - 此示例使用什么 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

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

我要说的是使用原型(prototype)。您使用闭包和对象文字。

就代码而言，还不错。它只是命名空间，所有逻辑均由 .init 调用触发。

许多“模式”(它们并不是真正的模式)都是个人喜好。

如果您想要代码审查，那就是另一个问题了。

引用文献:

• JS prototypical OOP