Question

问题

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

笔

这里是所有代码：penHere

有趣的功能

表格\地图是如何构建的？这是一个2d随机生成的数组，如下所示：

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

桌子内随机生成的图像消失

1 个答案: