画像がテーブルに表示されない

Question

私はバニラJSのコースを通して自分の大学で提供しています。このコースはバニラJSのですので、jQueryはありません（バマー、私は知っています...）。

私の質問は、何かを解決する助けを求めることではなく、何かが表示されない理由を理解しようとしています。

私たちは、教授が提供するスケルトンコードを使用して、単純なボルダーダッシュゲームを作成することを任されています。

私は、配列のすべての要素が特定の.pngファイルに対応する参照（数字）を保持するゲームマップを保持する2次元配列を作成しました。

以前はCSSとJSで作業していましたが、z軸のアイテムを使って別のアイテムの上に何かを置くことができます。しかし、私の場合、それは動作していないように見える、または私は何か他の行方不明です。

マップを描いているif節では、私が探している最初の数字（9）が 'baddie'（プレーヤー）というクラスを保持するセルを作成することがわかります。 「open」という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; 

私は（高いZインデックスを持つため）その悪役を期待していは、「オープン」の最上部に配置されますが、それは発生していないようです。 「open」への参照を削除しても、「baddie」は表示されません。

これは私が設定したJSフィドルへのリンクです：jsFiddle、すべてのコードを見つけることができます。

私の質問が十分ではない場合は、なぜKyubiファイルが表示されないように見える必要がありますか？

はKyubi.pngファイルは、タイルの親フォルダにある私のローカルファイルで：

すべてのタイルがちょうどフィドルのように表示さではなく、選手オブジェクト。 ..

Answer 1

バックグラウンド画像のURLを.baddieクラスのプロパティとして設定しています。あなたのデフォルトの背景（baddieではない）はidによって設定されます。

CSSの特異性のため、IDベースの背景はクラスの背景よりも高い優先度です。

複数の要素に同じID（「公開」）を割り当てているという点でも問題があります.IDは一意でなければなりません。

idよりも特異性の低いtd要素の背景を設定する方法を見つけてください - それを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