与动态板井字游戏Jquery

我想做一个JQuery的游戏，其中有一个用户定义表/板如3x3,4x4。我制作了这个板子，但由于表格单元格的动态特性，我无法访问它们：更改它们中的值并保留其索引的轨迹。有没有办法找到单元格索引并找到被单击的单元格来更改它的值？与动态板井字游戏Jquery

<!-- ========================================== Jquery starts here====================================================== --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 

 

 
    <script> 
 
     var RowStartParam = "<tr>"; 
 
     var RowEndParam = "</tr>"; 
 
     var TdStartEndParam = "<td></td>" 
 

 
     var MakeBoard = function() { 
 

 
      var BoardSize = $('#enterNum').val(); 
 
      //alert(BoardSize); 
 
      var BoardRow = RowStartParam; 
 

 
      for (var i = 0; i < BoardSize; i++) { 
 
       BoardRow += TdStartEndParam; 
 
      } 
 

 

 

 
      BoardRow += RowEndParam; 
 

 
      //alert(BoardRow); 
 
      for (var j = 0; j < BoardSize; j++) { 
 
       $("#board > tbody").append(BoardRow); 
 
      } 
 

 

 
     } 
 

 
     $(document).ready(function() { 
 

 
      $("#enterBtn").click(function() { 
 

 

 
       MakeBoard(); 
 
      }); 
 

 

 

 

 

 

 
     }); 
 
    </script>

<style> 
 
     .text-centre { 
 
      text-align: center; 
 
      display: block; 
 
     } 
 
     
 
     table { 
 
      margin-top: 10px; 
 
      text-align: center; 
 
      border-spacing: 0px; 
 
      border-bottom: 1px solid; 
 
      border-top: 1px solid; 
 
      border-left: 1px solid; 
 
      border-right: 1px solid; 
 
     } 
 
     
 
     td { 
 
      width: 50px; 
 
      height: 50px; 
 
      border: 1px solid; 
 
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 

 
    <!-- ============================================================board size input======================================== --> 
 
    <input type="text" placeholder="Enter Size for board" alt="Board size" id="enterNum" /> 
 
    <button class="btn" id="enterBtn" type="button">Enter</button> 
 

 
    <div class="text-centre"> 
 

 
     <table id="board"> 
 
      <tbody></tbody> 
 
     </table> 
 

 
    </div> 
 

 
</body>

来源

2015-04-12 Rafay Khan

显示一些代码会有帮助。 – Shikkediel

更新了问题 –

使用'index（）'不难获得行索引和单元格索引。真的不清楚你的问题 – charlietfl

我重写了代码一点，但它基本上是相同的。为了回答你的问题，增加了一个委托onclick事件，它将返回被点击的当前行和单元格。希望有所帮助。

http://codepen.io/anon/pen/jEjopy?editors=001

$(document).ready(function() { 

    $('#enterBtn').click(function() { 
    makeBoard(); 
    }); 

    $(this).on('click', 'td', function() { 

    var parent = $(this).parent().index()+1; 
    var position = $(this).index()+1; 

    alert('row = ' + parent + ', cell = ' + position); 
    }); 

}); 

function makeBoard() { 

    var rowstart = '<tr>'; 
    var rowend = '</tr>'; 
    var cell = '<td></td>'; 
    var boardsize = $('#enterNum').val(); 
    var boardrow = rowstart; 

    for (var i = 0; i < boardsize; i++) { 
    boardrow += cell; 
    } 

    boardrow += rowend; 

    for (var c = 0; c < boardsize; c++) { 
    $('#board > tbody').append(boardrow); 
    } 
}

我认为这是很好的做法，驼峰的功能，但保持小写变量，所以它更容易做出区分。但最终当然是个人喜好。

来源

2015-04-13 04:52:36 Shikkediel

我找到了一个更简单的方法给你，只是玩耍。但是你的意见非常有帮助。我的方法是在MakeBoard（）函数中使$（“tbody td”）。click（function（）{}）来检查单元是否被点击。然后创建一个WinChecker（），它在$（“tbody td”）中被调用。click（function（）{}）。 –

听起来不错，谢谢你的跟进。非常感激。 – Shikkediel

与动态板井字游戏Jquery

回答

相关问题