问题
我试图随机生成两个图像(字符图像)在表格 td 中的位置,但有时它们不会显示。其中之一或两者都会消失。尝试加载更多次(从 1 到 5)笔,让错误发生。
笔
这是所有代码:penHere
感兴趣的函数
表格\ 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]]
在我用这个在表格中构建 map 之后:
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;
}
我不明白为什么有时一张或两张图片会消失,我们将不胜感激。
最佳答案
假设 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]]
和 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", 细胞);
.
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);
};
关于javascript - 表格内随机生成的图像消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52117480/