Aujourd'hui, nous allons vous guider à travers la création du jeu « Morpion » en JavaScript. Ce jeu est parfait pour s'entraîner à la programmation et comprendre comment interagir avec HTML, CSS et JavaScript ! ⭐
Si vous êtes déjà un peu familier avec la programmation et que vous souhaitez créer quelque chose par vous-même, cet article vous aidera à comprendre les bases. Et pour le code source complet, vous pouvez aller à GitHub et voir le projet en action. Commençons !
Pour le code source complet et éventuellement des améliorations supplémentaires, consultez notre GitHub.
Étape 1 : Préparation des fichiers 💻
Pour créer un jeu, nous avons besoin de trois fichiers :
HTML (index.html) - pour créer la structure de la page.
CSS (style.css) - pour la mise en page.
JavaScript (script.js) - pour écrire la logique du jeu.
HTML est responsable de la structure, CSS ajoute du style et rend l'interface agréable, et JavaScript remplit le jeu de logique et d'interactivité. Tout d'abord, regardons le fichier HTML qui crée la base de notre jeu.
HTML : création de la structure
Le fichier HTML crée la base de l'interface utilisateur. Voici à quoi ressemble le code (partie du fichier index.html) :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Игра "Tic-tac-toe" | Coursme</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- окно выбора -->
<div class="select-box">
<header>Крестики-нолики</header>
<div class="content">
<div class="title">Выберите, кем вы хотите быть?</div>
<div class="options">
<button class="playerX">Игрок (X)</button>
<button class="playerO">Игрок (O)</button>
</div>
</div>
</div>
<!-- игровое поле -->
<div class="play-board">
<div class="details">
<div class="players">
<span class="Xturn">Ход X</span>
<span class="Oturn">Ход O</span>
<div class="slider"></div>
</div>
</div>
<div class="play-area">
<section>
<span class="box1"></span>
<span class="box2"></span>
<span class="box3"></span>
</section>
<section>
<span class="box4"></span>
<span class="box5"></span>
<span class="box6"></span>
</section>
<section>
<span class="box7"></span>
<span class="box8"></span>
<span class="box9"></span>
</section>
</div>
</div>
<!-- окно результата -->
<div class="result-box">
<div class="won-text"></div>
<div class="btn"><button>Играть снова</button></div>
</div>
<script src="script.js"></script>
</body>
</html>Ce code HTML crée trois sections principales :
Fenêtre de sélection du joueur - où le joueur choisit s'il sera X ou O.
Terrain de jeu - l'interface principale, où les joueurs font leurs mouvements.
Fenêtre de résultat - affiche le gagnant ou un match nul.
Ces trois sections constituent la base de notre gameplay et rendent l'interface claire et facile à utiliser.
Étape 2 : stylisation du jeu 🎨
Le fichier style.css est responsable de l'apparence du jeu. Voici quelques points clés :
Le fond du jeu est peint dans une belle couleur violette, ce qui rend l'interface lumineuse et agréable.
Les boutons de sélection du joueur ont une animation fluide lors du survol, ce qui rend l'interaction avec le jeu plus excitante.
Le terrain de jeu est divisé en cellules, chacune étant mise en surbrillance lors du survol, ce qui aide les joueurs à comprendre intuitivement où ils peuvent se déplacer.
Exemple de code de style.css :
body{
background: #6563FF;
color: #e0e0e0;
}
.play-area section span{
display: block;
height: 90px;
width: 90px;
margin: 2px;
color: #fff;
font-size: 40px;
line-height: 80px;
text-align: center;
border-radius: 5px;
background: #1e1e1e;
}Ce style rend notre jeu visuellement attrayant et facile à utiliser. Les cellules du terrain de jeu sont soigneusement conçues pour que chaque mouvement soit clairement visible et que les joueurs puissent facilement naviguer sur le terrain de jeu.
Passons maintenant à la partie la plus intéressante : JavaScript !
Étape 3 : logique du jeu en JavaScript 🕹️
JavaScript est ce qui rend notre jeu interactif. Voyons comment fonctionne notre fichier script.js, en commençant par la simple sélection d'un joueur jusqu'à la détermination du gagnant.
Initialisation du jeu et sélection du joueur
Lorsque le jeu est chargé, nous initialisons immédiatement certains éléments et ajoutons des événements pour les boutons de sélection du joueur. Voici comment faire :
// sélection de tous les éléments nécessaires
const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");
window.onload = ()=>{ // après le chargement de la fenêtre
for (let i = 0; i < allBox.length; i++) { // ajouter l'attribut onclick pour tous les span disponibles
allBox[i].setAttribute("onclick", "clickedBox(this)");
}
}Ici, nous trouvons tous les éléments nécessaires pour contrôler le jeu et ajoutons des événements de clic pour chaque cellule du terrain de jeu. Cela signifie que chaque cellule devient interactive et peut répondre aux actions de l'utilisateur.
Ensuite, le joueur choisit :
selectBtnX.onclick = ()=>{
selectBox.classList.add("hide"); // Masquer la fenêtre de sélection
playBoard.classList.add("show"); // Afficher le terrain de jeu
}
selectBtnO.onclick = ()=>{
selectBox.classList.add("hide");
playBoard.classList.add("show");
players.setAttribute("class", "players active player"); // Définir l'attribut pour les joueurs
}Ce code est responsable de l'affichage ou du masquage des différentes parties de l'interface en fonction du joueur sélectionné. Lorsque la sélection est faite, la fenêtre de sélection disparaît et le terrain de jeu apparaît à l'écran.
Mouvements du joueur et du bot ➖➕
Lorsqu'un joueur sélectionne une case sur le terrain de jeu, nous voulons qu'une icône (X ou O) apparaisse dans cette case. Voici comment nous allons le faire :
let playerXIcon = "fas fa-times"; // nom de la classe de l'icône croix de FontAwesome
let playerOIcon = "far fa-circle"; // nom de la classe de l'icône du cercle de FontAwesome
let playerSign = "X"; // variable globale, car nous l'utilisons dans plusieurs fonctions
let runBot = true; // variable globale avec une valeur booléenne pour arrêter le bot quand quelqu'un gagne ou en cas de match nul
function clickedBox(element){
if(players.classList.contains("player")){
playerSign = "O"; // Si le joueur a choisi O
element.innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
}else{
element.innerHTML = `<i class="${playerXIcon}"></i>`;
players.classList.add("active");
}
element.setAttribute("id", playerSign); // Nous définissons l'attribut id dans span / cellule avec le signe du joueur sélectionné
selectWinner(); // Nous vérifions s'il y a un gagnant
element.style.pointerEvents = "none"; // La cellule ne peut plus être sélectionnée
playBoard.style.pointerEvents = "none"; // Blocage du terrain de jeu jusqu'à ce que le bot fasse un mouvement
let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); // Générer un temps de latence aléatoire
setTimeout(()=>{
bot(runBot); // Appel de la fonction bot
}, randomTimeDelay);
}Ici, le joueur sélectionne une cellule et elle devient indisponible pour une nouvelle sélection. Ensuite, le mouvement passe au bot avec un léger retard pour créer l'effet d'un vrai jeu. Ainsi, le jeu devient dynamique et intéressant.
Fonction bot 🤖
La fonction bot sélectionne automatiquement la prochaine cellule disponible. Le bot fait un mouvement après le joueur, et ses actions créent également l'impression d'interagir avec un adversaire réel :
function bot(){
let array = []; // créer un tableau vide ... nous allons stocker les index des cellules non sélectionnées
if(runBot){ // si runBot true
playerSign = "O"; // changer playerSign en O, si le joueur a choisi X
for (let i = 0; i < allBox.length; i++) {
if(allBox[i].childElementCount == 0){ // si la cellule ne contient pas d'éléments enfants
array.push(i); // insérer l'index des cellules non sélectionnées dans le tableau
}
}
let randomBox = array[Math.floor(Math.random() * array.length)]; // choisir une cellule aléatoire
if(array.length > 0){
if(players.classList.contains("player")){
playerSign = "X"; // Si le joueur choisit O, alors le bot sera X
allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`;
allBox[randomBox].setAttribute("id", playerSign);
players.classList.add("active");
}else{
allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
allBox[randomBox].setAttribute("id", playerSign);
}
selectWinner(); // Nous vérifions s'il y a un gagnant
}
allBox[randomBox].style.pointerEvents = "none"; // La cellule ne peut plus être sélectionnée
playBoard.style.pointerEvents = "auto"; // Nous permettons au joueur de cliquer à nouveau sur la cellule
playerSign = "X"; // Changement de mouvement vers le joueur
}
}La fonction bot() ajoute du réalisme au jeu, car le bot fait un choix automatiquement, créant l'impression d'un adversaire vivant. Le bot sélectionne une cellule disponible aléatoire, ce qui ajoute un élément de surprise au jeu.
Détermination du gagnant 🏆
Après chaque tour, vous devez vérifier s'il y a un gagnant. Pour cela, on utilise la fonction selectWinner :
function selectWinner(){
if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){
runBot = false; // Arrêter le bot si quelqu'un a gagné
setTimeout(()=>{ // Affichage du résultat après 700 ms
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`;
}else{
if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){
runBot = false; // Arrêter le bot en cas d'égalité
setTimeout(()=>{ // Affichage du résultat après 700 ms
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.textContent = "The match ended in a draw!";
}
}
}La fonction selectWinner() vérifie toutes les combinaisons gagnantes possibles et détermine s'il y a un gagnant. Si toutes les cases sont remplies et que personne n'a gagné, le jeu se termine par un match nul. Cela rend le jeu complet et complète logiquement chaque tour.
Conclusion 🚀
Félicitations ! Vous savez maintenant comment créer un jeu simple de morpion en utilisant HTML, CSS et JavaScript. Nous avons parcouru toutes les étapes pour créer une interface utilisateur agréable, ajouter des styles et créer une logique de jeu. Vous comprenez maintenant comment fonctionnent les interactions entre HTML, CSS et JavaScript, et comment ils peuvent travailler ensemble pour créer une application Web complète.
Vous pouvez utiliser ce projet comme base pour créer des jeux plus complexes ou même étendre les fonctionnalités de ce jeu. Par exemple, ajouter un compteur de victoires, améliorer les graphismes ou rendre le jeu multijoueur. Les possibilités sont infinies, et tout dépend de ton imagination et de ta créativité !
Pour le code source complet et éventuellement des améliorations supplémentaires, consultez notre GitHub.
Si vous avez des questions, n'hésitez pas à les poser. Bonne chance dans la programmation, et que vos projets soient toujours aussi intéressants et passionnants ! 👊🌟