表格内随机生成的图像消失

Question

问题

我尝试在表格 td 中随机生成两个图像（角色的图像）的位置，但有时它们不会显示。其中之一或两者都会消失。尝试加载更多次（从 1 到 5 次）笔以使错误发生。

笔

这里是所有代码：penHere

感兴趣的函数

table\map 是如何构建的？ 这是一个随机生成的二维数组，如下所示：

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

在我用这个在表中构建地图之后：

function mapGenerate(map){

        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) {
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                if(map[i][j] === 0){
                    map[i][j]="<div class=\"tile\"><img class=\"walkable\" src=\"https://image.ibb.co/bGanFz/floor_Resized.png\"></div>";
                }else{
                    map[i][j]="<img class=\"nonWalkable\" src=\"https://image.ibb.co/m9s1az/volcanoresize.png\">";
                }    
                ;
            }
            $("#tableGame").append("<tr><td>"+ map[i].join('</td><td>') + "</td></tr>")    
        }
}

使用下面的函数我选择坐标（它们是正确的，我在控制台中检查了几次）

function placeCharAndItem(char){


    let rowCoord= mapA.length;
    let cellCoord = mapA[1].length;
    //this object is to save 2 random number, the row and the cell 
    let coord={
        row: Math.floor(Math.random() * rowCoord),
        cell: Math.floor(Math.random() * cellCoord)
        };  
    //I need this 2 variables to check if the tiles is a correct one
    let toCheck = mapA[coord.row][coord.cell];     
    let check= toCheck.search('nonWalkable');

    //if it's not correct(you found the sub-string "non- 
    //walkable"), this while loop have to generate random new 
    //coordinates.

    while(check != -1){
        coord.row=Math.floor(Math.random() * rowCoord);
        coord.cell=Math.floor(Math.random() * cellCoord);
        toCheck = mapA[coord.row][coord.cell];     
        check= toCheck.search('nonWalkable');
    };   
        place(coord, char);
};

最后，在我有 2 个有效坐标后，我可以显示角色：

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

这些是关于表格和图像字符的 css：

#tableGame .td{
  position: relative;
}

.char{
    z-index: 1000;
}

#tableGame .char {
  position: absolute;
}

table{
    background-color: black;
    border-collapse: collapse;
    border: 2px solid white;
    box-shadow: 1px 1px 30px white;
}


tr{
    border: 0px;
    padding: 0px;
    margin:0px;
}

td{
    border: 0px;
    padding: 0px;
    margin:0px;
}

我不明白为什么有时其中一个或两个图像会消失，任何形式的帮助都会非常感激。

Answer 1

假设地图 =

  [[1,1,1,1,0],
   [1,0,0,0,0],
   [1,0,1,1,1],
   [1,0,0,0,1],
   [1,1,1,0,1]]

而coord.row = 0，coord.cell = 4，那么$(".tile", row) 将是一个仅在 1 .tile 内的 jQuery 对象。它将tile 设置为undifined 而不会prepend 图像。

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  var tile = $($(".tile", row)[coord.cell]);
  tile.prepend(charImage);
};

所以我认为您可以将var tile = $($(".tile", row)[coord.cell]); 替换为var tile = $(".tile", cell);。

function place(coord, char){
  console.log('sei entrato nella funzione place');
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);

  // will out of bounds if the coord.cell is greater than the jQuery object $(".tile", row)
  // var tile = $($(".tile", row)[coord.cell]);

  var tile = $(".tile", cell);
  tile.prepend(charImage);
};