html+css+js实现五子棋游戏

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏title>
    <style>
        /* 游戏样式 */
        .board {
            display: grid;
            grid-template-columns: repeat(15, 40px);
            grid-template-rows: repeat(15, 40px);
            gap: 1px;
            background-color: #f0d9b5;
        }

        .cell {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border: 1px solid #000;
            cursor: pointer;
        }

        .cell:hover {
            background-color: #ccc;
        }

        /* 按钮样式 */
        #reset-button {
            display: block;
            margin-top: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        /* 添加样式以表示玩家的棋子 */
        .player-one {
            background-color: #000;
            border-radius: 50%;
        }

        .player-two {
            background-color: #fff;
            border-radius: 50%;
        }
    style>
head>

<body>
    <div class="board" id="board">
        
    div>
    <button id="reset-button">重新开始button>
    <script>
        const board = document.getElementById("board");
        const resetButton = document.getElementById("reset-button");
        const gridSize = 15; // 棋盘格子数
        const cellSize = 40; // 棋盘格子大小（像素）
        let currentPlayer = "player-one"; // 当前玩家
        let gameOver = false; // 游戏结束标志

        // 创建棋盘格子
        for (let row = 0; row < gridSize; row++) {
            for (let col = 0; col < gridSize; col++) {
                const cell = document.createElement("div");
                cell.className = "cell";
                cell.dataset.row = row;
                cell.dataset.col = col;
                cell.addEventListener("click", handleCellClick);
                board.appendChild(cell);
            }
        }

        // 处理格子点击事件
        function handleCellClick(event) {
            if (gameOver) return;

            const cell = event.target;
            if (!cell.classList.contains("player-one") && !cell.classList.contains("player-two")) {
                cell.classList.add(currentPlayer);

                if (checkForWin(parseInt(cell.dataset.row), parseInt(cell.dataset.col))) {
                    showWinMessage();
                } else {
                    currentPlayer = currentPlayer === "player-one" ? "player-two" : "player-one";
                }
            }
        }
        // 显示胜利消息
        function showWinMessage() {
            gameOver = true;
            alert(currentPlayer === "player-one" ? "玩家一获胜！" : "玩家二获胜！");
            
        }

        // 重新开始游戏
        function resetGame() {
            const cells = document.querySelectorAll(".cell");
            cells.forEach((cell) => {
                cell.classList.remove("player-one", "player-two");
            });
            currentPlayer = "player-one";
            gameOver = false;
            // 在这里重置游戏状态
        }

        // 监听重新开始按钮点击事件
        resetButton.addEventListener("click", resetGame);
        // 在检查玩家胜利时，遍历棋盘上的每个格子
        function checkForWin(row, col) {
            const currentPlayerClass = currentPlayer === "player-one" ? "player-one" : "player-two";

            // 检查水平方向
            if (
                checkDirection(row, col, 0, 1, currentPlayerClass) ||
                checkDirection(row, col, 0, -1, currentPlayerClass)
            ) {
                showWinMessage();
                return;
            }

            // 检查垂直方向
            if (
                checkDirection(row, col, 1, 0, currentPlayerClass) ||
                checkDirection(row, col, -1, 0, currentPlayerClass)
            ) {
                showWinMessage();
                return;
            }

            // 检查对角线方向
            if (
                checkDirection(row, col, 1, 1, currentPlayerClass) ||
                checkDirection(row, col, -1, -1, currentPlayerClass) ||
                checkDirection(row, col, 1, -1, currentPlayerClass) ||
                checkDirection(row, col, -1, 1, currentPlayerClass)
            ) {
                showWinMessage();
                return;
            }
        }

        // 检查指定方向上是否有连珠
        function checkDirection(row, col, rowDelta, colDelta, currentPlayerClass) {
            let count = 0;

            for (let i = 0; i < 5; i++) {
                const newRow = row + i * rowDelta;
                const newCol = col + i * colDelta;

                if (
                    newRow >= 0 &&
                    newRow < gridSize &&
                    newCol >= 0 &&
                    newCol < gridSize &&
                    document.querySelector(`[data-row="${newRow}"][data-col="${newCol}"]`).classList.contains(currentPlayerClass)
                ) {
                    count++;
                } else {
                    break;
                }
            }

            return count >= 5;
        }
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
相关阅读:
RabbitMQ3.10.7高级特性
 Windows原理深入学习系列-强制完整性检查
 apollo自动驾驶进阶学习之：在apollo中模拟障碍物的三种方法
 APP每次打开都需要登录
 如何利用 Selenium 对已打开的浏览器进行爬虫
 kotlin 函数
 【数智化人物展】白鲸开源CEO郭炜：大模型助力企业大数据治理“数智化”升级...
编程技巧│浏览器 Notification 桌面推送通知
 Codeforces Round #800 (Div. 2)
Oracle/PLSQL: Cardinality Function
原文地址：https://blog.csdn.net/weixin_45791806/article/details/132876856