File size: 4,156 Bytes
d1e399a b65e376 d1e399a b65e376 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!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>
// Initialisation des variables
let currentPlayer = "X";
let winner = null;
let gameBoard = ["", "", "", "", "", "", "", "", ""];
// Fonction pour changer de joueur
function changePlayer() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
$("#current-player").text(currentPlayer);
}
// Fonction pour afficher le gagnant
function displayWinner() {
$("#game-board").off("click"); // Désactiver le clic sur les carrés
$("#reset").show(); // Afficher le bouton "Rejouer"
$("#current-player").text(winner + " a gagné !"); // Afficher le message de victoire
}
// Fonction pour vérifier si un joueur a gagné
function checkWin() {
const winConditions = [
// Toutes les conditions de victoire possibles
[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("")) {
// Si le tableau est rempli sans gagnant, il y a match $("#game-board").off("click"); // Désactiver le clic sur les carrés
$("#reset").show(); // Afficher le bouton "Rejouer"
$("#current-player").text("Match nul !"); // Afficher le message de match nul
return true;
}
return false; // Aucun gagnant ou match nul
}
// Fonction pour mettre à jour le jeu
function updateGame() {
$("#game-board").empty(); // Vider le plateau de jeu
// Ajouter chaque carré au plateau de jeu
for(let i = 0; i < gameBoard.length; i++) {
const square = $("<div>").addClass("square").attr("id", i);
square.text(gameBoard[i]);
$("#game-board").append(square);
}
// Activer le clic sur les carrés
$("#game-board").on("click", ".square", function() {
if($(this).text() === "" && !winner) {
$(this).text(currentPlayer);
gameBoard[$(this).attr("id")] = currentPlayer;
if(checkWin()) {
return;
}
changePlayer();
}
});
}
// Fonction pour réinitialiser le jeu
function resetGame() {
// Réinitialiser les variables
currentPlayer = "X";
winner = null;
gameBoard = ["", "", "", "", "", "", "", "", ""];
// Cacher le bouton "Rejouer"
$("#reset").hide();
// Mettre à jour le jeu
updateGame();
}
// Appel initial de la fonction pour mettre à jour le jeu
updateGame();
// Activer le clic sur le bouton "Rejouer"
$("#reset").on("click", resetGame);
</script>
</body>
</html> |