五子棋游戏在线玩 - 免费五子棋游戏 - 常规

<!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 = [];
        let isBlack = true;
<pre><code>    function initBoard() {
        for (let i = 0; i &lt; 15; i++) {
            board[i] = [];
            for (let j = 0; j &lt; 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 &lt; 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 &lt; 15 &amp;&amp; y + i * dy &lt; 15 &amp;&amp; board[x + i * dx][y + i * dy] === color) {
            count++;
            i++;
        }
        i = 1;
        while (x - i * dx &gt;= 0 &amp;&amp; y - i * dy &gt;= 0 &amp;&amp; board[x - i * dx][y - i * dy] === color) {
            count++;
            i++;
        }
        return count &gt;= 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;
        isBlack = true; // 重置玩家颜色
        updateScoreboard();
    }

    function initScoreboard() {
        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();
    initScoreboard();
&lt;/script&gt;
</code></pre>
</body>
</html>