Question

我试图在画布上渲染基于图块的地图，不同图像的数组为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的地图

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);
        }
    }
}

试图从数组中获取随机图像，取而代之的是相同的

1 个答案: