Question

//getting canvas element and setting context
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//setting canvas hight & width
canvas.width = 800;
canvas.height = 608;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";

//Y
//|
//|
//. _ _ X
//
// X Y W H

//map array
var map = [
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,1],
    [1,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,2,1],
    [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
    [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

var x = 0;
var y = 0;
var imgSize = 32;

//images
var tiles = new Image();
var player = new Image();

//image source
tiles.src = "images/tileMap.png";

function init() {
    drawMap();
    drawPlayer();
}

function drawMap() {
    for (j = 0; j <= map.length; j++) {
        for (i = 0; i < map[1].length; i++) {
            if (map[j][i] == 1) {
                context.drawImage(tiles,0,0,imgSize,imgSize,x,y,imgSize,imgSize);
            } else if (map[j][i] == 2) {
                context.drawImage(tiles,imgSize,0,imgSize,imgSize,x,y,imgSize,imgSize);
            } else if (map[j][i] == 3) {
                context.drawImage(tiles,imgSize*2,0,imgSize,imgSize,x,y,imgSize,imgSize);
            }
            x = x + imgSize;
        }
        x = 0;
        y = y + imgSize;
    }
}

function drawPlayer() {
    context.drawImage(tiles,imgSize*3,0,imgSize,imgSize,0,0,imgSize,imgSize);
}

您好！我有一个问题在这里加载播放器在地图数组的顶部，并想知道是否有人可以指出我做错了什么，谢谢！

此外，我在控制台中出现错误＆＃34;未捕获类型错误：无法读取属性＆＃39; 0＆＃39;未定义＆＃34;。

此外，当我在地图工作之前加载播放器时，会发生一些奇怪的事情。我删除了游戏所在的图块并显示出来。但是当我在地图后加载播放器时它并没有出现。我猜测它与错误有关。

Answer 1

您的＆＃34;未捕获的类型错误＆＃34;因为你这样做而出现：

for (j = 0; j <= map.length; j++) {
map[j][i]...
}

如果您的地图包含3个元素。您可以使用map [0]，map [1]和map [2]访问每个元素，但map [3]将返回undefined。在你的循环中，以我的例子为例，j从0变为3并尝试访问map [3]。 map [3]返回undefined，因此您无法访问未定义的属性[i]。

您必须写for (j = 0; j < map.length; j++) {

在地图数组顶部加载播放器

1 个答案: