二維數組的Javascript

我做了這個作爲HTML二維數組的Javascript

<!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"; 

       } 


      } 
     } 

    } 
}());

我的目的是綠化廣場變成紅色了黑色方塊。我的條件，看看綠色方塊是否是黑色的，但我不明白爲什麼var「player」的backgroundColor屬性不能在聽衆中調用

謝謝！

來源

2014-04-01 tavi_tudor

什麼是你的問題？請具體說明。 – dgvid

將玩家單元格的顏色更改爲紅色後，您可以調用render()，它重新創建單元格並將其顏色設置爲綠色。

速戰速決被更改爲下面一行的render()末：

player.style.backgroundColor = "green";

到：

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

二維數組的Javascript

回答

相關問題