正在地图阵列顶部加载播放器

Loading player on top of map array

本文关键字：加载 播放器 顶部 阵列 地图      更新时间：2023-09-26
//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);
}

你好！我在这里的地图阵列顶部加载玩家时遇到了问题，不知道是否有人能指出我做错了什么，谢谢！

我在控制台中也有一个错误"未捕获的类型错误：无法读取未定义的属性"0"。

此外，当我在地图工作之前加载播放器时，会发生一些奇怪的事情。我移除了播放的瓷砖，它就出现了。但当我在地图后面加载播放器时，它不会出现。我猜这与错误有关。

您的"未捕获类型错误"出现是因为您这样做：

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，因此您无法访问undefine的属性[i]。

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

相关文章：