이미지가 테이블에 나타나지 않습니다.

Question

저는 대학에서 제공하는 바닐라 JS 과정을 통해 자신을 연구하고 있습니다. 이 과정은 바닐라 JS에 이므로 jQuery (버머, 나는 알고 있습니다 ...).

제 질문은 도움을 청하기위한 것이 아니라 뭔가가 나타나지 않는 이유를 찾는 것입니다.

우리는 교수가 제공 한 스켈레톤 코드를 사용하여 간단한 돌덩이 돌진 게임을 만드는 임무를 맡았습니다.

배열의 모든 요소가 특정 .png 파일에 해당하는 참조 (숫자)를 보유하고있는 게임 맵을 포함하는 2 차원 배열을 만들었습니다.

이전에 CSS와 JS로 작업 한 이후에 z 축을 사용하여 다른 항목보다 '위에'놓을 수 있음을 알고 있습니다. 그러나, 나의 경우에는 그것이 작동하지 않는 것, 또는 나는 다른 것을 놓치고 있습니다.

지도를 그리는 곳에서 내가 찾고있는 첫 번째 숫자 (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; 

내가 (높은 Z- 인덱스를 가지고 있기 때문에) 그 악인을 기대하고 있습니다은 '개방'의 상단에 배치됩니다,하지만이 발생하지 않는 것. 'open'에 대한 참조를 제거하더라도 'baddie'가 표시되지 않습니다.

이것은 모든 코드를 찾을 수있는 JS-fiddle 설정 파일 (jsFiddle)입니다.

큐비 파일이 나타나지 않는 이유를 충분히 이해할 필요가 없다. 내 로컬 파일에서

Kyubi.png 파일은 타일의 상위 폴더에 있습니다

모든 타일은 플레이어 객체를 바로 바이올린과 같이 표시가 아니라. ..

Answer 1

배경 이미지 URL을 .baddie 클래스의 속성으로 설정합니다. 기본 배경 (비 baddie)은 id를 통해 설정됩니다.

CSS의 특수성으로 인해 ID 기반 배경이 클래스 배경보다 우선 순위가 높습니다.

동일한 요소 ("open")를 여러 요소에 할당한다는 점에서 문제가 있습니다. 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에서 "악인"사업부를 참조 jsfiddle