Question

我正在制作一个javascript / canvas游戏，我在CSS Tricks上看到了这个例子。这是链接 http://css-tricks.com/9876-learn-canvas-snake-game/#comment-100804

无论如何，我想知道因为我正在重构我的游戏代码，并创建我自己的对象，到目前为止这看起来像是一个很好用的模式。

对我来说，这看起来像我读过的Revealing Module Pattern 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 prototypical OOP

Answer 2

它是一个立即实例化的函数（IIF），它使用一个方法返回一个对象。它创建了JS_SNAKE.game.init方法，可以通过闭包使用IIF中指定的所有内容。 ~~我不知道它是否有特定的模式名称。~~。它被称为module pattern。

关于立即函数调用，请参阅this SO-question

从Raynos的回答中我想借用：很多这些“模式”（它们不是真正的模式）是个人偏好。

您可能有兴趣阅读有关原型模式的更多信息 - javascript的基础 - this可能是一个良好的开端。

Answer 3

这不是揭示模块模式。模块模式允许您通过将公共成员包装在return块中来模拟JS中的私有成员。

对我而言，它只是带有命名空间的JS（命名空间为JS_SNAKE）。

这个例子使用什么javascript对象模式？

3 个答案: