javascript - 图像未显示在表格中

Question

我正在通过我的大学提供的 vanilla JS 类(class)自学。这门类(class)仅在vanilla JS 中，所以没有jQuery(真可惜，我知道...)。

我的问题不是寻求帮助解决问题，而是试图弄清楚为什么某些问题没有出现。

我们的任务是使用教授提供的框架代码创建一个简单的抱石冲刺游戏。

我创建了一个二维数组来保存游戏 map ，其中数组中的每个元素都包含一个与特定 .png 文件相对应的引用(数字)。

在之前使用过 CSS 和 JS 之后，我知道您可以使用元素的 z 轴将某些内容放在另一个元素的“上方”。但是，就我而言，它似乎不起作用，或者我遗漏了其他东西。

在我绘制 map 的 if 子句中，您可以看到我要查找的第一个数字 (9) 创建了一个单元格，其中包含名为“baddie”的类(玩家)，但也会持有一个引用“打开”的 ID。

var newRow = false;
content.appendChild(document.createElement('table'));
for (var row = 0; row < 10; row++) {
    // Each column in row
    if (newRow) {
        content.appendChild(document.createElement('tr'));
    }
    for(var col = 0; col < 10; col++){
        if (gameArea[row][col] == 9){
            tile = document.createElement('td');
            tile.id = 'open';
            tile.className = 'baddie';
            content.appendChild(tile);
            console.log("IM HERE");
        } else if (gameArea[row][col] == 10){
            tile = document.createElement('td');
            tile.id = 'open';
            content.appendChild(tile);
        }
        else if (gameArea[row][col] == 11){
            console.log("found one");
            tile = document.createElement('td');
            tile.id = 'wall';
            content.appendChild(tile);
        } else if (gameArea[row][col] == 12) {

        } else {

        }
    }
    newRow = true;

我希望 baddie(因为具有更高的 z-index)将被放置在“open”之上，但这似乎并没有发生。即使我删除了对“open”的引用，“baddie”也不会出现。

这是我设置的 JS-fiddle 的链接:jsFiddle ，您可以在其中找到所有代码。

如果我的问题不够清楚，我需要弄清楚为什么 Kyubi 文件似乎没有出现？

在我的本地文件中，Kyubi.png 文件位于图 block 的父文件夹中:

所有的方 block 都像在 fiddle 中一样出现，但玩家对象没有...

Answer 1

您正在将背景图片 url 设置为 .baddie 类的属性。您的默认背景(非坏人)是通过 id 设置的。

由于css的特殊性，基于id的背景优先级高于类背景。

您还遇到了一个问题，即您将相同的 ID(“打开”)分配给多个元素 - ID 应该是唯一的。

找到一种在 td 元素上设置背景的方法，其特异性低于 id - 尝试将其分配给 td。

  td {
    z-index: 1;
    height: 31px;
    width: 31px;
    background-image: url(https://orionhub.org/file/Todai-OrionContent/images/new/grass0.png);
    border: 1px solid white;
}

js fiddle 通过更改打开的选择器来修复:jsfiddle