Question

我正在通过我的大学提供的香草JS课程。这个课程在vanilla JS中只有，所以没有jQuery（更糟糕，我知道......）。

我的问题不是要求帮助解决问题，而是试图找出为什么没有出现的东西。

我们的任务是使用教授提供的骨架代码创建一个简单的巨石破折号游戏。

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

之前我曾经使用过CSS和JS，我知道你可以使用项目的z轴将某些东西放在另一个项目之上。但是，就我而言，它似乎没有用，或者我错过了其他的东西。

在我正在绘制地图的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小提琴的链接：jsFiddle，您可以在其中找到所有代码。

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

在我的本地文件中，Kyubi.png文件位于磁贴的父文件夹中：

所有的瓷砖都像小提琴一样出现，但不是玩家对象......

Answer 1

您将背景图片网址设置为.baddie类的属性。您的默认背景（非坏人）是通过ID设置的。

由于css特异性，基于id的背景优先于类背景。

您还遇到一个问题，即您要为多个元素分配相同的ID（＆＃34; open＆＃34;） - 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;
}

通过更改open：jsfiddle

的选择器来解决问题

图片未显示在表

1 个答案: