Question

在第164行，我试图访问之前定义的数组。我收到错误：

未捕获的TypeError：无法读取属性＆＃39; 3＆＃39;未定义的

我想这与变量范围有关。请告知我如何在那里访问它。

代码：

window.onload = function() {

// A cross-browser requestAnimationFrame
// See https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/
var requestAnimFrame = (function() {
    return window.requestAnimationFrame    ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();



// Create the canvas
var mainContainer = document.querySelector('main');
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;
mainContainer.appendChild(canvas);

// Map 30 x 20 (each square is 20x20)
var mapArray = [
    [1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

// The player's state
var player = {
    x: 0,
    y: 0,
    sizeX: 20,
    sizeY: 20,
    step: 20
};

var rightPressed = false;
var leftPressed = false;
var upPressed = false;
var downPressed = false;


// Let's play this game!
reset();
var then = Date.now();
var running = true;
main();


// Functions ---

// Drawing Tiles
function tiledMap() {
    var cw = canvas.width;
    var ch = canvas.height;


    var tw = 20;
    var th = 20;

    var spritesheet = new Image();
    spritesheet.onload = function () {
        canvas.width = tw * mapArray[0].length;
        canvas.height = th * mapArray.length;
        popMap();
    }

    spritesheet.src = 'images/bwtiles.png';

    function popMap() {
        for (i = 0; i < mapArray.length; i++) {
            for (j = 0; j < mapArray[i].length; j++) {
                var tile = mapArray[i][j];
                ctx.drawImage(spritesheet,
                    tile * 20, 0, tw, th,
                    j * 20, i * 20, tw, th
                );
            }
        }
    }
}

function mapDetection() {
    console.log(player.x, player.y);
}


// Reset game to original state
function reset() {
    player.x = 0;
    player.y = 0;
}

// Update game objects.
// We'll use GameInput to detect which keys are down.
// If you look at the bottom of index.html, we load GameInput
// from js/input.js right before app.js

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    }
    else if(e.keyCode == 38) {
        upPressed = false;
    }
    else if(e.keyCode == 40) {
        downPressed = false;
    }

}

function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    else if(e.keyCode == 38) {
        upPressed = true;
    }
    else if(e.keyCode == 40) {
        downPressed = true;
    }
}

function detectWall() {
    // Detect walls from the array

}
function update() {

    if (rightPressed && player.x < canvas.width - player.sizeX) {
        player.x += player.step;
        rightPressed = false;
        console.log(mapArray[player.x][3]);
    } else if (leftPressed && player.x > 0) {
        player.x -= player.step;
        leftPressed = false;
        console.log(player.x);
    } else if (downPressed && player.y < canvas.height - player.sizeY) {
        player.y += player.step;
        downPressed = false;
    } else if (upPressed && player.y > 0) {
        player.y -= player.step;
        upPressed = false;
    } else {
        rightPressed = false;
        leftPressed = false;
        downPressed = false;
        upPressed = false;
    }
}


// Draw everything
function render() {
    // draw the map
    tiledMap();


    ctx.fillStyle = 'blue';
    ctx.fillRect(player.x, player.y, player.sizeX, player.sizeY);
}

// The main game loop
function main() {
    if (!running) {
        return;
    }
    update();
    render();

    requestAnimFrame(main);
}

};

Answer 1

在你的代码中你有这个：

player.x += player.step;
console.log(mapArray[player.x][3]);

如果你看player.step，你会发现它是20。另请注意，mapArray包含20项。因此，只要player.x增加20（步骤），您就会尝试访问mapArray存储范围之外的数组项。

js - 数组变量范围的问题

1 个答案: