Juego X/O VS pc

3,042 0 Anes_unk Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

11 February 2026

Código HTML del juego Five Nights at Diddy's

22 October 2026

Juego de carreras de motos acuáticas en JavaScript y HTML

2 June 2026

El juego/propietario de Andrew

HTML

<!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;
}

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);

Comments 0

…