Jeu X/O VS PC

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 January 2024

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

Jeu X/O VS PC

Recommandé

Jeu de morpion

Jeu de Serpent simple

Jeu de Tetris simple

HTML

CSS

JS

Recommandé

Jeu de morpion

Jeu de Serpent simple

Jeu de Tetris simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS