Tic Tac Toe ( Create on AI)

গেমের সোর্স কোড:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>নিয়ন টিক-ট্যাক-টো - হাই ভলিউম</title>
    <style>
        :root {
            --bg-color: #05050a;
            --neon-cyan: #00f3ff;
            --neon-pink: #ff00e0;
            --neon-white: #ffffff;
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            touch-action: manipulation;
        }

        body {
            background-color: var(--bg-color);
            color: white;
            font-family: 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

        h1 {
            font-size: 2.2rem;
            margin: 0 0 5px 0;
            text-transform: uppercase;
            letter-spacing: 4px;
            color: #fff;
            text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
        }

        #status {
            margin-bottom: 25px;
            font-size: 1.2rem;
            height: 30px;
            font-weight: bold;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        .board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 12px;
            width: 85vw;
            max-width: 340px;
            aspect-ratio: 1 / 1;
            padding: 15px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 20px;
            border: 4px solid var(--neon-cyan);
            box-shadow: 0 0 20px var(--neon-cyan), inset 0 0 10px var(--neon-cyan);
        }

        .cell {
            background-color: rgba(255, 255, 255, 0.02);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: bold;
            cursor: pointer;
            border: 2px solid var(--neon-cyan);
            box-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
            position: relative;
            overflow: hidden;
            line-height: 0;
            transition: background-color 0.2s;
        }

        .cell:active {
            background-color: rgba(0, 243, 255, 0.15);
        }

        .cell.x {
            color: var(--neon-cyan);
            text-shadow: 0 0 15px var(--neon-cyan);
        }

        .cell.o {
            color: var(--neon-pink);
            text-shadow: 0 0 15px var(--neon-pink);
            border-color: var(--neon-pink);
            box-shadow: 0 0 8px rgba(255, 0, 224, 0.2);
        }

        .restart-btn {
            margin-top: 35px;
            padding: 15px 50px;
            font-size: 1.2rem;
            background: transparent;
            color: white;
            border: 3px solid var(--neon-pink);
            border-radius: 50px;
            font-weight: bold;
            text-transform: uppercase;
            box-shadow: 0 0 15px var(--neon-pink);
            transition: 0.2s ease;
        }

        .restart-btn:active {
            transform: scale(0.95);
            background: var(--neon-pink);
            color: black;
        }

        .winner {
            background: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 0 20px var(--neon-white) !important;
            border-color: var(--neon-white) !important;
        }
    </style>
</head>
<body>

    <h1>TIC TAC TOE</h1>
    
    <div id="status">খেলোয়াড় X এর পালা</div>

    <div class="board" id="board">
        <div class="cell" data-index="0"></div>
        <div class="cell" data-index="1"></div>
        <div class="cell" data-index="2"></div>
        <div class="cell" data-index="3"></div>
        <div class="cell" data-index="4"></div>
        <div class="cell" data-index="5"></div>
        <div class="cell" data-index="6"></div>
        <div class="cell" data-index="7"></div>
        <div class="cell" data-index="8"></div>
    </div>

    <button class="restart-btn" onclick="restartGame()">রিসেট গেম</button>

    <script>
        const statusElement = document.getElementById('status');
        const cells = document.querySelectorAll('.cell');
        
        let currentPlayer = 'X';
        let gameState = ["", "", "", "", "", "", "", "", ""];
        let gameActive = true;

        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

        // সাউন্ড ভলিউম বাড়িয়ে ০.৭ (হাই ভলিউম) করা হয়েছে
        function playSound(freq, type, duration) {
            const oscillator = audioCtx.createOscillator();
            const gainNode = audioCtx.createGain();

            oscillator.type = type;
            oscillator.frequency.setValueAtTime(freq, audioCtx.currentTime);
            
            // ভলিউম লেভেল ০.৭ করা হয়েছে (আগে ০.১ ছিল)
            gainNode.gain.setValueAtTime(0.7, audioCtx.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.0001, audioCtx.currentTime + duration);

            oscillator.connect(gainNode);
            gainNode.connect(audioCtx.destination);

            oscillator.start();
            oscillator.stop(audioCtx.currentTime + duration);
        }

        const sounds = {
            x: () => playSound(440, 'sine', 0.2),
            o: () => playSound(554, 'sine', 0.2),
            win: () => {
                playSound(523, 'triangle', 0.3);
                setTimeout(() => playSound(659, 'triangle', 0.3), 150);
                setTimeout(() => playSound(783, 'triangle', 0.5), 300);
            },
            draw: () => playSound(200, 'sawtooth', 0.5),
            reset: () => playSound(880, 'sine', 0.1)
        };

        const winningConditions = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8],
            [0, 3, 6], [1, 4, 7], [2, 5, 8],
            [0, 4, 8], [2, 4, 6]
        ];

        function handleCellClick(e) {
            const clickedCell = e.target;
            const clickedIndex = parseInt(clickedCell.getAttribute('data-index'));

            if (gameState[clickedIndex] !== "" || !gameActive) return;

            if (currentPlayer === 'X') sounds.x(); else sounds.o();

            gameState[clickedIndex] = currentPlayer;
            clickedCell.innerText = currentPlayer;
            clickedCell.classList.add(currentPlayer.toLowerCase());

            checkResult();
        }

        function checkResult() {
            let roundWon = false;
            for (let i = 0; i < winningConditions.length; i++) {
                const [a, b, c] = winningConditions[i];
                if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) {
                    roundWon = true;
                    [a, b, c].forEach(index => cells[index].classList.add('winner'));
                    break;
                }
            }

            if (roundWon) {
                sounds.win();
                statusElement.innerText = `খেলোয়াড় ${currentPlayer} জিতেছে! 🎉`;
                statusElement.style.color = currentPlayer === 'X' ? 'var(--neon-cyan)' : 'var(--neon-pink)';
                gameActive = false;
                return;
            }

            if (!gameState.includes("")) {
                sounds.draw();
                statusElement.innerText = "খেলাটি ড্র হয়েছে! 🤝";
                statusElement.style.color = 'white';
                gameActive = false;
                return;
            }

            currentPlayer = currentPlayer === "X" ? "O" : "X";
            statusElement.innerText = `খেলোয়াড় ${currentPlayer} এর পালা`;
        }

        function restartGame() {
            sounds.reset();
            currentPlayer = 'X';
            gameState = ["", "", "", "", "", "", "", "", ""];
            gameActive = true;
            statusElement.innerText = "খেলোয়াড় X এর পালা";
            statusElement.style.color = 'white';
            cells.forEach(cell => {
                cell.innerText = "";
                cell.classList.remove('x', 'o', 'winner');
                cell.style.borderColor = 'var(--neon-cyan)';
            });
        }

        cells.forEach(cell => cell.addEventListener('click', handleCellClick));
    </script>
</body>
</html>
Tic Tac Toe ( Create on AI)

গেমের সোর্স কোড:

Posted by Ranajit Game Master
