"document.write()"로 작성한 내용을 지우는 방법

저는 현재 "snake"와 같이 많이 쓰는 작은 게임을 작성하고 있습니다. 그 중 일부는 그리드를 표시하고 그리드를 자주 업데이트해야한다는 것입니다."document.write()"로 작성한 내용을 지우는 방법

나를위한 한 가지 방법은 아래 기능을 사용하는 것입니다.

function loadImages(){ 

    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j] == -1){ 
       document.write('<IMG SRC="wall.png" width="30">'); 
      } 
      else if(grid[i][j] == 0){ 
       document.write('<IMG SRC="empty.png" width="30">'); 
      } 
     } 
    } 

    setTimeout(loadImages(), 50); 
}

loadImages() 함수를 반복 호출하면 이미지가 연결되고 교체되지 않습니다.

내 질문은 문서를 덮어 쓰거나 지울 수있는 방법이 있습니까?

P. "document.clear()"함수가 그다지 도움이되지 않는 것 같습니다.

고맙습니다.

출처

2011-02-01 Anatoli

사용 jQuery를. 게임의 경우 HTML5의 캔버스 요소를 살펴보십시오. – ThiefMaster

당신은 당신의 grid 데이터 구조를 확장하고 국가와 이미지 요소를 모두 저장할 수 :

// initialization 
for(var i = 0;i<HEIGHT;i++) { 
    for(var j = 0;j<WIDTH;j++){ 
     grid[i][j] = { 
      state: grid[i][j], 
      image: new Image() // creates HTMLImageElement object 
     }; 
     // set width 
     grid[i][j].image.setAttribute("width", "30"); 
     // append HTMLImageElement to BODY element 
     document.body.appendChild(grid[i][j].image); 
    } 
}

이 그럼 당신은 유사한 방식으로 loadImages 내부의 이미지를 변경할 수 있습니다에 의해

function loadImages() { 
    for(var i = 0;i<HEIGHT;i++){ 
     for(var j = 0;j<WIDTH;j++){ 
      if(grid[i][j].state == -1){ 
       grid[i][j].image.src = "wall.png"; 
      } 
      else if(grid[i][j].state == 0){ 
       grid[i][j].image.src = "empty.png"; 
      } 
     } 
    } 
    setTimeout(loadImages, 50); 
}

을 way : setTimeout(loadImages(), 50)은 즉시 loadImages으로 전화하지만 대신 함수를 전달해야합니다 (예 : setTimeout(loadImages, 50)).

당신은 임시 변수에 grid[i][j]를 저장하여 사용자의 loadImages 기능을 최적화하고 상태가 변경된 경우 이미지 만 '소스를 변경할 수 있습니다

var cell = grid[i][j]; 
switch (cell.state) { 
case -1: 
    if (cell.image.src !== "wall.png") { 
     cell.image.src = "wall.png"; 
    } 
    break; 
case 0: 
    if (cell.image.src !== "empty.png") { 
     cell.image.src = "empty.png"; 
    } 
    break; 
}

출처

2011-02-01 18:03:15 Gumbo

나는이 접근법을 정말 좋아하지만 어떻게 image() 객체로 이미지를 표시합니까? 나는 js에서 매우 멍청하다 ... – Anatoli

@Ankiov Spetsnaz :이 솔루션은 DOM 연산을 사용한다. 이 경우'new Image()'는 새로운 * HTMLImageElement * 객체 (코드에서''이하는 것과 동일 함)를 만들고, 당신은 그 * HTMLImageElement * 객체의'src' 속성으로 이미지의 소스를 변경할 수 있습니다. 이 경우,'loadImages' 함수의 첫 번째 호출은 처음에 이미지를위한'src' 속성을 설정할 것입니다. 아마도'src' 할당이 필요한지 (즉 초기와 상태가 변할 때만) 테스트를 추가해야 할 것입니다. – Gumbo

흠 ... 나는 여전히 빈 페이지를보고 있는데 나는 모든 것이 옳다고 생각한다. 이것을 어떻게 문서에 표시 할 수 있는가? 또한, document.body.appendChild가 나를 위해 일한다고 생각하지 않습니다 ... – Anatoli

document.write는 항상 부가 기능입니다. 당신은 항상 문서 객체 (DOM)에 새로운 요소를 추가하고있다.

원하는 경우,이 경우 document.getElementById ('imgParent'). innerHTML이며 자식 (ren) 이미지가 ID가있는 요소 내에 있습니다.

http://api.jquery.com/html/

출처

2011-02-01 17:53:55

가장 간단한 것은 document.write을 사용하지하는 것 대신에 특정 문서 요소에 쓰기 :

document.getElementById('imgParent').innerHTML = '<IMG SRC="wall.png" width="30">';

정말하지만, jQuery를 같은 라이브러리를 고려한다. 대신 "document.write를"의 다음

<html> 
    <head>...</head> 
    <body><div id='game'></div></body> 
</html>

를 수행합니다 : 예를 들어, 다음과 같은 문서로 시작

var game = document.getElementById('game'); 
game.innerHTML = '<IMG SRC="wall.png" width="30">';

당신은 자주 game.innerHTML 속성을 설정할 수 있습니다, 그것은 덮어 쓰게됩니다.

출처

2011-02-01 17:56:17 user85461

그런데 실제 사진을 어떻게 표시합니까? 나는 그것이 "div id = 'game'"에로드된다는 것을 이해합니다. 그러나로드 된 것을 어떻게 표시하는지에 대해서는 분명하지 않습니다. – Anatoli

@Ankiov - div 안에 원래의 HTML 문서에있는 것처럼 * 실제로는 * 요소가 생성됩니다.브라우저는 다른''태그 (현재는'document.write()')와 같이 그림 렌더링을 처리합니다. –

"document.write()"로 작성한 내용을 지우는 방법

답변

관련 문제