|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Jeu de Morpion</title> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> |
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|
|
<style> |
|
|
.square { |
|
|
height: 100px; |
|
|
width: 100px; |
|
|
font-size: 50px; |
|
|
text-align: center; |
|
|
background-color: #fff; |
|
|
border: 1px solid #000; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container mt-5"> |
|
|
<div class="row justify-content-center"> |
|
|
<h1>Jeu de Morpion</h1> |
|
|
</div> |
|
|
<div class="row justify-content-center"> |
|
|
<div class="col-md-6"> |
|
|
<div id="game-board" class="d-flex flex-wrap"> |
|
|
<div class="square" id="0"></div> |
|
|
<div class="square" id="1"></div> |
|
|
<div class="square" id="2"></div> |
|
|
<div class="square" id="3"></div> |
|
|
<div class="square" id="4"></div> |
|
|
<div class="square" id="5"></div> |
|
|
<div class="square" id="6"></div> |
|
|
<div class="square" id="7"></div> |
|
|
<div class="square" id="8"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="row justify-content-center mt-5"> |
|
|
<button class="btn btn-primary" id="reset">Rejouer</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
let currentPlayer = "X"; |
|
|
let winner = null; |
|
|
let gameBoard = ["", "", "", "", "", "", "", "", ""]; |
|
|
|
|
|
|
|
|
function changePlayer() { |
|
|
currentPlayer = currentPlayer === "X" ? "O" : "X"; |
|
|
$("#current-player").text(currentPlayer); |
|
|
} |
|
|
|
|
|
|
|
|
function displayWinner() { |
|
|
$("#game-board").off("click"); |
|
|
$("#reset").show(); |
|
|
$("#current-player").text(winner + " a gagné !"); |
|
|
} |
|
|
|
|
|
|
|
|
function checkWin() { |
|
|
const winConditions = [ |
|
|
|
|
|
[0, 1, 2], |
|
|
[3, 4, 5], |
|
|
[6, 7, 8], |
|
|
[0, 3, 6], |
|
|
[1, 4, 7], |
|
|
[2, 5, 8], |
|
|
[0, 4, 8], |
|
|
[2, 4, 6] |
|
|
]; |
|
|
|
|
|
for(let i = 0; i < winConditions.length; i++) { |
|
|
const [a, b, c] = winConditions[i]; |
|
|
if(gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c]) { |
|
|
winner = gameBoard[a]; |
|
|
displayWinner(); |
|
|
return true; |
|
|
} |
|
|
} |
|
|
|
|
|
if(!gameBoard.includes("")) { |
|
|
|
|
|
$("#reset").show(); |
|
|
$("#current-player").text("Match nul !"); |
|
|
return true; |
|
|
} |
|
|
|
|
|
return false; |
|
|
} |
|
|
|
|
|
|
|
|
function updateGame() { |
|
|
$("#game-board").empty(); |
|
|
|
|
|
|
|
|
for(let i = 0; i < gameBoard.length; i++) { |
|
|
const square = $("<div>").addClass("square").attr("id", i); |
|
|
square.text(gameBoard[i]); |
|
|
$("#game-board").append(square); |
|
|
} |
|
|
|
|
|
|
|
|
$("#game-board").on("click", ".square", function() { |
|
|
if($(this).text() === "" && !winner) { |
|
|
$(this).text(currentPlayer); |
|
|
gameBoard[$(this).attr("id")] = currentPlayer; |
|
|
|
|
|
if(checkWin()) { |
|
|
return; |
|
|
} |
|
|
|
|
|
changePlayer(); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function resetGame() { |
|
|
|
|
|
currentPlayer = "X"; |
|
|
winner = null; |
|
|
gameBoard = ["", "", "", "", "", "", "", "", ""]; |
|
|
|
|
|
|
|
|
$("#reset").hide(); |
|
|
|
|
|
|
|
|
updateGame(); |
|
|
} |
|
|
|
|
|
|
|
|
updateGame(); |
|
|
|
|
|
|
|
|
$("#reset").on("click", resetGame); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
