JavaScript实现三子棋

小哈不会玩

已于 2023-07-23 22:07:29 修改

阅读量370

点赞数

分类专栏： JavaEE学习总结文章标签： javascript 开发语言前端

于 2023-07-23 21:43:50 首次发布

本文链接：https://blog.csdn.net/m0_57524066/article/details/131882652

版权

JavaEE学习同时被 2 个专栏收录

10 篇文章

订阅专栏

总结

8 篇文章

订阅专栏

本文介绍了如何使用JavaScript创建一个简单的三子棋游戏。包括初始化3x3棋盘、处理落子操作、判断获胜条件、轮流落子逻辑、重置棋盘以及检测棋盘是否已满的函数。此外，还提供了源代码示例和游戏效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要做的事：

1.初始化棋盘

首先棋盘是一个3*3的二维数组，而我们的二维数组又是分别由一个一个的一维数组组成的。如下图所示。

2.落子操作

给我们的每个棋盘空间绑定事件hePosition(row,col)，表示鼠标下落点的坐标。在这个函数中，我们首先拿到一个棋盘，初始情况是默认空的状态，假定A玩家先走，那么我们就把当前的A玩家走的位置坐标赋给棋盘的（row,col），由于我们使用了一个一维数组来表示3*3的三子棋棋盘格子，我们这里将获取到的二维坐标（row,col）映射到一维数组的索引，这样就可以方便的找到鼠标点击的对应的格子并将其标志为当前玩家的标记。这里我们使用innerText显示文本标记。

3.判断获胜

在处理好获取到指定格子的坐标标记后，此时我们单独封装一个函数去检查获胜的判定方法。如下图所示获胜判定规则。每一行相同、每一列相同、斜对角相同。

首先我先设置一个只读变量piece让它等于棋盘的某个坐标上的元素，也就是分别从列、行、对角的角度去获取特定行和列位置上的元素。简单来见piect这个变量它可能的值是A、B、空，如果当前位置为空，那么玩家就可以标记显示，不为空，不操作。然后在hePosition(row,col)函数中调用，如果返回的是true那么就会弹出当前哪个玩家获胜了，然后重置棋盘。这里需要注意的是，使用setTimeout()定时器的原因是因为整个页面加载速度非常快，单线程执行，如果不设置定时器延时作用的话那么我们胜利玩家下的最后一个棋子是看不到的，所以设置了延时显示后在重置棋盘。如果棋盘已经下满了，那么就手动触发重置按钮，将棋盘清空。

4.轮流落子

因为我们下棋是A走了换B，所以这里我们处理的条件是使用三目运算符，判断上面的currentPlayer是否获胜，没有获胜，那么就更新到另一个玩家。

5.重置棋盘

同样的也是单独使用一个函数resetBoard()去重置，重置也就是回到初始时候，此时先落子的换成A，然后嵌套for循环分别去遍历行和列，将棋盘board[row][col]置为空（''），同时把每个格子也置为空document.getElementsByClassName('he')[row * 3 + col].innerText = '';当获胜后，或者棋盘满了后我们调用这个函数达到目的。

6.棋盘判满

对于棋盘盘满，和重置棋盘类似，我们也是使用for嵌套循环，去遍历行和列，看每个格子上是否为空，都不为空则说明每个格子都有标志。此时我们就返回true，如果有没满的情况那就返回false。

7.源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 600px;
            /* background: pink; */
            height: 400px;
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            justify-content: space-around;
        }
        .con button {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-top: 100px;
            background: yellow;
            font-size: 20px;
        }
        .container {
            width: 300px;
            height: 300px;
            background: pink;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            
            border: 2px solid black;
        }
        .row {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: row;
        }
        .row .he {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            box-sizing: border-box;
            font-size: 30px;
            line-height: 100px;
        }
        body {
            text-align: center;
        }
        button {
            width: 150px;
            height: 40px;
            background: yellow;
            border: none;
            
        }
    </style>
</head>
<body>
    <div class="con">
        <button>A玩家</button>
        <div class="container">
            <div class="row">
                <div class="he" onclick="hePosition(0,0)"></div>
                <div class="he" onclick="hePosition(0,1)"></div>
                <div class="he" onclick="hePosition(0,2)"></div>
            </div>
            <div class="row">
                <div class="he" onclick="hePosition(1,0)"></div>
                <div class="he" onclick="hePosition(1,1)"></div>
                <div class="he" onclick="hePosition(1,2)"></div>
            </div>
            <div class="row">
                <div class="he" onclick="hePosition(2,0)"></div>
                <div class="he" onclick="hePosition(2,1)"></div>
                <div class="he" onclick="hePosition(2,2)"></div>
            </div>
        </div>
        <button>B玩家</button>
    </div>
    
    <button onclick="resetBoard()">重置棋盘</button>
    
    <script>
        // 初始化棋盘
        const board = [
            ['','',''],
            ['','',''],
            ['','',''],
        ];

        let currentPlayer = 'A'; //设置每次开始的当前要走的棋子
        
        // 落子处理
        function hePosition(row,col) {
            // 初始时候棋盘是空的，开始游戏就把当前第一个走的赋值给初始的位置
            if(board[row][col] === '') {
                board[row][col] = currentPlayer;
                document.getElementsByClassName('he')[row * 3 + col].innerText = currentPlayer;

                // 检查是否获胜
                if(checkWin(row,col)) {
                    // 设置定时器，因为页面加载速度非常快，所以通过设置延时来显示最后一个棋子落地位置
                    setTimeout(() => {
                        alert(currentPlayer + "获胜！");
                        resetBoard();
                    }, 1000); // 延迟 1000 毫秒后重置棋盘
                    
                    // 获胜也就是结束后要重置棋盘
                    
                    return;
                }

                // 如果棋盘满了
                if(isBoardFull()) {
                    alert("棋盘已满，请重新开始！");
                    return;
                }
                // 如果玩家没有获胜，将 currentPlayer 更新为另一个玩家，这样实现了两个玩家在轮流下棋的功能
                currentPlayer = currentPlayer === 'A' ? 'B' : 'A';
            }

        }

        // 检查获胜方法
        function checkWin(row, col) {
            // 使用 board[row] 从 board 中获取第 row 行的一维数组，然后再用 [col] 从该一维数组中获取第 col 列的元素。
            const piece = board[row][col];
            // 检查行
            if (board[row][0] === piece && board[row][1] === piece && board[row][2] === piece) {
                return true;
            }
            // 检查列
            if (board[0][col] === piece && board[1][col] === piece && board[2][col] === piece) {
                return true;
            }
            // 检查对角线
            if ((board[0][0] === piece && board[1][1] === piece && board[2][2] === piece) ||
                (board[0][2] === piece && board[1][1] === piece && board[2][0] === piece)) {
                return true;
            }
        }

        // 重置棋盘
        function resetBoard() {
            currentPlayer = 'A';
            for (let row = 0; row < 3; row++) {
                for (let col = 0; col < 3; col++) {
                board[row][col] = '';
                document.getElementsByClassName('he')[row * 3 + col].innerText = '';
                }
            }
        }

        // 判断棋盘满操作
        function isBoardFull() {
            for(let row = 0; row < 3; row++) {
                for(let col = 0; col < 3; col++) {
                    if(board[row][col] === '') {
                        return false;
                    }
                }
            }
            return true;
        }
    </script>
</body>
</html>