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

Question

我目前正在制作一个游戏，只是为了好玩，想用数组来绘制关卡。

但是，似乎有一些错误阻止了程序实际绘制矩形。我已经查找了代码中几乎所有我能想到的错误。我什至尝试在 KhanAcademy 上重新学习数组主题，但似乎没有什么可以解决我的问题。所以我认为 Whosebug 是我最后的选择。 You can see the game here, or if you just wanna see the pure code, 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

要弄清楚到底发生了什么，请打开 JavaScript 控制台，方法是在浏览器中打开游戏，按 F12 键，然后转到 "Console" 选项卡。

游戏开始时，您会看到错误：

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 行。

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

Arrays dosen't seem to work correctly in ProcessingJS

arrays

processing

processing.js