Javascript js-数组变量作用域的问题

在第164行中，我试图访问前面定义的数组。我得到一个错误：

未捕获的TypeError:无法读取未定义的属性“3”

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

代码：

window.onload=function（）{
//跨浏览器请求动画帧
//看https://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/
var requestAnimFrame=（函数（）{
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
//创建画布
var mainContainer=document.querySelector（'main'）；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（“2d”）；
画布宽度=600；
画布高度=400；
mainContainer.appendChild（画布）；
//地图30 x 20（每个正方形为20x20）
变量映射数组=[
[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]
];
//球员的状态
变量播放器={
x:0,，
y:0，
尺码：20，
西西：20，
步骤：20
};
var-rightspressed=false；
var leftPressed=false；
var upPressed=假；
var-downPressed=false；
//让我们玩这个游戏吧！
重置（）；
var then=Date.now（）；
var running=true；
main（）；
//功能---
//画砖
函数tiledMap（）{
var cw=画布宽度；
var ch=画布高度；
var-tw=20；
var-th=20；
var spritesheet=新图像（）；
spritesheet.onload=函数（）{
canvas.width=tw*mapArray[0]。长度；
canvas.height=th*mapArray.length；
popMap（）；
}
spritesheet.src='images/bwtiles.png'；
函数popMap（）{
对于（i=0；i0）{
player.x-=player.step；
leftPressed=false；
console.log（player.x）；
}else if（按下&player.y0）{
player.y-=player.step；
upPressed=false；
}否则{
右压=假；
leftPressed=false；
按下=假；
upPressed=false；
}
}
//画一切
函数render（）{
//画地图
tileMap（）；
ctx.fillStyle='蓝色'；
ctx.fillRect（player.x，player.y，player.sizeX，player.sizeY）；
}
//主游戏循环
函数main（）{
如果（！正在运行）{
返回；
}
更新（）；
render（）；
请求帧（主）；
}
};

在您的代码中有以下内容：

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

如果您查看

player.step

，您将看到它是

20

。还要注意，

mapArray

包含

20

项。因此，只要

player.x

增加了

20

（步骤），您就试图访问

mapArray

存储范围之外的数组项。

您真的应该过去

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