在游戲中檢查對角線

Question

我正在嘗試重新創建連接四，但在檢查對角線勝利時遇到了一些問題。 我將在下面發布一些代碼，但不是全部，否則閱讀起來會很乏味。 我想對所有三項檢查使用相同的checkForVictory function。 水平和垂直已經在工作，對於對角線我想使用一個已經組合的數組，這樣的數組存儲在 var diagonals中。 我試圖在數組上循環兩次以獲取里面的數字，但是我不確定下一步如何進行，因為我的checkForVictory function 已經使用我要傳遞的參數循環一次，所以它是有點令人困惑。 每個插槽都有一個 .slot 的.slot 。 html 中的列總共重復 7 次，以獲得 42 個插槽。 希望有人可以提供幫助。

 if (checkForVictory(slotsInColumn)) { winner(); } else { var slotsInRow = $(".row" + i); if (checkForVictory(slotsInRow)) { winner(); } else { var slots = $(".slot"); for (var j = 0; j < diagonals.length; j++) { for (var x = 0; x < diagonals[j].length; x++) { } } } } switchPlayer(); }); function checkForVictory(slots) { var count = 0; for (var i = 0; i < slots.length; i++) { if (slots.eq(i).hasClass(currentPlayer)) { count++; if (count == 4) { return true; } } else { count = 0; } } }

 .slot { width: 100px; height: 100px; overflow: hidden; }.hole { border-radius: 50%; width: 80px; height: 80px; border: 50px midnightblue solid; position: relative; left: -40px; top: -40px; } #board { display: flex; justify-content: center; align-items: center; }

 <div id="board"> <div class="column"> <div class="slot row0"> <div class="hole"></div> </div> <div class="slot row1"> <div class="hole"></div> </div> <div class="slot row2"> <div class="hole"></div> </div> <div class="slot row3"> <div class="hole"></div> </div> <div class="slot row4"> <div class="hole"></div> </div> <div class="slot row5"> <div class="hole"></div> </div> </div>

Answer 1

有很多方法可以做到這一點。 更好的做法是實際將板的 state 保留在 memory 中（作為數字的二維數組或類似的東西），並確定顯示的內容。

但您也可以像現在這樣：讀取 DOM 以確定光盤的位置。

然后，您需要遍歷 4 個可能的方向以確定哪里有 4 個一排。 這需要相當多的代碼，因此我更喜歡使用正則表達式。 為此，您首先讀取 DOM 並將其轉換為字符串，其中：

• “0” = 空槽
• "1" = 黃色圓盤
• "2" = 紅盤
• ":" = 列分隔符

所以字符串將有 42 個字符 + 6 個分隔符 = 48 個字符。

• 垂直四排將有四個相鄰的“1”（或“2”）出現。
• 水平四排將出現四次“1”（或“2”），其中每對由 6 個字符分隔 - 可以是任何字符（一個將是“:”）
• 對角線四排將有這樣的對由 7 個字符（如果向下傾斜）或 5 個字符（如果向上傾斜）分隔。

因此，這里有一個可運行的片段，您可以在其中單擊以獲取列中的光盤，並通過簡單的alert宣布獲勝：

 let currentPlayer = "yellow"; let gameOver = false; $(".column").click(function () { // Don't allow a move when game is already over if (gameOver) return; // Determine slot where disc should end up let slot = $(".slot:not(.yellow,.red)", this).last(); if (slot.length === 0) return; // column is full // Place disc slot.addClass(currentPlayer); gameOver = checkForVictory(); // Toggle player currentPlayer = currentPlayer == "yellow"? "red": "yellow"; if (gameOver) alert("won"); }); function checkForVictory(slots) { // Convert game to a string of 48 characters let str = $.map($(".column"), col => $.map($(col).children(), slot => $(slot).hasClass("yellow")? 1: $(slot).hasClass("red")? 2: 0 ).join("") ).join(":"); // Return true if there is & four-in-a-row return /([12])(\1{3}|(.{5}\1){3}|(.{6}\1){3}|(.{7}\1){3})/.test(str); }

 #board { display: flex; justify-content: center; align-items: center; }.column { display: inline-block; }.slot { width: 30px; height: 30px; overflow: hidden; }.hole { border-radius: 50%; width: 24px; height: 24px; border: 20px midnightblue solid; position: relative; left: -17px; top: -17px; }.yellow { background: yellow; }.red { background: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="board"> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> <div class="column"><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div><div class="slot"><div class="hole"></div></div></div> </div>