0

問題は、ゲームの rects: [] のインスタンスにあります。これは、オブジェクト Rect の配列である必要があります。Game 内の rects プロパティにアクセスすると、undefined が返されます。

http://jsbin.com/ibilec/34/edit

(function(window, document, console) {
  'use strict';

  function Rect() {
    this.x = 0;
    this.y = 0;
    this.width = 20;
    this.height = 20;
  }

  Rect.prototype.draw = function(ctx) {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };


  var Game = Object.create({    
    rects: [],  /// PROBLEM IS WITH this

    draw: function() {
      console.log('Draw called', this.rects);
      if (this.rects) {
        this.rects.forEach(function(rect, index) {
          console.log(rect);
          rect.draw(this.ctx);
        });
      }

      //window.setInterval(function() { this.ctx.clearRect(0, 0, 200, 200); }, 1000);


    },

    genRect: function() {
      var newRect = new Rect();
      newRect.x = parseInt(Math.random() * 200, 10);
      newRect.y = parseInt(Math.random() * 200, 10);

      this.rects.push(newRect);
    },

    loop: function() {
      //Game.draw();
      // Frame rate about 30 FPS

      window.setInterval(this.draw, 1000 / 30);
    },

    init: function() {
      this.canvas = document.getElementById('game'); 
      this.height = this.canvas.height;
      this.width = this.canvas.width;

      window.ctx = this.canvas.getContext('2d');


      this.genRect();
      this.loop(); //start loop
    }
  });

  var game = Object.create(Game);
  game.init();
})(window, document, console);
4

1 に答える 1

2

drawメソッドはオブジェクトのメソッドとして呼び出されるのではなく、グローバル スコープ内の関数として呼び出されるため、Game オブジェクトではなく へのthis参照になります。window

変数にコピーthisし、それを使用して関数からメソッドを呼び出します。

var t = this;
window.setInterval(function() { t.draw(); }, 1000 / 30);
于 2013-01-13T12:57:31.977 に答える