试图从数组中获取随机图像，却得到了相同的结果

Trying to get a random image from array, get all the same instead

本文关键字：结果 数组 获取 图像 随机      更新时间：2023-09-26

我试图在画布上渲染一个基于瓷砖的地图，用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但在我的画布上，我得到的是一个充满image1或image2的地图

您的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);
        }
    }
}
相关文章：