使用前端开发五子棋小游戏

最新推荐文章于 2024-10-10 11:15:29 发布

xcc212

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量359

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/xcc212/article/details/141946452

版权

下面一个完整实现的五子棋游戏代码，包含了 HTML、CSS 和 JavaScript 部分，并加入了一些优化和注释：

HTML

<!DOCTYPE html>
<html>
<head>
    <title>五子棋游戏</title>
    <style>
        /* CSS样式 */
        #gobang {
            border-collapse: collapse;
            margin: 0 auto;
        }
        td {
            width: 30px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
            cursor: pointer;
        }
        .black {
            background-color: black;
        }
        .white {
            background-color: white;
        }
    </style>
</head>
<body>
    <table id="gobang"></table>
    <script>
        // JavaScript代码
        const gobang = document.getElementById('gobang');
        const size = 15;
        let chessboard = [];
        let currentPlayer = 'black';

        // 初始化棋盘
        function initChessboard() {
            for (let i = 0; i < size; i++) {
                chessboard[i] = new Array(size).fill(0);
                let row = gobang.insertRow();
                for (let j = 0; j < size; j++) {
                    let cell = row.insertCell();
                    cell.addEventListener('click', () => {
                        if (chessboard[i][j] === 0) {
                            chessboard[i][j] = currentPlayer === 'black' ? 1 : 2;
                            cell.classList.add(currentPlayer);
                            if (checkWin(i, j)) {
                                alert(currentPlayer + '获胜！');
                            }
                            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                        }
                    });
                }
            }
        }

        // 判断胜负
        function checkWin(x, y) {
            const directions = [[1, 0], [0, 1], [1, 1], [1, -1]]; // 检查方向
            for (const [dx, dy] of directions) {
                let count = 1;
                // 检查当前方向上连续的棋子数量
                for (let i = 1; i < 5; i++) {
                    if (x + i * dx < size && y + i * dy < size &&
                        chessboard[x + i * dx][y + i * dy] === chessboard[x][y]) {
                        count++;
                    } else {
                        break;
                    }
                }
                for (let i = 1; i < 5; i++) {
                    if (x - i * dx >= 0 && y - i * dy >= 0 &&
                        chessboard[x - i * dx][y - i * dy] === chessboard[x][y]) {
                        count++;
                    } else {
                        break;
                    }
                }
                if (count >= 5) {
                    return true;
                }
            }
            return false;
        }

        initChessboard();
    </script>
</body>
</html>

代码解释如下：

HTML 结构: 创建了一个表格作为棋盘，每个单元格代表一个落子位置。
CSS 样式: 设置棋盘和棋子的样式，包括边框、大小、颜色等。
JavaScript 逻辑:
- 初始化棋盘: 创建一个二维数组表示棋盘状态，并为每个单元格添加点击事件。
- 落子: 点击空格子时，在对应位置放置棋子，并判断是否获胜。
- 胜负判断: 检查当前落子位置的横向、纵向、两个对角线方向上是否有连续五个相同棋子。
- 轮流下棋: 每次落子后切换玩家。