人机对战三子棋

最新推荐文章于 2024-08-14 12:22:11 发布

小哈不会玩

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量139

点赞数

分类专栏：总结笔记学习文章标签： css 前端学习

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

版权

总结同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

笔记

8 篇文章 0 订阅

订阅专栏

学习

8 篇文章 0 订阅

订阅专栏

通过重新构造一个函数随机生成B的行和列坐标，这里使用while循环，当随机生成的坐标为空的时候才跳出，执行标志位置处理操作（落子操作）。同样的也是需要使用延时设置定时器，不然的话页面加载很快，在A开始，B就开始。

源代码

<!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>三子棋人机对战</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';

                // 电脑随机落子
                if(currentPlayer === 'B') {
                  setTimeout(() => {
                    randomPos();
                    }, 1000); // 延迟 1000 毫秒后在下
                  
                }
            }

        }

        // 检查获胜方法
        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;
        }

        // 生成随机的行和列坐标
        function randomPos() {
          let row,col;
          while (true) {
            row = Math.floor(Math.random() * 3);
            col = Math.floor(Math.random() * 3);
            if (board[row][col] === '') {
              break; // 如果生成的坐标对应的格子为空白格子，跳出循环
            }
          }
          // 调用落子处理位置函数
          hePosition(row,col);
        }
    </script>
</body>
</html>