CODEWITHSUNDEEP
javascriptprototype
Risto Novik
Risto Novik

Reputation: 8295

Can not modify inside prototype array

Well the problem is with the Game's instance of rects: [], which should be array of objects Rect. When i access the rects property inside Game gives 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);

Upvotes: 0

Views: 65

Answers (1)

Guffa
Guffa

Reputation: 700342

The draw method is not called as a method of the object, it's called as a function in the global scope, so this will be a reference to window, not to the Game object.

Copy this to a variable, and use it to call the method from a function:

var t = this;
window.setInterval(function() { t.draw(); }, 1000 / 30);

Upvotes: 2

Related Questions