Изображение не отображается в таблице

Question

Я работаю через курс в ванильном JS, предлагаемом через мой университет. Этот курс только в ванили JS, поэтому нет jQuery (облом, я знаю ...).

Мой вопрос заключается не в том, чтобы просить о помощи в решении чего-то, а в попытке выяснить, почему что-то не появляется.

Нам было поручено создать простую игру в стиле валунов, используя скелет-код, предоставленный профессором.

Я создал массив 2d, который содержит карту игры, где каждый элемент массива содержит ссылку (число), которая соответствует определенному .png-файлу.

После того, как я работал с CSS и JS, я знаю, что вы можете использовать ось z элементов, чтобы поместить что-то «выше» другого элемента. Однако, в моем случае это не работает, или я пропускаю что-то еще.

В случае, когда я рисую карту, вы видите, что первое число (9), которое я ищу, создает ячейку, которая будет содержать класс под названием «baddie» (игрок) , но также будет содержать идентификатор, обозначающий 'open'.

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; 

Я ожидал, что злодея (так как с более высоким Z-индекс) будет размещен на вершине «открытым», но не кажется, что будет происходить. Даже если я удалю ссылку на «open», «baddie» не появляется.

Это ссылка на JS-скрипку, которую я установил: jsFiddle, где вы можете найти весь код.

Если мой вопрос недостаточно ясен, мне нужно выяснить, почему файл Kyubi, похоже, не появляется?

В моих локальных файлов файл Kyubi.png находится в родительской папке плитки:

Все плитки отображаются так же, как в скрипке, но не игрок-объект. ..

Answer 1

Вы устанавливаете URL-адрес исходного изображения как свойство класса .baddie. Ваш фоновый фон по умолчанию (не-baddie) устанавливается через id.

Из-за специфики css фон на основе идентификатора является более высоким приоритетом, чем фон класса.

У вас также есть проблема в том, что вы назначаете один и тот же идентификатор («открытый») нескольким элементам - идентификатор должен быть уникальным.

Найдите способ установить фон на элементах 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 скрипка исправить путем переключения селектора для открытого: jsfiddle