赢了两局就会放烟花的五子棋游戏

vliu612
于 2024-08-06 10:15:51 发布
阅读量107
点赞数
文章标签： html 算法
本文链接：https://blog.csdn.net/vliu612/article/details/140947666
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gomoku (Five in a Row)</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        #chess {
            margin-bottom: 20px;
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            font-size: 16px;
        }
        #result-wrap {
            margin-top: 20px;
            font-size: 20px;
            color: #333;
        }
    </style>
</head>
<body>
    <canvas id="chess" width="450" height="450"></canvas>
    <div>
        <button id="restart">Restart</button>
        <button id="goback" class="unable">Undo</button>
        <button id="return" class="unable">Redo</button>
    </div>
    <h3 id="result-wrap">--益智五子棋--</h3>

    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
    <script>
        var over = false;
        var me = true; // Current player, true for human, false for computer
        var _nowi = 0, _nowj = 0; // Coordinates of the player's last move
        var _compi = 0, _compj = 0; // Coordinates of the computer's last move
        var _myWin = [], _compWin = []; // Track winning situations for undo/redo
        var backAble = false, returnAble = false; // Track undo/redo availability
        var resultTxt = document.getElementById('result-wrap');
        var chressBord = []; // Game board
        var playerWinCount = 0; // Track player's consecutive wins

        // Initialize the game board and winning patterns
        for (var i = 0; i < 15; i++) {
            chressBord[i] = [];
            for (var j = 0; j < 15; j++) {
                chressBord[i][j] = 0;
            }
        }

        var myWin = [];
        var computerWin = [];
        var wins = [];
        var count = 0; // Total number of winning patterns

        // Define winning patterns
        for (var i = 0; i < 15; i++) {
            wins[i] = [];
            for (var j = 0; j < 15; j++) {
                wins[i][j] = [];
            }
        }

        // Horizontal, vertical, diagonal, and anti-diagonal winning patterns
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i][j + k][count] = true;
                }
                count++;
            }
        }
        for (var i = 0; i < 15; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[j + k][i][count] = true;
                }
                count++;
            }
        }
        for (var i = 0; i < 11; i++) {
            for (var j = 0; j < 11; j++) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j + k][count] = true;
                }
                count++;
            }
        }
        for (var i = 0; i < 11; i++) {
            for (var j = 14; j > 3; j--) {
                for (var k = 0; k < 5; k++) {
                    wins[i + k][j - k][count] = true;
                }
                count++;
            }
        }

        // Initialize winning arrays
        for (var i = 0; i < count; i++) {
            myWin[i] = 0;
            _myWin[i] = 0;
            computerWin[i] = 0;
            _compWin[i] = 0;
        }

        var chess = document.getElementById("chess");
        var context = chess.getContext('2d');
        context.strokeStyle = '#bfbfbf'; // Board line color
        var backbtn = document.getElementById("goback");
        var returnbtn = document.getElementById("return");

        // Draw the board
        window.onload = function () {
            drawChessBoard();
        }

        // Restart the game
        document.getElementById("restart").onclick = function () {
            window.location.reload();
        }

        // Player's move
        chess.onclick = function (e) {
            if (over) {
                return;
            }
            if (!me) {
                return;
            }
            backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
            var x = e.offsetX;
            var y = e.offsetY;
            var i = Math.floor(x / 30);
            var j = Math.floor(y / 30);
            _nowi = i;
            _nowj = j;
            if (chressBord[i][j] == 0) {
                oneStep(i, j, me);
                chressBord[i][j] = 1; // Player occupies the position

                // Check for known losing sequence
                if (isLosingSequence()) {
                    resultTxt.innerHTML = 'This move sequence led to a loss previously. Try a different strategy!';
                    chressBord[i][j] = 0; // Undo the move
                    minusStep(i, j);
                    return;
                }

                for (var k = 0; k < count; k++) {
                    if (wins[i][j][k]) {
                        myWin[k]++;
                        _compWin[k] = computerWin[k];
                        computerWin[k] = 6; // Opponent cannot win in this position
                        if (myWin[k] == 5) {
                            resultTxt.innerHTML = 'Congratulations, you won!';
                            playerWinCount++;
                            if (playerWinCount >= 2) {
                                showFireworks();
                            }
                            over = true;
                        }
                    }
                }
                if (!over) {
                    me = !me;
                    computerAI();
                }
            }
        }

        // Undo move
        backbtn.onclick = function (e) {
            if (!backAble) { return; }
            over = false;
            me = true;
            returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
            chressBord[_nowi][_nowj] = 0;
            minusStep(_nowi, _nowj);
            for (var k = 0; k < count; k++) {
                if (wins[_nowi][_nowj][k]) {
                    myWin[k]--;
                    computerWin[k] = _compWin[k];
                }
            }
            chressBord[_compi][_compj] = 0;
            minusStep(_compi, _compj);
            for (var k = 0; k < count; k++) {
                if (wins[_compi][_compj][k]) {
                    computerWin[k]--;
                    myWin[k] = _myWin[i];
                }
            }
            resultTxt.innerHTML = '--益智五子棋--';
            returnAble = true;
            backAble = false;
        }

        // Redo move
        returnbtn.onclick = function (e) {
            if (!returnAble) { return; }
            chressBord[_nowi][_nowj] = 1;
            oneStep(_nowi, _nowj, me);
            for (var k = 0; k < count; k++) {
                if (wins[_nowi][_nowj][k]) {
                    myWin[k]++;
                    _compWin[k] = computerWin[k];
                    computerWin[k] = 6;
                    if (myWin[k] == 5) {
                        resultTxt.innerHTML = 'Congratulations, you won!';
                        over = true;
                    }
                }
            }
            chressBord[_compi][_compj] = 2;
            oneStep(_compi, _compj, !me);
            for (var k = 0; k < count; k++) {
                if (wins[_compi][_compj][k]) {
                    computerWin[k]++;
                    _myWin[k] = myWin[k];
                    myWin[k] = 6;
                    if (computerWin[k] == 5) {
                        resultTxt.innerHTML = 'Computer wins!';
                        over = true;
                    }
                }
            }
            returnbtn.className += " unable";
            returnAble = false;
            backAble = true;
        }

        // Draw a piece on the board
        var oneStep = function (i, j, me) {
            context.beginPath();
            context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);
            context.closePath();
            var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);
            if (me) {
                gradient.addColorStop(0, "#0a0a0a");
                gradient.addColorStop(1, "#636766");
            } else {
                gradient.addColorStop(0, "#d1d1d1");
                gradient.addColorStop(1, "#f9f9f9");
            }
            context.fillStyle = gradient;
            context.fill();
        }

        // Erase a piece from the board
        var minusStep = function (i, j) {
            context.fillStyle = "#F0F0F0";
            context.fillRect(15 + i * 30 - 13, 15 + j * 30 - 13, 26, 26);
            context.strokeStyle = '#bfbfbf';
            context.strokeRect(15 + i * 30 - 13, 15 + j * 30 - 13, 26, 26);
        }

        // Check if a move is part of a known losing sequence
        var isLosingSequence = function () {
            // Implement your logic to check known losing sequences
            return false;
        }

        // Draw the board lines
        var drawChessBoard = function () {
            for (var i = 0; i < 15; i++) {
                context.moveTo(15 + i * 30, 15);
                context.lineTo(15 + i * 30, 435);
                context.stroke();
                context.moveTo(15, 15 + i * 30);
                context.lineTo(435, 15 + i * 30);
                context.stroke();
            }
        }

        // Computer's move
        var computerAI = function () {
            var myScore = [];
            var computerScore = [];
            var max = 0;
            var u = 0, v = 0;
            for (var i = 0; i < 15; i++) {
                myScore[i] = [];
                computerScore[i] = [];
                for (var j = 0; j < 15; j++) {
                    myScore[i][j] = 0;
                    computerScore[i][j] = 0;
                }
            }
            for (var i = 0; i < 15; i++) {
                for (var j = 0; j < 15; j++) {
                    if (chressBord[i][j] == 0) {
                        for (var k = 0; k < count; k++) {
                            if (wins[i][j][k]) {
                                if (myWin[k] == 1) {
                                    myScore[i][j] += 200;
                                } else if (myWin[k] == 2) {
                                    myScore[i][j] += 400;
                                } else if (myWin[k] == 3) {
                                    myScore[i][j] += 2000;
                                } else if (myWin[k] == 4) {
                                    myScore[i][j] += 10000;
                                }
                                if (computerWin[k] == 1) {
                                    computerScore[i][j] += 220;
                                } else if (computerWin[k] == 2) {
                                    computerScore[i][j] += 420;
                                } else if (computerWin[k] == 3) {
                                    computerScore[i][j] += 2100;
                                } else if (computerWin[k] == 4) {
                                    computerScore[i][j] += 20000;
                                }
                            }
                        }
                        if (myScore[i][j] > max) {
                            max = myScore[i][j];
                            u = i;
                            v = j;
                        } else if (myScore[i][j] == max) {
                            if (computerScore[i][j] > computerScore[u][v]) {
                                u = i;
                                v = j;
                            }
                        }
                        if (computerScore[i][j] > max) {
                            max = computerScore[i][j];
                            u = i;
                            v = j;
                        } else if (computerScore[i][j] == max) {
                            if (myScore[i][j] > myScore[u][v]) {
                                u = i;
                                v = j;
                            }
                        }
                    }
                }
            }
            oneStep(u, v, false);
            chressBord[u][v] = 2; // Computer occupies the position
            _compi = u;
            _compj = v;
            for (var k = 0; k < count; k++) {
                if (wins[u][v][k]) {
                    computerWin[k]++;
                    _myWin[k] = myWin[k];
                    myWin[k] = 6; // Player cannot win in this position
                    if (computerWin[k] == 5) {
                        resultTxt.innerHTML = 'Computer wins!';
                        over = true;
                    }
                }
            }
            if (!over) {
                me = !me;
            }
        }

        // Show fireworks for 10 seconds
        var showFireworks = function () {
            var duration = 10 * 1000; // Duration in milliseconds
            var end = Date.now() + duration;

            (function frame() {
                confetti({
                    particleCount: 5,
                    angle: 60,
                    spread: 55,
                    origin: { x: 0 }
                });
                confetti({
                    particleCount: 5,
                    angle: 120,
                    spread: 55,
                    origin: { x: 1 }
                });

                if (Date.now() < end) {
                    requestAnimationFrame(frame);
                }
            })();
        }
    </script>
</body>
</html>