五子棋游戏 - 在线玩五子棋并查看分数 - 常规

<body>
    <canvas id='canvas' width='600' height='600'></canvas>
    <div id='score'></div>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const score = document.getElementById('score');
        let blackScore = 0;
        let whiteScore = 0;
        function drawScore() {
            score.innerHTML = `黑方得分：${blackScore}，白方得分：${whiteScore}`;
        }
        function drawBoard() {
            for (let i = 0; i < 15; i++) {
                ctx.moveTo(20 + i * 40, 20);
                ctx.lineTo(20 + i * 40, 580);
                ctx.stroke();
                ctx.moveTo(20, 20 + i * 40);
                ctx.lineTo(580, 20 + i * 40);
                ctx.stroke();
            }
        }
        const board = [];
        for (let i = 0; i < 15; i++) {
            board[i] = [];
            for (let j = 0; j < 15; j++) {
                board[i][j] = 0;
            }
        }
        drawBoard()
        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 checkWin(x, y, isBlack) {
            const color = isBlack ? 1 : 2;
            let count = 1;
            let i = 1;
            while (x + i < 15 && board[x + i][y] === color) {
                count++;
                i++;
            }
            i = 1;
            while (x - i >= 0 && board[x - i][y] === color) {
                count++;
                i++;
            }
            if (count >= 5) {
                return true;
            }
            count = 1;
            i = 1;
            while (y + i < 15 && board[x][y + i] === color) {
                count++;
                i++;
            }
            i = 1;
            while (y - i >= 0 && board[x][y - i] === color) {
                count++;
                i++;
            }
            if (count >= 5) {
                return true;
            }
            count = 1;
            i = 1;
            while (x + i < 15 && y + i < 15 && board[x + i][y + i] === color) {
                count++;
                i++;
            }
            i = 1;
            while (x - i >= 0 && y - i >= 0 && board[x - i][y - i] === color) {
                count++;
                i++;
            }
            if (count >= 5) {
                return true;
            }
            count = 1;
            i = 1;
            while (x + i < 15 && y - i >= 0 && board[x + i][y - i] === color) {
                count++;
                i++;
            }
            i = 1;
            while (x - i >= 0 && y + i < 15 && board[x - i][y + i] === color) {
                count++;
                i++;
            }
            if (count >= 5) {
                return true;
            }
            return false;
        }
        let isBlack = true
        canvas.addEventListener('click', function (e) {
            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)) {
                    alert(isBlack ? '黑方胜利！' : '白方胜利！');
                    if (isBlack) {
                        blackScore++;
                    } else {
                        whiteScore++;
                    }
                    drawScore();
                    return;
                }
                isBlack = !isBlack;
            }
        });
        drawScore();
    </script>
</body>