时间戳

首页 > 解决方案 > 在游戏中检查对角线

javascript - 在游戏中检查对角线

问题描述

我正在尝试重新创建连接四，但在检查对角线胜利时遇到了一些问题。我将在下面发布一些代码，但不是全部，否则阅读起来会很乏味。我想checkForVictory对所有三个检查使用相同的功能。水平和垂直已经在工作，对于对角线我想使用一个已经组合的数组，这样的数组存储在 vardiagonals中。我试图在数组上循环两次以获取其中的数字，但是我不确定下一步如何进行，因为我的checkForVictory函数已经使用我要传入的参数循环一次，所以很友好的混乱。每个插槽都有一个类.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>

标签： javascript

解决方案

有很多方法可以做到这一点。更好的做法是将电路板的状态实际保存在内存中（作为数字的二维数组或类似的东西），并让它确定显示的内容。

但您也可以像现在这样：读取 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>

推荐阅读