एक्स/ओ गेम बनाम पीसी

अनुशंसित

22 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="notification">Winner!</div>
    <div class="container">
        <div 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>
        <div id="scoreboard">
            <h2>Scores</h2>
            <table>
                <tr>
                    <th>Player</th>
                    <th>Score</th>
                </tr>
                <tr>
                    <td>X</td>
                    <td id="scoreX">0</td>
                </tr>
                <tr>
                    <td>O</td>
                    <td id="scoreO">0</td>
                </tr>
            </table>
            <button id="restart">Restart</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: 'Roboto', sans-serif;
    background-color: #111;
    color: white;
    text-align: center;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 15px;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
    box-shadow: 0 0 30px rgba(0, 188, 255, 0.5);
}

#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px; /* Reduced gap */
    margin: 20px;
    padding: 10px;
    background-color: #3a3a3a;
    border: 4px solid #00bfff;
    border-radius: 15px;
    box-shadow: 0 0 20px #00bfff;
    width: 420px; /* Adjusted width */
    height: 420px; /* Adjusted height */
}

.cell {
    width: 130px;
    height: 130px;
    background-color: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cell:hover {
    background-color: #5a5a5a;
    box-shadow: 0 0 15px #00bfff;
}

.cell.X {
    color: red;
    text-shadow: 0 0 10px red;
}

.cell.O {
    color: blue;
    text-shadow: 0 0 10px blue;
}

#restart {
    margin-top: 20px;
    padding: 15px 30px;
    font-size: 1.5rem;
    color: white;
    background-color: #00bfff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s;
    width: 100%;
}

#restart:hover {
    background-color: #0094cc;
    transform: scale(1.05);
}

#scoreboard {
    padding: 20px;
    background-color: #3a3a3a;
    border: 4px solid #00bfff;
    border-radius: 15px;
    box-shadow: 0 0 20px #00bfff;
    width: 400px;
}

#scoreboard h2 {
    margin: 0;
    font-size: 2.5rem;
    text-align: right;
    text-shadow: 1px 1px 5px rgba(0, 188, 255, 0.8);
}

#scoreboard table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#scoreboard th, #scoreboard td {
    padding: 15px;
    border: 2px solid #00bfff;
    text-align: center;
    font-size: 1.8rem;
}

#scoreboard th {
    background-color: #00bfff;
    color: black;
}

#notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 188, 255, 0.8);
    color: black;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    font-size: 1.8rem;
    z-index: 100;
    box-shadow: 0 0 10px #00bfff;
    transition: opacity 0.5s ease;
}

JS

const board = document.getElementById('board');
const cells = document.querySelectorAll('.cell');
const restartButton = document.getElementById('restart');
const scoreXDisplay = document.getElementById('scoreX');
const scoreODisplay = document.getElementById('scoreO');
const notification = document.getElementById('notification');

let currentPlayer = 'X';
let boardState = Array(9).fill(null);
let gameActive = true;
let score = { X: 0, O: 0 };

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(event) {
    const clickedCell = event.target;
    const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));

if (boardState[clickedCellIndex] || !gameActive) {
        return;
    }

boardState[clickedCellIndex] = currentPlayer;
    clickedCell.textContent = currentPlayer;
    clickedCell.classList.add(currentPlayer);

if (checkWin()) {
        showNotification(`Player ${currentPlayer} wins!`);
        score[currentPlayer]++;
        updateScoreboard();
        gameActive = false;
    } else if (boardState.every(cell => cell)) {
        showNotification('Draw!');
        gameActive = false;
    } else {
        currentPlayer = 'O';
        computerPlay();
    }
}

function computerPlay() {
    const availableCells = boardState.map((cell, index) => cell === null ? index : null).filter(cell => cell !== null);
    const randomIndex = Math.floor(Math.random() * availableCells.length);
    const computerMove = availableCells[randomIndex];

boardState[computerMove] = currentPlayer;
    cells[computerMove].textContent = currentPlayer;
    cells[computerMove].classList.add(currentPlayer);

if (checkWin()) {
        showNotification(`Player ${currentPlayer} (Computer) wins!`);
        score[currentPlayer]++;
        updateScoreboard();
        gameActive = false;
    } else if (boardState.every(cell => cell)) {
        showNotification('Draw!');
        gameActive = false;
    } else {
        currentPlayer = 'X';
    }
}

function checkWin() {
    return winningConditions.some(condition => {
        const [a, b, c] = condition;
        return boardState[a] === currentPlayer && boardState[b] === currentPlayer && boardState[c] === currentPlayer;
    });
}

function updateScoreboard() {
    scoreXDisplay.textContent = score.X;
    scoreODisplay.textContent = score.O;
}

function restartGame() {
    gameActive = true;
    currentPlayer = 'X';
    boardState.fill(null);
    cells.forEach(cell => {
        cell.textContent = '';
        cell.classList.remove('X', 'O');
    });
    notification.style.display = 'none';
}

cells.forEach(cell => cell.addEventListener('click', handleCellClick));
restartButton.addEventListener('click', restartGame);

एक्स/ओ गेम बनाम पीसी

अनुशंसित

ब्रेकआउट गेम

टिक टैक टो गेम

गोकू बनाम वेजेटा

HTML

CSS

JS

अनुशंसित

ब्रेकआउट गेम

टिक टैक टो गेम

गोकू बनाम वेजेटा

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS