使用 jQuery 创建井字游戏(1)

📌 相关文章

📜 使用 jQuery 创建井字游戏(1)

📅 最后修改于: 2023-12-03 14:49:42.018000 🧑 作者: Mango

使用 jQuery 创建井字游戏

jQuery 是 JavaScript 的一个流行的库，它使得操作文档对象模型（DOM）变得更加容易。我们可以使用 jQuery 创建一个简单的井字游戏，下面是实现的步骤：

步骤 1：创建 HTML 页面

首先，我们需要创建一个基本的 HTML 页面结构。它将包含一个井字游戏板和一些按钮，用于重新开始游戏和切换玩家。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery 井字游戏</title>
        <style>
            /* 游戏板样式 */
            #board {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-gap: 5px;
            }
            button {
                font-size: 24px;
                margin: 5px;
                padding: 10px 20px;
            }
            #player-turn {
                font-size: 24px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <h1>jQuery 井字游戏</h1>
        <p id="player-turn">正在等待第一个玩家开始...</p>
        <div id="board">
            <button id="0"></button>
            <button id="1"></button>
            <button id="2"></button>
            <button id="3"></button>
            <button id="4"></button>
            <button id="5"></button>
            <button id="6"></button>
            <button id="7"></button>
            <button id="8"></button>
        </div>
        <button id="restart">重新开始</button>
        <button id="change-player">切换玩家</button>
        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
        <script src="game.js"></script>
    </body>
</html>

步骤 2：编写 JavaScript 代码

接下来，我们需要编写一些 JavaScript 代码来实现井字游戏的逻辑。我们将使用 jQuery 来操作 DOM 元素。

首先，我们将创建一个全局变量 player 来表示当前的玩家，还需要一个变量 gameOver 来判断游戏是否结束。代码如下：

let player = "X";
let gameOver = false;

接着，我们需要编写一个函数 checkWin 来检查游戏是否已经结束。我们将使用 jQuery 选择器来获取按钮的值并检查是否存在一个相同的行、列或对角线。

function checkWin() {
    // 检查行
    for (let i = 0; i < 9; i += 3) {
        if ($("#" + i).text() !== "" && $("#" + i).text() === $("#" + (i + 1)).text() && $("#" + i).text() === $("#" + (i + 2)).text()) {
            return true;
        }
    }
    // 检查列
    for (let i = 0; i < 3; i++) {
        if ($("#" + i).text() !== "" && $("#" + i).text() === $("#" + (i + 3)).text() && $("#" + i).text() === $("#" + (i + 6)).text()) {
            return true;
        }
    }
    // 检查对角线
    if ($("#0").text() !== "" && $("#0").text() === $("#4").text() && $("#0").text() === $("#8").text()) {
        return true;
    }
    if ($("#2").text() !== "" && $("#2").text() === $("#4").text() && $("#2").text() === $("#6").text()) {
        return true;
    }
    return false;
}

接下来，我们编写 changePlayer 函数用于实现玩家之间的切换。代码如下：

function changePlayer() {
    if (player === "X") {
        player = "O";
    } else {
        player = "X";
    }
    $("#player-turn").text("当前玩家：" + player);
}

然后编写 restart 函数来重新开始游戏。代码如下：

function restart() {
    $("button").text("");
    player = "X";
    gameOver = false;
    $("#player-turn").text("当前玩家：" + player);
}

最后，我们需要为每个按钮添加一个点击事件，以实现游戏的主要逻辑。代码如下：

$("button").on("click", function() {
    if ($(this).text() !== "" || gameOver) {
        return;
    }
    $(this).text(player);
    if (checkWin()) {
        $("#player-turn").text(player + " 赢了！");
        gameOver = true;
    } else {
        changePlayer();
    }
});

$("#restart").on("click", function() {
    restart();
});

$("#change-player").on("click", function() {
    changePlayer();
});

步骤 3：运行应用程序

我们将所有 JavaScript 代码保存到名为 game.js 的文件中。现在可以打开浏览器，在地址栏输入 http://localhost/path/to/index.html，就可以运行我们所创建的井字游戏了！

总结

我们已经展示了使用 jQuery 创建井字游戏的过程。我们使用了 jQuery 的选择器和事件处理程序来操纵 DOM 元素，并编写了一些用于检查游戏是否结束、切换玩家和重新开始游戏的函数。使用 jQuery 可以使得我们更快速、方便地实现互动式应用程序。