HTML&CSS ：用DeepSeek打造会自动判胜的五子棋游戏

本文链接：https://blog.csdn.net/weixin_52814911/article/details/145510385

DeepSeek 代码生成：五子棋游戏 这段代码是一个 HTML 页面，它包含 CSS 样式和 JavaScript 脚本，用于创建一个简单的五子棋游戏。用户可以在棋盘上轮流放置黑白棋子，游戏会自动检查是否有玩家获胜。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你

演示效果

使用教程

DeepSeek 提示词样例

HTML&CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #game-container {
            text-align: center;
        }
        #game-board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 1px;
            background-color: #d2b48c;
            border: 5px solid #8b4513;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .cell:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }
        .cell.black {
            background-color: black;
            border-radius: 50%;
        }
        .cell.white {
            background-color: white;
            border-radius: 50%;
        }
        #status {
            margin-top: 20px;
            font-size: 24px;
            color: #333;
        }
        #restart-button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            color: white;
            background-color: #8b4513;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none;
        }
        #restart-button:hover {
            background-color: #a0522d;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="game-board"></div>
        <div id="status">黑方回合</div>
        <button id="restart-button">再来一局</button>
    </div>

    <script>
        const boardSize = 15;
        const board = [];
        let currentPlayer = 'black';
        let gameOver = false;

        const gameBoard = document.getElementById('game-board');
        const statusDiv = document.getElementById('status');
        const restartButton = document.getElementById('restart-button');

        // 初始化棋盘
        function initBoard() {
            gameBoard.innerHTML = '';
            for (let i = 0; i < boardSize; i++) {
                board[i] = [];
                for (let j = 0; j < boardSize; j++) {
                    board[i][j] = null;
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', onCellClick);
                    gameBoard.appendChild(cell);
                }
            }
        }

        // 处理单元格点击事件
        function onCellClick(event) {
            if (gameOver) return;

            const row = parseInt(event.target.dataset.row);
            const col = parseInt(event.target.dataset.col);

            if (board[row][col] !== null) return;

            board[row][col] = currentPlayer;
            event.target.classList.add(currentPlayer);

            if (checkWin(row, col)) {
                statusDiv.textContent = `${currentPlayer === 'black' ? '黑' : '白'}方获胜！`;
                gameOver = true;
                restartButton.style.display = 'block';
                return;
            }

            currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
            statusDiv.textContent = `${currentPlayer === 'black' ? '黑' : '白'}方回合`;
        }

        // 检查是否获胜
        function checkWin(row, col) {
            const directions = [
                [1, 0], // 水平
                [0, 1], // 垂直
                [1, 1], // 对角线
                [1, -1] // 反对角线
            ];

            for (const [dx, dy] of directions) {
                let count = 1;

                // 向一个方向检查
                let x = row + dx;
                let y = col + dy;
                while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && board[x][y] === currentPlayer) {
                    count++;
                    x += dx;
                    y += dy;
                }

                // 向相反方向检查
                x = row - dx;
                y = col - dy;
                while (x >= 0 && x < boardSize && y >= 0 && y < boardSize && board[x][y] === currentPlayer) {
                    count++;
                    x -= dx;
                    y -= dy;
                }

                if (count >= 5) {
                    return true;
                }
            }

            return false;
        }

        // 重新开始游戏
        function restartGame() {
            board.forEach(row => row.fill(null));
            currentPlayer = 'black';
            gameOver = false;
            statusDiv.textContent = '黑方回合';
            restartButton.style.display = 'none';
            initBoard();
        }

        // 初始化游戏
        initBoard();
        restartButton.addEventListener('click', restartGame);
    </script>
</body>
</html>