Question

我有以下代码，由于某种原因不会输出 - 我收到错误：
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17

我非常确定这意味着代码根本找不到Canvas元素，我不认为你们中任何一个可爱的人都知道为什么？

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>

Answer 1

您对setTimeout的调用会使该类超出范围 - 解决方法是：

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


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

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

Canvas OO GameLoop不输出

1 个答案: