帆布OO GameLoop不输出

我有下面的代码，由于某种原因不会输出 - 我得到的错误：
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17帆布OO GameLoop不输出

这一点我敢肯定意味着代码找不到画布元素，我不认为你们中的任何一个可爱的人都知道为什么？

JSDO.IT：http://jsdo.it/neuroflux/wfUK

代码：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      * { margin: 0px; padding: 0px; } 
     </style> 
     <script type="text/javascript"> 
      var BG = {}; //NameSpace 

      BG.Game = function() { //GameSpace 
       canvas = null; 
       this.ctx = null; //Element and Context 
       this.world = new Array(); //The World 
       this.worldSize = 32; //The Size of the World 
       this.nodeSize = 16; //The Size of Each Square 
      }; 


      BG.Game.prototype = { 
       startGame : function() { 
        /** INITIAL SET UP **/ 
        this.canvas = document.getElementById('display'); 
        this.ctx = this.canvas.getContext('2d'); 
        this.canvas.width = 480; 
        this.canvas.height = 480; 

        for (var x = 0; x < this.worldSize; x++) { 
         this.world[x] = new Array(); 
         for (var y = 0; y < this.worldSize; y++) { 
           this.world[x][y] = new Array(); 
           this.world[x][y].push(0); 
         } 
        } 

        this.gameLoop(); 
       }, 

       drawScene : function() { 
        this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); //clear view 

        /** DRAWING **/ 
        for (var x = 0; x < world.length; x++) { 
         for (var y = 0; y < world[x].length; y++) { 
          rect(nodeSize*x,nodeSize*y,nodeSize,nodeSize); 
         } 
        } 
       }, 

       update : function() { 
        /** LOGIC UPDATES **/ 

        /** ENGINE CALLS **/ 
        this.drawScene(); 
        this.gameLoop(); 
       }, 

       gameLoop : function() { 
        setTimeout(function() { 
         requestAnimFrame(this.update, this.canvas); 
        }, 10); 
       } 
      } /** END NS **/ 

      function rect(x,y,w,h,c) { 
       if (c) { 
        var col = c; 
       } else { 
        var col = '#c4c4c4'; 
       } 
       this.ctx.fillStyle = col; 
       this.ctx.fillRect(x,y,w,h); 
      }; 

      window.onload = function() { 
       var g = new BG.Game(); 
       g.startGame(); 
      }; 

      window.requestAnimFrame = (function(){ 
       return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
       function (callback, element){ 
        window.setTimeout(callback, 1000/60); 
       }; 
      }()); 
     </script> 
    </head> 
    <body> 
     <canvas id="display"></canvas> 
    </body> 
</html>

来源

2012-02-02 Barrie Reader

您到setTimeout调用需要的类超出范围 - 一种解决方法是这样的：

update: function (inst) { 
      inst.drawScene(); 
      ... 
} 


gameLoop : function() { 
      var instance = this; 
      setTimeout(function() { 
        requestAnimFrame(instance.update(instance), instance.canvas); 
      }, 10); 
}

凌乱，但它解决了眼前的问题。

来源

2012-02-02 15:54:44 bharling

真棒，很多很多 – 2012-02-02 16:28:09

帆布OO GameLoop不输出

回答

相关问题