javascript - 尝试从数组中获取随机图像，取而代之的是所有相同的图像

Question

我试图在 Canvas 上渲染基于图 block 的 map ，其中包含不同图像的 0 和 1 数组这是我创建数组的方法:

var map = [];

function randomImageArray(){

var length = x * y;
var arrayLength = 0;
while(arrayLength < length){
    var randomImg = Math.floor(Math.random() * 2) * 1;
    if(randomImg == 0){
        //mapArray.push('0');
        map.push(0);
        arrayLength += 1; 
    } else {
       // mapArray.push('1');
        map.push(1);
        arrayLength += 1;   
    }
}

}

这就是我阅读它并从中绘制图像的方式

function drawBackground(){
alert(map.toString());
alert(map.length);
for(var tileX = 0; tileX < x; tileX ++) {
    for(var tileY = 0; tileY < y; tileY++) {
        for(var p = 0; p < map.length; p++){
            if(map[p] === 0){
                ctx.drawImage(image, tileX * tileSize,tileY * tileSize , tileSize, tileSize);
            } else if(map[p] === 1) { 
                ctx.drawImage(image2, tileX * tileSize,tileY * tileSize , tileSize, tileSize);   
            }
        }  
    }
  }
}

我的警报弹出一个充满 1 和 0 的数组，长度为 300但在我的 Canvas 上，我得到了一张充满图像 1 或图像 2 的 map

Answer 1

您的drawBackground()函数存在逻辑问题。对于外部循环的每次迭代，您都会循环遍历整个 map，并且显示的唯一图像是 map 中最后一个值指示的图像。试试这个:

function drawBackground() {
    var tileX,
        tileY,
        imageIdx;

    for (tileX = 0; tileX < x; tileX ++) {
        for (tileY = 0; tileY < y; tileY++) {
            imageIdx = map[tileX * tileY];
            if (imageIdx === 0) {
                ctx.drawImage(image, tileX * tileSize,tileY * tileSize , tileSize, tileSize);
            } else if (imageIdx === 1) { 
                ctx.drawImage(image2, tileX * tileSize,tileY * tileSize , tileSize, tileSize);   
            }
        }
    }
}

您可以通过引用数组中的图像并使用 map 值对其进行索引来进一步清理它:

var images = [image, image2];
function drawBackground() {
    var tileX,
        tileY;

    for (tileX = 0; tileX < x; tileX ++) {
        for (tileY = 0; tileY < y; tileY++) {
            ctx.drawImage(images[map[tileX * tileY]], 
                          tileX * tileSize,
                          tileY * tileSize, 
                          tileSize, 
                          tileSize);
        }
    }
}