d
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu du Morpion Interactif</title>
<style>
:root {
--bg-color: #1a1a2e;
--card-color: #16213e;
--accent-x: #e94560;
--accent-o: #0f3460;
--text-color: #ffffff;
--grid-line: #4f5d75;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
h1 {
margin-bottom: 10px;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.score-board {
display: flex;
gap: 20px;
font-size: 1.2rem;
margin-bottom: 20px;
background: var(--card-color);
padding: 10px 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.status {
font-size: 1.3rem;
margin-bottom: 20px;
font-weight: bold;
height: 30px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: var(--grid-line);
padding: 10px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.cell {
background-color: var(--card-color);
border: none;
border-radius: 5px;
font-size: 2.5rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.cell:hover {
background-color: #223157;
transform: scale(1.05);
}
.cell.x {
color: var(--accent-x);
}
.cell.o {
color: #4e9f3d;
}
.cell.winner-cell {
background-color: #ffd700;
color: #000;
animation: pulse 1s infinite alternate;
}
.btn-reset {
margin-top: 30px;
padding: 12px 24px;
font-size: 1rem;
font-weight: bold;
background-color: var(--accent-x);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
box-shadow: 0 4px 10px rgba(233, 69, 96, 0.3);
}
.btn-reset:hover {
background-color: #ff5773;
transform: translateY(-2px);
}
.btn-reset:active {
transform: translateY(0);
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.03); }
}
</style>
</head>
<body>
<h1>Morpion</h1>
<div class="score-board">
<div>Joueur X : <span id="scoreX">0</span></div>
<div>Joueur O : <span id="scoreO">0</span></div>
</div>
<div class="status" id="status">C'est au tour de X</div>
<div class="board" id="board">
<button class="cell" data-index="0"></button>
<button class="cell" data-index="1"></button>
<button class="cell" data-index="2"></button>
<button class="cell" data-index="3"></button>
<button class="cell" data-index="4"></button>
<button class="cell" data-index="5"></button>
<button class="cell" data-index="6"></button>
<button class="cell" data-index="7"></button>
<button class="cell" data-index="8"></button>
</div>
<button class="btn-reset" id="resetBtn">Recommencer</button>
<script>
const board = document.getElementById('board');
const cells = document.querySelectorAll('.cell');
const statusText = document.getElementById('status');
const resetBtn = document.getElementById('resetBtn');
const scoreXText = document.getElementById('scoreX');
const scoreOText = document.getElementById('scoreO');
let currentPlayer = 'X';
let gameState = ["", "", "", "", "", "", "", "", ""];
let isGameActive = true;
let scores = { X: 0, O: 0 };
const winningConditions = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Lignes
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Colonnes
[0, 4, 8], [2, 4, 6] // Diagonales
];
function handleCellClick(e) {
const clickedCell = e.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
if (gameState[clickedCellIndex] !== "" || !isGameActive) {
return;
}
updateCell(clickedCell, clickedCellIndex);
checkResult();
}
function updateCell(cell, index) {
gameState[index] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add(currentPlayer.toLowerCase());
}
function changePlayer() {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
statusText.textContent = `C'est au tour de ${currentPlayer}`;
}
function checkResult() {
let roundWon = false;
let winningCombo = [];
for (let i = 0; i < winningConditions.length; i++) {
const winCondition = winningConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
}
if (a === b && b === c) {
roundWon = true;
winningCombo = winCondition;
break;
}
}
if (roundWon) {
statusText.textContent = `Le joueur ${currentPlayer} a gagné ! 🎉`;
isGameActive = false;
scores[currentPlayer]++;
updateScores();
highlightWinners(winningCombo);
return;
}
let roundDraw = !gameState.includes("");
if (roundDraw) {
statusText.textContent = "Match nul ! 👔";
isGameActive = false;
return;
}
changePlayer();
}
function highlightWinners(combo) {
combo.forEach(index => {
cells[index].classList.add('winner-cell');
});
}
function updateScores() {
scoreXText.textContent = scores.X;
scoreOText.textContent = scores.O;
}
function resetGame() {
currentPlayer = 'X';
gameState = ["", "", "", "", "", "", "", "", ""];
isGameActive = true;
statusText.textContent = `C'est au tour de ${currentPlayer}`;
cells.forEach(cell => {
cell.textContent = "";
cell.className = "cell"; // Reset les classes X, O et winner-cell
});
}
board.addEventListener('click', handleCellClick);
resetBtn.addEventListener('click', resetGame);
</script>
</body>
</html>