2 차원 배열 자바 스크립트

나는 HTML2 차원 배열 자바 스크립트

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <script src="jQuery 2.1.js"></script> 

    <title>2d array</title> 
</head> 

<body> 
    <div id="stage"></div> 
    <p id="output"></p> 
    <script src="2D_ARRAY ch color.js"></script> 
</body> 

<style> 
#stage { 
    position: relative; 
} 

.cell { 
    display: block; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border: 1px solid black; 
    background-color: white; 
} 

.player { 
    display: block; 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    border: 1px solid black; 
    background-color: white; 
} 

p { 
    position: relative; 
    top: 240px; 
    width: 400px; 
} 

</style>

로와 JS 파일로이 만든 :

(function(){ 


    var stage = document.querySelector("#stage"); 
    var output = document.querySelector("#output"); 

    window.addEventListener("keydown" , keydownHandler , false); 

    var map = 
    [ 
    [0, 1, 0, 0, 0, 1, 1, 0], 
    [0, 0, 0, 1, 0, 0, 1, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [1, 1, 1, 0, 0, 1, 1, 0], 
    [0, 0, 0, 0, 0, 0, 1, 0], 
    [0, 0, 0, 1, 0, 0, 1, 0], 
    [0, 0, 1, 1, 0, 0, 0, 0], 
    [0, 0, 0, 1, 0, 0, 0, 3]   
    ]; 

    var gameObjects = 
    [ 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 0], 
    [0, 0, 0, 0, 0, 0, 0, 2] 

    ]; 



    var UP = 38; 
    var DOWN = 40; 
    var RIGHT = 39; 
    var LEFT = 37; 

    var SHIP = 2; 
    var PERETE = 1; 


    var ROWS = map.length; 
    var COLUMNS = map[0].length; 

    var playerRow; 
    var playerColumn; 


    var SIZE = 40; 
    render(); 

    function keydownHandler(event) { 
     var player = document.querySelector(".player"); 

     switch (event.keyCode) { 

      case UP: 

      if (playerRow > 0) { 

       gameObjects[playerRow][playerColumn] = 0; 
       playerRow --; 
       gameObjects[playerRow][playerColumn] = SHIP; 


      } 

      break; 

      case DOWN: 
      if (playerRow < 7) { 

       gameObjects[playerRow][playerColumn] = 0; 
       playerRow ++; 
       gameObjects[playerRow][playerColumn] = SHIP; 

      } 

      break; 

      case LEFT: 
      if (playerColumn > 0) { 

       gameObjects[playerRow][playerColumn] = 0; 
       playerColumn --; 
       gameObjects[playerRow][playerColumn] = SHIP; 


      } 
      break; 

      case RIGHT: 
      if (playerColumn < 7) { 

       gameObjects[playerRow][playerColumn] = 0; 
       playerColumn ++; 
       gameObjects[playerRow][playerColumn] = SHIP; 

      } 
      break; 
     } 

     if (map[playerRow][playerColumn] === PERETE) { 

      player.style.backgroundColor = "red"; 

     }  

     render(); 
    } 




    function render() { 


     for (rows = 0; rows < ROWS; rows++) { 

      for (columns = 0; columns < COLUMNS; columns++) { 

       var cell = document.createElement("div"); 
       cell.setAttribute("class" , "cell"); 
       stage.appendChild(cell); 

       pereteRow = rows; 
       pereteColumn = columns; 

       cell.style.top = (rows * SIZE) + "px"; 
       cell.style.left = (columns * SIZE) + "px"; 

       if (map[rows][columns] === 1) { 

        cell.style.backgroundColor = "black";    

       }        

       if (gameObjects[rows][columns] === SHIP) { 

        var player = document.createElement("div"); 
        player.setAttribute("class" , "player"); 

        stage.appendChild(player); 



        playerRow = rows; 
        playerColumn = columns; 

        player.style.top = (rows * SIZE) + "px"; 
        player.style.left = (columns * SIZE) + "px"; 

        player.style.backgroundColor = "green"; 

       } 


      } 
     } 

    } 
}());

내 목적은 검은 색 사각형 위에 빨간색 될 수있는 녹색 사각형입니다. 녹색 사각형이 검정색 위에 있는지 확인하는 것이 좋지만 왜 "player"의 backgroundColor 속성을 keydown 청취자에서 호출 할 수 없는지 이해할 수 없습니다

감사합니다.

출처

2014-04-01 tavi_tudor

질문은 무엇입니까? 구체적으로 기재하십시오. – dgvid

플레이어 셀의 색상을 빨간색으로 변경 한 후 render()을 호출하면 셀이 다시 만들어지고 색상이 녹색으로 설정됩니다.

player.style.backgroundColor = "green";

에 :

빠른 수정 render()의 끝 부분에 다음과 같은 라인에 변화

if (map[playerRow][playerColumn] === PERETE) 
    player.style.backgroundColor = "red"; 
else 
    player.style.backgroundColor = "green";

하지만 어쩌면 당신은 한 번만 요소를 만드는 방법에 대해 생각하고이를 다시 사용한다 나중에.

편집 : 여기입니다 당신이 그것을 기대 생각하는의를 일하는 JSFiddle : http://jsfiddle.net/TXbjD/

출처

2014-04-01 19:20:01 Callidior

2 차원 배열 자바 스크립트

답변

관련 문제