如何在表內創建一個二維數組？

我想創建一個Connect Four遊戲表，我想通過設置一個二維7 * 6數組並將每個數組放在每個單元格內（如果有意義的話）。我是Javascript新手，對面向對象編程沒有太多的知識。我試圖給每個單元格一個xPosition和yPosition（座標，也許這可能在他們的「id」中），以便遊戲可以檢查是否有藍色或黃色的行或列。如何在表內創建一個二維數組？

代碼到目前爲止，粗糙的嘗試：

function make() 
    { 
    var table = document.createElement("table"); 
    for (var i = 0; i < 6; i++) 
    { 
    var row = table.inserRow(); 
    for (var j = 0; j < 5; j++) 
    { 
    var cell = row.insertCell; 
    } 
    document.body.appendChild(table); 
    } 
    }

來源

2013-05-14 Ben Taylor

你可以使用jQuery嗎？會更容易... – Karol 2013-05-14 07:46:09

我不知道，idnt知道如何讓jquery進入我的代碼而不是如何使用它，我想我應該看看它呢？ – 2013-05-15 01:20:58

用jQuery寫一些非常快速的解決方案。我粘貼了整個html，所以你可以將它保存爲html文件並在瀏覽器中打開。您可以單擊單元格以查看座標（從0開始）。

<html> 
    <head> 
     <title>GRID</title> 
     <style type="text/css"> 
      table tr td { width: 50px; height: 50px; background-color: silver; border: 1px solid black; } 
      table tr td.over { background-color: yellow; } 
      table tr td.active { background-color: red; } 
      .controls { padding: 20px; } 
     </style> 
    </head> 
    <body> 
     <div class="controls"> 
      <a href="javascript:void(0)" data-move="[-1, 0]">left</a> 
      <a href="javascript:void(0)" data-move="[0, -1]">top</a> 
      <a href="javascript:void(0)" data-move="[1, 0]">right</a> 
      <a href="javascript:void(0)" data-move="[0, 1]">bottom</a> 
      <a href="javascript:void(0)" data-move="[-1, -1]">topleft</a> 
      <a href="javascript:void(0)" data-move="[1, -1]">topright</a> 
      <a href="javascript:void(0)" data-move="[1, 1]">bottomright</a> 
      <a href="javascript:void(0)" data-move="[-1, 1]">bottomleft</a> 
     </div> 
     <table></table> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var rows = 6, 
       cols = 7; 

      for(var i = 0; i < rows; i++) { 
       $('table').append('<tr></tr>'); 
       for(var j = 0; j < cols; j++) { 
        $('table').find('tr').eq(i).append('<td></td>'); 
        $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j); 
       } 
      } 

      $('table tr td').mouseover(function() { 
       $(this).addClass('over'); 
      }).mouseout(function() { 
       $(this).removeClass('over'); 
      }).click(function() { 
       $(this).addClass('active'); 
      }); 

      $(".controls a").click(function() { 
       var $active = $("table tr td.active"); 
       if($active.length > 0) { 
        var move = $.parseJSON($(this).attr('data-move')); 
        if(move.length >= 2) { 
         $active.each(function() { 
          var row = parseInt($(this).attr('data-row')) + move[1], 
           col = parseInt($(this).attr('data-col')) + move[0]; 
          if(col >= cols) col = cols - 1; 
          if(col < 0) col = 0; 
          if(row >= rows) row = rows - 1; 
          if(row < 0) row = 0; 
          $(this).removeClass('active'); 
          $('table tr').eq(row).find('td').eq(col).addClass('active'); 
         }); 
        } 
       } 
      }); 
     }); 
     </script> 
    </body> 
</html>

請注意，如果你改變rows和cols變量可以得出更大的網格。

我已將controls div與按鈕相加，所以您可以玩指令。首先，您需要將元素標記爲活動狀態，並且您可以點擊移動它們。

有一個錯誤（或我的觀點），您可以標記多個字段並將它們一次全部移動。

這是開始的好基礎！

來源

2013-05-15 06:54:12 Karol

哇！那很完美！我一直在努力弄清楚這一點，這是巧妙的！謝謝您的幫助！附：不能標記答案，因爲我只有1個聲望！ – 2013-05-15 08:47:59

@BenTaylor - 沒關係 - 我只帶了我15分鐘 - 我很高興我幫了忙。 – Karol 2013-05-15 23:35:05

我最近也遇到過這種情況，我需要移動到點擊旁邊的td。正如你大概知道我想要做什麼，並且你編程了這個，我是否只是在行值上做廣告？然後做$（this）等等？或者還有更多嗎？ @Carlos – 2013-05-21 12:51:06

如何在表內創建一個二維數組？

回答

相關問題