Tic-tac-toe est un jeu populaire qui utilise une grille 3×3. Le but du jeu est d'être le premier joueur à placer trois symboles dans une ligne droite horizontale, verticale ou diagonale.
Vous pouvez créer un jeu de tic-tac-toe qui s'exécute dans un navigateur Web à l'aide de HTML, CSS et JavaScript. Vous pouvez utiliser HTML pour ajouter le contenu contenant la grille 3 × 3 et CSS pour ajouter du style à la conception du jeu.
Vous pouvez ensuite utiliser JavaScript pour les fonctionnalités du jeu. Cela comprend le placement de symboles, le tour de rôle des joueurs et le choix du gagnant.
Comment créer l'interface utilisateur pour le jeu Tic-Tac-Toe
Vous pouvez lire et télécharger le code source complet de ce jeu depuis son Référentiel GitHub.
Le tic-tac-toe est l'un des nombreux jeux que vous pouvez faire lorsque vous apprenez à programmer. C'est bien de pratiquer une nouvelle langue ou un nouvel environnement, comme
le moteur de développement de jeux PICO-8.Pour créer un jeu de tic-tac-toe qui s'exécute dans un navigateur Web, vous devrez ajouter du code HTML pour le contenu de la page. Vous pouvez ensuite styliser cela en utilisant CSS.
- Créez un nouveau fichier appelé "index.html".
- Dans "index.html", ajoutez la structure de base d'un fichier HTML:
html>
<htmllangue="en-US">
<diriger>
<titre>Jeu de tic tac toetitre>
diriger>
<corps>
corps>
html> - Dans la balise HTML body, ajoutez un tableau contenant trois lignes, avec trois cellules dans chaque ligne:
<divclasse="récipient">
<tableau>
<tr>
<tdidentifiant="1">td>
<tdidentifiant="2">td>
<tdidentifiant="3">td>
tr>
<tr>
<tdidentifiant="4">td>
<tdidentifiant="5">td>
<tdidentifiant="6">td>
tr>
<tr>
<tdidentifiant="7">td>
<tdidentifiant="8">td>
<tdidentifiant="9">td>
tr>
tableau>
div> - Dans le même dossier que votre fichier HTML, créez un nouveau fichier appelé "styles.css".
- Dans le fichier CSS, ajoutez du style à votre grille 3 par 3:
tableau {
border-collapse: effondrement;
marge: 0 auto;
}td {
largeur: 100pixels;
hauteur: 100pixels;
aligner le texte: centre;
alignement vertical: milieu;
frontière: 1pixelssolidenoir;
} - Liez le fichier CSS à votre fichier HTML en l'ajoutant à la balise head:
<lienrel="feuille de style"taper="texte/css"href="styles.css">
Comment ajouter à tour de rôle des symboles au plateau de jeu
Dans le jeu, il y aura deux joueurs, chacun avec un symbole "X" ou "O". Vous pouvez ajouter un symbole "X" ou "O" en cliquant sur l'une des cellules de la grille. Cela continuera jusqu'à ce que l'un de vous ait créé une ligne droite horizontale, verticale ou diagonale.
Vous pouvez ajouter cette fonctionnalité à l'aide de JavaScript.
- Dans le même dossier que vos fichiers HTML et CSS, créez un fichier JavaScript nommé "script.js".
- Liez le fichier JavaScript à votre fichier HTML en ajoutant le script au bas de la balise body:
<corps>
Votre code ici
<scénariosrc="script.js">scénario>
corps> - Dans le fichier JavaScript, ajoutez une chaîne pour représenter le symbole du joueur. Cela peut être "X" ou "O". Par défaut, le premier joueur placera un "X":
laisser joueurSymbole = "X"; - Ajoutez une autre variable pour savoir si le jeu est terminé:
laisser gameEnded = FAUX - Chaque cellule du tableau HTML a un ID compris entre 1 et 9. Pour chaque cellule du tableau, ajoutez un écouteur d'événement qui s'exécutera chaque fois qu'un utilisateur cliquera sur la cellule:
pour (laisser je = 1; je <= 9; je++) {
document.getElementById (i.toString()).addEventListener(
"Cliquez sur",
fonction() {
}
);
} - Dans l'écouteur d'événement, modifiez le code HTML interne pour afficher le symbole actuel. Assurez-vous d'utiliser une instruction conditionnelle JavaScript pour s'assurer d'abord que la cellule est vide, et que le jeu n'est pas encore terminé:
si (ce.innerHTML "" && !gameEnded) {
ce.innerHTML = playerSymbol;
} - Ajoutez une classe à l'élément HTML pour styliser le symbole qui s'affichera sur la grille. Le nom des classes CSS sera soit "X" soit "O", selon le symbole:
ce.classList.add (playerSymbol.toLowerCase()); - Dans le fichier "styles.css", ajoutez ces deux nouvelles classes pour les symboles "X" et "O". Les symboles "X" et "O" s'afficheront dans des couleurs différentes:
.X {
couleur: bleu;
taille de police: 80pixels;
}.o {
couleur: rouge;
taille de police: 80pixels;
} - Dans le fichier JavaScript, après avoir changé le innerHTML pour afficher le symbole, permutez le symbole. Par exemple, si le joueur vient de placer un "X", changez le symbole suivant en "O":
si (joueurSymbole "X")
joueurSymbole = "O"
autre
joueurSymbole = "X" - Pour lancer le jeu, ouvrez le fichier "index.html" dans un navigateur web pour afficher la grille 3 par 3 :
- Commencez à placer des symboles sur la grille en cliquant sur les cellules. Le jeu alternera entre les symboles "X" et "O":
Comment déterminer le gagnant
Pour le moment, le jeu continuera même si un joueur a placé trois symboles consécutifs. Vous devrez ajouter une condition de fin pour vérifier cela après chaque tour.
- Dans votre fichier JavaScript, ajoutez une nouvelle variable pour stocker toutes les positions "gagnantes" possibles pour la grille 3 par 3. Par exemple, "[1,2,3]" est la ligne du haut, ou "[1,4,7]" est une ligne diagonale.
laisser winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Ajoutez une nouvelle fonction appelée checkWin():
fonctioncheckWin() {
} - À l'intérieur de la fonction, parcourez chacune des positions gagnantes possibles:
pour (laisser je = 0; i < winPos.longueur; je++) {} - À l'intérieur de la boucle for, vérifiez si toutes les cellules contiennent le symbole du joueur:
si (
document.getElementById (winPos[i][0]).innerHTML playerSymbol &&
document.getElementById (winPos[i][1]).innerHTML playerSymbol &&
document.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Si la condition est vraie, tous les symboles sont alignés. À l'intérieur de l'instruction if, affichez un message à l'utilisateur. Vous pouvez également modifier le style de l'élément HTML en ajoutant une classe CSS appelée "win":
document.getElementById (winPos[i][0]).classList.add("gagner");
document.getElementById (winPos[i][1]).classList.add("gagner");
document.getElementById (winPos[i][2]).classList.add("gagner");
gameEnded = vrai;setTimeout(fonction() {
alerte (playerSymbol + " gagne !");
}, 500); - Ajoutez cette classe CSS "win" au fichier "styles.css". Lorsque le joueur gagne, il changera la couleur de fond des cellules gagnantes en jaune:
.gagner {
Couleur de l'arrière plan: jaune;
} - Appelez la fonction checkWin() chaque fois qu'un joueur a un tour, à l'intérieur du gestionnaire d'événement ajouté dans les étapes précédentes:
pour (laisser je = 1; je <= 9; je++) {
// Chaque fois qu'un joueur clique sur une cellule
document.getElementById (i.toString()).addEventListener(
"Cliquez sur",
fonction() {
si (ce.innerHTML "" && !gameEnded) {
// Affiche soit "X" soit "O" dans la cellule, et stylise-la
ce.innerHTML = playerSymbol;
ce.classList.add (playerSymbol.toLowerCase());
// Vérifie si un joueur a gagné
checkWin();
// Permute le symbole à l'autre pour le prochain tour
si (joueurSymbole "X")
joueurSymbole = "O"
autre
joueurSymbole = "X"
}
}
);
}
Comment réinitialiser le plateau de jeu
Une fois qu'un joueur a gagné la partie, vous pouvez réinitialiser le plateau de jeu. Vous pouvez également réinitialiser le plateau de jeu en cas d'égalité.
- Dans le fichier HTML, après le tableau, ajoutez un bouton de réinitialisation:
<boutonidentifiant="réinitialiser">Réinitialiserbouton> - Ajoutez du style au bouton de réinitialisation:
.récipient {
afficher: fléchir;
flex-direction: colonne;
}#réinitialiser {
marge: 48pixels 40%;
rembourrage: 20pixels;
} - Dans le fichier JavaScript, ajoutez un gestionnaire d'événements qui s'exécutera chaque fois que l'utilisateur cliquera sur le bouton de réinitialisation:
document.getElementById("réinitialiser").addEventListener(
"Cliquez sur",
fonction() {}
); - Pour chaque cellule de la grille, récupérez l'élément HTML à l'aide de la fonction getElementById(). Réinitialisez le innerHTML pour supprimer les symboles "O" et "X", et supprimez tous les autres styles CSS:
pour (laisser je = 1; je <= 9; je++) {
document.getElementById (i.toString()).innerHTML = "";
document.getElementById (i.toString()).classList.remove("X");
document.getElementById (i.toString()).classList.remove("o");
document.getElementById (i.toString()).classList.remove("gagner");
gameEnded = FAUX;
} - Lancez le jeu en ouvrant le fichier "index.html" dans un navigateur Web.
- Commencez à placer les symboles "X" et "O" sur la grille. Essayez de faire gagner l'un des symboles.
- Appuyez sur le bouton de réinitialisation pour réinitialiser le plateau de jeu.
Apprendre JavaScript en créant des jeux
Vous pouvez continuer à améliorer vos compétences en programmation en créant plus de projets en JavaScript. Il est facile de créer des jeux et des outils simples dans un environnement Web, à l'aide de technologies ouvertes multiplateformes telles que JavaScript et HTML.
Il n'y a pas de meilleur moyen d'améliorer votre programmation que de vous entraîner à écrire des programmes !
