!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width initial-scale=10 title五子棋游戏titleheadbody c

以下是优化后的代码，主要是将一些重复的代码封装成函数，使代码更简洁和可读性更高：
<!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>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <div id="scoreboard"></div>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let blackScore = 0;
        let whiteScore = 0;
        let gameOver = false;
        const board = [];

        function initBoard() {
            for (let i = 0; i < 15; i++) {
                board[i] = [];
                for (let j = 0; j < 15; j++) {
                    board[i][j] = 0;
                }
            }
        }

        function drawLine(startX, startY, endX, endY) {
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.stroke();
        }

        function drawBoard() {
            for (let i = 0; i < 15; i++) {
                drawLine(20 + i * 40, 20, 20 + i * 40, 580);
                drawLine(20, 20 + i * 40, 580, 20 + i * 40);
            }
        }

        function drawPiece(x, y, isBlack) {
            ctx.beginPath();
            ctx.arc(20 + x * 40, 20 + y * 40, 18, 0, 2 * Math.PI);
            ctx.closePath();
            const gradient = ctx.createRadialGradient(
                20 + x * 40 + 2,
                20 + y * 40 - 2,
                18,
                20 + x * 40 + 2,
                20 + y * 40 - 2,
                0
            );
            if (isBlack) {
                gradient.addColorStop(0, '#0a0a0a');
                gradient.addColorStop(1, '#636766');
            } else {
                gradient.addColorStop(0, '#d1d1d1');
                gradient.addColorStop(1, '#f9f9f9');
            }
            ctx.fillStyle = gradient;
            ctx.fill();
        }

        function checkLine(x, y, color, dx, dy) {
            let count = 1;
            let i = 1;
            while (x + i * dx < 15 && y + i * dy < 15 && board[x + i * dx][y + i * dy] === color) {
                count++;
                i++;
            }
            i = 1;
            while (x - i * dx >= 0 && y - i * dy >= 0 && board[x - i * dx][y - i * dy] === color) {
                count++;
                i++;
            }
            return count >= 5;
        }

        function checkWin(x, y, isBlack) {
            const color = isBlack ? 1 : 2;
            return checkLine(x, y, color, 1, 0) || checkLine(x, y, color, 0, 1) || checkLine(x, y, color, 1, 1) || checkLine(x, y, color, 1, -1);
        }

        function updateScoreboard() {
            const scoreboard = document.getElementById('scoreboard');
            scoreboard.innerHTML = `黑方得分：${blackScore}，白方得分：${whiteScore}`;
        }

        function clearBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBoard();
            initBoard();
            gameOver = false;
            blackScore = 0;
            whiteScore = 0;
            updateScoreboard();
        }

        function handleClick(e) {
            if (gameOver) {
                clearBoard();
                return;
            }
            const x = Math.floor((e.clientX - canvas.offsetLeft) / 40);
            const y = Math.floor((e.clientY - canvas.offsetTop) / 40);
            if (board[x][y] === 0) {
                drawPiece(x, y, isBlack);
                board[x][y] = isBlack ? 1 : 2;
                if (checkWin(x, y, isBlack)) {
                    if (isBlack) {
                        blackScore++;
                    } else {
                        whiteScore++;
                    }
                    updateScoreboard();
                    alert(isBlack ? '黑方胜利！' : '白方胜利！');
                    gameOver = true;
                    return;
                }
                isBlack = !isBlack;
            }
        }

        canvas.addEventListener('click', handleClick);

        drawBoard();
        initBoard();
        updateScoreboard();
    </script>
</body>

</html>
!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width initial-scale=10 title五子棋游戏titleheadbody c