数组在 ProcessingJS 中似乎无法正常工作

Question

我目前正在制作一款有趣的游戏，并且想使用数组来绘制关卡。

但是，似乎有一些错误会阻止程序实际绘制矩形。我已经查找了代码中我能想到的几乎所有错误。我什至尝试在 KhanAcademy 上重新学习数组主题，但似乎没有任何东西可以解决我的问题。所以我认为 StackOverflow 是我最后的选择。 You can see the game here，或者如果你只是想看纯代码，it can be found here，如果你认为我的网站会给你带来病毒，你可以在这里看到它：

    var sketchProc = function(processingInstance) {
    with (processingInstance) {
        size(400, 400);
        frameRate(60);      

        // Setup stuff 'n stuff
            noStroke();
            fill(0, 0, 0);
            var scene = 0;
            var controlsEnable = 0;
            var tufdasDebug = 0;
            var tufdasLeve;

        /* Key/control variables (JavaScript key codes:
        http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes)*/
            var keyIsPressed = 0;
            var key_SHIFT = 16;
            var key_CTRL = 17;

        // Position & Size variables
            var jumperXPos = 100;
            var jumperYPos = 360;
            var jumperSize = 20;

        // Counters
            var jumperXCounter = 11;
            var jumperYCounter = 11;
            var shiftCounter = 11;

        keyPressed = function() {
            keyIsPressed = 1;
        };

        keyReleased = function() {
            keyIsPressed = 0;
            resetCounters();
        };

        var askForResolution = function() {
            text("What resolution do you want to play in?", 100, 15);
        };

        var addCounters = function(amount) {
            if (amount) {
                jumperXCounter += amount;
                jumperYCounter += amount;
                shiftCounter += amount;
            } else {
                jumperXCounter ++;
                jumperYCounter ++;
                shiftCounter ++;
            }
        };

        var resetCounters = function() {
            jumperXCounter = 11;
            jumperYCounter = 11;
            shiftCounter = 11;
        };
        var controlsHandler = function() {
            addCounters();

            if (tufdasDebug === 1) { console.log("Handling controls..."); }
            if (keyIsPressed === 1) {
                if (tufdasDebug === 1) { console.log("A key is being pressed..."); }
                if (controlsEnable === 0) {
                    if (tufdasDebug === 1) { console.log("Controls disabled..."); }
                    if (keyCode === key_SHIFT) {
                        if (tufdasDebug === 1) { console.log("Shift is being pressed."); }
                        scene ++;
                        controlsEnable = 1;
                    }
                } else if (controlsEnable === 1) {
                    if (keyCode === UP && jumperYCounter > 10) {
                        jumperYPos -= 20;
                        jumperYCounter = 0;
                    } else if (keyCode === RIGHT && jumperXCounter > 10) {
                        jumperXPos += 20;
                        jumperXCounter = 0;
                    }
                }
            }
        };

        var drawIntroSequence = function(y) {
            textSize(30);
            text("JUMPER", 125, y + 100);
            textSize(15);
            text("Press SHIFT or RSHIFT to continue...\n(make sure to click inside the game first)", 65, y + 300);
        };

        var drawJumper = function() {
            fill(0, 0, 255);
            rect(jumperXPos, jumperYPos, jumperSize, jumperSize);

        };

        var drawtufdasLevel = function() {
            fill(0, 0, 0);
            rect(tufdasLevel[0], tufdasLevel[1], tufdasLevel[2], tufdasLevel[3]);
            rect(tufdasLevel[4], tufdasLevel[5], tufdasLevel[6], tufdasLevel[7]);
        };






        draw = function() {
            background(255, 255, 255);
            if (scene === 0) {
                drawIntroSequence(0);
                var tufdasLevel = [0, 380, 400, 20, 0, 0, 400, 20]; // Space indicates a new command.
            } else if (scene === 1) {
                drawtufdasLevel();
                drawJumper();
            }
            controlsHandler();
        };
}};
var canvas = document.getElementById("tufdaDrawCanvas");
var processingInstance = new Processing(canvas, sketchProc);

Answer 1

要弄清楚到底发生了什么，请通过在浏览器中打开游戏、按 F12 键，然后转到“控制台”选项卡来打开 JavaScript 控制台。

当你的游戏开始时，你会看到错误：

Uncaught TypeError: Cannot read property '0' of undefined at game.js:100

这表明错误发生在草图的第 100 行，即这一行：

rect(tufdasLevel[0], tufdasLevel[1], tufdasLevel[2], tufdasLevel[3]);

所以现在您知道您的 tufdasLevel 变量有问题。让我们看看你在哪里声明它。你在第 12 行有一个：

var tufdasLevel;

这是你的声明，但你的初始化在哪里？你这里有一个，118 行：

var tufdasLevel = [0, 380, 400, 20, 0, 0, 400, 20]; // Space indicates a new command.

啊哈！请注意您如何使用 var 关键字来声明名为 tufdasLevel 的 另一个 变量。这是一个与草图顶部的变量不同的变量，这是第 100 行使用的变量。第 118 行的 tufdasLevel 变量从未使用过 ，并且第 12 行的 tufdasLevel从未初始化。因此，当您的游戏尝试使用该未初始化变量时，您会收到您所看到的错误。

您似乎打算初始化第 118 行的变量，不声明它。尝试从第 118 行删除 var 关键字：

tufdasLevel = [0, 380, 400, 20, 0, 0, 400, 20]; // Space indicates a new command.

您也可以将初始化放在第 12 行。