Spaces:

Docfile
/

morpions

Running

App Files Files Community

morpions / index.html

Docfile

Update index.html

b65e376 almost 3 years ago

raw

history blame contribute delete

4.16 kB

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