I'm new to javascript (third day!) but i've been a programmer for a long time. I have the following problem when using the setInterval function of javascript:
<script>
  var canvasObj, canvasContext;
  var tetrisObj;
  main();
  function main() {
    log("call init");
    init();
    tetrisObj.startGame(canvasContext)
    log("finished");
  }
  function init() {
    canvasObj = document.getElementById("Tetris");
    canvasContext = canvasObj.getContext("2d");
    tetrisObj = new tetris(canvasObj.width, canvasObj.height);
  }
  function log(string) {
    var p = document.createElement("p");
    var text = document.createTextNode(string);
    p.appendChild(text);
    document.getElementById("logs").appendChild(p);
  }
  function tetris(width, height) {
    this.width = width;
    this.height = height;
    this.b_width = width * 0.1;
    this.b_height = width * 0.1;
    this.block_container = new Array();
    this.tetris_context;
    this.startGame = function(canvasContext) {
      this.tetris_context = canvasContext;
      this.addBlock();
      this.gameLoop();
      setInterval(this.gameLoop, 500);
    }
    this.gameLoop = function() {
      this.updateBlocks();
      this.drawBlocks();
    }
    this.updateBlocks = function() {
      var i = 0;
      log(this.block_container.length);
      for (i = 0; i < this.block_container.length; i++) {
        if (this.block_container[i].y >= 20 * this.b_height) {
          continue;
        } else {
          this.block_container[i].y += this.b_height;
          log(this.block_container[i].y);
        }
      }
    }
    this.addBlock = function() {
      var new_block = new s_block(0, 0, "black", this.b_width, this.b_height);
      this.block_container.push(new_block);
    }
    this.drawBlocks = function() {
      var i = 0;
      for (i = 0; i < this.block_container.length; i++) {
        this.block_container[i].drawBlock(this.tetris_context);
      }
    }
  }
  function s_block(x, y, color, width, height) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.width = width;
    this.height = height;
    this.drawBlock = function(context) {
      context.save();
      context.fillStyle = color;
      context.fillRect(this.x, this.y, this.width, this.height);
      context.restore();
    }
  }
</script>The problem I have is that when running the "startGame()" function of the code snippet above, the direct call to this.gameLoop is found, but the indirect call to this.gameLoop via setInterval fails. I think this might be because it gets executed in the global context which messes with the "this" object. However I don't quite see how to fix it elegantly!
 
    