Jeu X/O VS PC

2,786 Anes_unk

Ouvrir dans l'éditeur Publiez votre code

Recommandé

31 January 2026

Chargeur de jeu HTML5 People Playground

13 October 2025

Exemple de code HTML pour le jeu Snake

15 July 2026

Jeu 2

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