Jeu X/O VS PC

2,926 Anes_unk

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 April 2026

Terrain de jeux pour les gens

22 March 2025

Site de jeux en ligne

12 December 2025

Code source du jeu HTML5 Eggy Car

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