3 minutes
Tic Tac Toe avec Javascript
Dernière mise à jour: 11 mai, 2022Dans ce jeu, nous allons créer un jeu simple avec HTML, CSS et javascript de base. Ce jeu est entièrement fonctionnel mais il y a encore place à l'amélioration. Commençons!
§Notre html
Le code HTML dont nous avons besoin dans notre projet sera composé de 3 parties principales. Le titre que nous utiliserons pour montrer à qui c'est le tour. La div pour rendre notre plateau de jeu. Un autre titre pour notre modal. Notre modal sera initialement invisible mais nous le rendrons visible là où le jeu est terminé. Dans le modal, nous aurons un bouton pour recharger simplement la page.
Le code complet du fichier "index.html" est ici :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
<h1 class="turn-title"></h1>
<div class="game-wrapper">
<div class="game-box 1"></div>
<div class="game-box 2"></div>
<div class="game-box 3"></div>
<div class="game-box 4"></div>
<div class="game-box 5"></div>
<div class="game-box 6"></div>
<div class="game-box 7"></div>
<div class="game-box 8"></div>
<div class="game-box 9"></div>
</div>
<div class="finished-modal">
<button class="modal-btn">RESTART</button>
<p class="modal-text"></p>
</div>
</body>
</html>
§Nous Devrions Styliser Notre Jeu
Nous allons commencer par les bases. Créez le fichier "style.css". J'aime ajouter le morceau de code suivant dans tous mes projets :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgb(226, 237, 236);
}
Tout ce que nous avons fait était de définir quelques valeurs de base pour notre projet.
Nous pouvons maintenant commencer à styliser notre tableau. Notre tableau sera une grille (grid) 3x3 contenant 9 boites. Au lieu de travailler avec des bordures, j'ai simplement donné à ma grille une valeur d'arrière-plan plus sombre et défini une valeur "grid-gap". Maintenant, nous savons où sont les boîtes. Vous pouvez ajouter cette partie de notre fichier CSS juste en dessous de ce que nous venons d'écrire:
.turn-title {
margin-bottom: 50px;
}
.game-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1vw;
background: rgb(0, 0, 0);
border: none;
}
.game-box {
width: 140px;
height: 140px;
font-size: 8rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(151, 218, 212);
}
J'ai en fait rendu cette partie responsive pour les utilisateurs mobiles mais je l'ai supprimée pour vous créer un petit défi. Vous devriez aller de l'avant et le rendre plus joli. Peut-être même créer une animation mignonne. C'est toujours une bonne idée d'améliorer les projets de tutoriel. Cela rendra un développeur beaucoup plus confiant.
Le reste de notre CSS sera pour notre bouton modal et modal pour rafraîchir la page. Le modal couvrira la page et aura la valeur "display : fixed". Cela le maintiendra au-dessus de tout autre contenu sur notre page. Le contenu à l'intérieur du modal apparaîtra au centre (avec un minimum de CSS). Comme vous pouvez le voir ici, le CSS que j'ai utilisé ici est également très simple :
.finished-modal {
width: 100%;
background: rgba(0, 0, 0, 0.5);
height: 100%;
color: white;
font-size: 2rem;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
visibility: hidden;
}
.modal-btn {
background-color:rgb(100, 170, 166);
padding: 20px;
font-size: 2rem;
border-radius: 15px;
border: none;
color: white;
transition: 0.5s;
}
.modal-btn:hover {
background-color: rgb(9, 169, 156);
cursor: pointer;
}
Ce code peut être ajouté au bas du fichier style.css pour garder un aspect cohérent.
§Javascript Pour La Logique Nécessaire
Notre javascript est la seule partie (quelque peu) compliquée de notre jeu. Tout d'abord, nous avons besoin d'un tableau (array) de valeurs à afficher à l'intérieur des boîtes. Ces valeurs seront ensuite choisies en cliquant dessus pour être remplacées par la marque de l'utilisateur actuel (current). Nous alternerons la valeur "current" entre "X" et "O".
Nous devons faire savoir aux utilisateurs à qui appartient le tour de jouer. Nous allons sélectionner le titre h1 vide et définir le contenu textuel de ce titre.
Pour rendre les valeurs à l'intérieur de la grid (et dans les boites), j'ai choisi d'utiliser un tableau d'une longueur de 9. Il sera initialisé avec 9 "string" vides. Dans notre HTML, vous pouvez voir que dans nos cours, nous avons également numéroté nos boites. De cette façon, lorsque nous cliquons dessus en utilisant les valeurs de cette classe, nous pourrons connaître leur place dans le tableau (array). Cela nous permettra de remplacer la valeur de string vide par la valeur actuelle que nous avons pour l'utilisateur (soit X ou O).
J'ai créé 2 fonctions pour vérifier s'il y a un gagnant après chaque clic sur notre tableau de bord. Pour nos vérifications horizontales et verticales, nous utiliserons une simple boucle for (for loop). J'ai codé en dur (hardcode) la vérification diagonale, mais si vous avez une meilleure façon de créer cette partie, allez-y. Ce sera un bon exercice.
S'il y a un gagnant dans nos fonctions décrites ci-dessus, nous devons bien sûr le gérer. Nous devrions définir un message et afficher ce message en utilisant notre modal. Nous afficherons le modal en changeant la valeur de display du modal en "block" (de "hidden").
J'ai aussi essayé d'expliquer le code dans les commentaires. S'il y a quelque chose que vous avez du mal à comprendre, prenez votre temps et modifiez le code pendant un moment et je suis sûr que vous y comprendrez. Le code complet peut être trouvé ici :
const turn = document.querySelector('.turn-title');
const finishedModal = document.querySelector('.finished-modal');
const modalBtn = document.querySelector('.modal-btn');
const boxes = document.querySelectorAll('.game-box')
const gameArray = ["","","","","","","","",""];
let winner = undefined;
// Nous allons commencer par X
let current = "X";
// Now set the text value of the title to show
// who's turn it is
turn.textContent = `${current}'s Turn`
// Avec cette fonction, je rends les valeurs à
// l'intérieur de mon gameArray à l'intérieur des boîtes
const render = () => {
for(let i = 0; i < 9; i++){
boxes[i].textContent = gameArray[i]
}
}
render();
addEventListener('click', (e) => {
// Si nous cliquons sur le bouton de "Restart"
if(e.target === modalBtn) {
window.location.reload(true);
return
}
// obtenez le numéro de la boîte
const boxNum = parseInt(e.target.classList[1]) - 1;
// Si cette boite n'est pas vide
if(gameArray[boxNum] !== "") return
// Si cette boite est vide
gameArray[boxNum] = current
// Check if there's a winner
horizontalVerticalCheck()
diagonalCheck();
// Si toutes les strings vides sont remplacées dans le tableau
if(gameArray.indexOf("") < 0) gameFinished(winner)
// Placez la marque actuelle
if(current === 'X') current = 'O';
else if(current === 'O') current = 'X';
turn.textContent = `${current}'s Turn`
// Exécutez à nouveau le "render" pour rendre le dernier tableau
render();
});
const diagonalCheck = () => {
if(
gameArray[0] === gameArray[4] &&
gameArray[0] === gameArray[8] &&
gameArray[0] !== ""
){
console.log(current, "gagne")
winner = current;
gameFinished(winner)
return;
}
else if(
gameArray[2] === gameArray[4] &&
gameArray[2] === gameArray[6] &&
gameArray[2] !== ""
) {
console.log(current, "gagne")
winner = current;
gameFinished(winner)
return;
}
}
const horizontalVerticalCheck = () => {
// Vérification des alignements horizontaux et verticaux
for(let i = 0; i < 3; i++){
// vérifiez l'alignement vertical
if(
// example: arr[0] === arr[3] === arr[6]
gameArray[i] === gameArray[i+3] &&
gameArray[i] === gameArray[i+6] &&
gameArray[i] !== ""
){
console.log(current, "gagne")
winner = current;
gameFinished(winner)
return;
}
// vérifiez l'alignement horizontal
else if(
// example: arr[0] === arr[1] === arr[2]
gameArray[3*i] === gameArray[3*i+1] &&
gameArray[3*i] === gameArray[3*i+2] &&
gameArray[3*i] !== ""
) {
console.log(current, "gagne")
winner = current;
gameFinished(winner)
return;
}
}
}
const gameFinished = (winner) => {
let text = undefined;
// S'il n'y a pas de gagnant à la fin du jeu
if(winner === undefined) {
text = "Il n'y a pas de gagnant dans ce tour !"
} else {
text = `Le gagnant est ${winner}, félicitations !`
}
// Si le texte est défini () ci-dessus
if(text !== undefined) {
const modal = document.querySelector('.finished-modal');
const p = document.querySelector('.modal-text');
p.textContent = text;
modal.appendChild(p);
// Affichez le modal
modal.style.visibility = 'visible';
}
}
§Conclusion
Not all games need to be complex, this was an example for creating a simple yet fun game using some basic web development knowledge.
Tous les jeux n'ont pas besoin d'être complexes, c'était un exemple pour créer un jeu simple mais amusant en utilisant des connaissances de base en développement Web.
Ilker AkbiyikTable Des Matières
Articles Similaires
