Jeu simple et efficace de tic-tac-toe se jouant sur un même ordinateur

Soyez le premier à donner votre avis sur cette source.

Vue 17 965 fois - Téléchargée 1 837 fois

Description

Je dépose ici la source d'un petit défi qui a été bien mené à terme. Il s'agit d'un jeu de Tic-Tac-Toe. Ce jeu, certe très simple, peut toujours occuper quelques minutes de notre temps! Vous trouverez probablement ailleur des versions graphiquement plus jolies, mais je crois qu'en échange d'une interface moyenne, cela présente un code vraiment facile à comprendre et à réutiliser. J'ai commenté chaque bloc de code pour mieu guider ceux parmi vous qui voudront y jeter un oeil.

Source / Exemple :


// Nous utiliserons deux images, une pour le 'x' et l'autre pour le 'o'
var xImg = "x.jpg", oImg = "o.jpg";

// Initialement, c'est le joueur 1 qui commence
var joueur1 = true;

// La fin n'arrive pas au début!:P
var fin = false;

/*
 Fonction appelée à chaque fois qu'on clique sur une case.
 Elle permet de gérer les signes et le déroulement de la partie.

  • /
function placerSigne(element) { alert(nomFichier(element.src)); // Pour commencer, vérifions si la case où on veut mettre un signe est bel et bien vide if (nomFichier(element.src) == "vide.jpg" && fin == false) { element.src = joueur1 ? "img/"+xImg : "img/"+oImg; // Est-ce que joueur 1 gagne ? if (gagne(xImg)) { statutPartie.innerHTML = "Joueur 1 vous avez gagné!"; fin = true; gEBI("bRecommencer").style.display = ""; } else { // Est-ce que joueur 2 gagne ? if (gagne(oImg)) { statutPartie.innerHTML = "Joueur 2 vous avez gagné!"; fin = true; document.gEBI("bRecommencer").style.display = ""; } else { // Le jeu est-il complet ? (partie nulle en sachant le reste) if (jeuComplet()) { statutPartie.innerHTML = "Partie nulle..."; fin = true; gEBI("bRecommencer").style.display = ""; } // Sinon, la partie continue normalement else { joueur1 = !joueur1; statutPartie.innerHTML = joueur1 ? "Joueur 1" : "Joueur 2"; statutPartie.innerHTML += " c'est votre tour..."; } } } } gEBI("bRecommencer").style.display = ""; } /* Fonction pour vérifier si le jeu est complet. Elle consiste à s'assurer qu'il n'y a aucune case vide.
  • /
function jeuComplet() { rempli = true; i=0; while (i<=2 && rempli) { j=0; while (j<=2 && rempli) { boxSrc = nomFichier(gEBI("box"+i+"_"+j).src); if (boxSrc != xImg && boxSrc != oImg) rempli = false; else j++; } i++; } return rempli; } /* Fonction qui vérifie si un joueur gagne. Il gagne si l'ensemble de ses signes forment au moins une ligne ou une diagonale
  • /
function gagne(nomImage) { return ligneH(nomImage) || ligneV(nomImage) || diag1(nomImage) || diag2(nomImage) ? true : false; } /* Fonction qui vérifie la présence d'au moins une ligne horizontale pleine
  • /
function ligneH(nomImage) { ligne = false; i=0; while (i <= 2 && !ligne) { ligne = true; j=0; while (j <= 2 && ligne) { boxSrc = nomFichier(gEBI("box"+i+"_"+j).src); if (boxSrc != nomImage) ligne = false; else j++; } i++ } return ligne; } /* Fonction qui vérifie la présence d'au moins une ligne verticale pleine
  • /
function ligneV(nomImage) { ligne = false; i=0; while (i <= 2 && !ligne) { ligne = true; j=0; while (j <= 2 && ligne) { boxSrc = nomFichier(document.gEBI("box"+j+"_"+i).src); if (boxSrc != nomImage) ligne = false; else j++; } i++; } return ligne; } /* Fonction qui vérifie si la diagonale '/' est pleine.
  • /
function diag1(nomImage) { diag = true; i=0; j=0; while (i <= 2 && diag) { boxSrc = nomFichier(gEBI("box"+i+"_"+j).src); if (boxSrc != nomImage) diag = false; else { i++; j++; } } return diag; } /* Fonction qui vérifie si la diagonale '\' est pleine.
  • /
function diag2(nomImage) { diag = true; i=2; j=0; while (i >= 0 && diag) { boxSrc = nomFichier(gEBI("box"+i+"_"+j).src); if (boxSrc != nomImage) diag = false; else { i--; j++; } } return diag; } /* Fonction qui met fin à la partie. On vide toutes les cases et on met le tour à joueur 1.
  • /
function finPartie() { for (i=0; i<=2; i++) for (j=0; j<=2; j++) gEBI("box"+i+"_"+j).src = "img/vide.jpg"; joueur1 = true; statutPartie.innerHTML = "Joueur 1 c'est à votre tour..."; fin = false; gEBI("bRecommencer").style.display = "none"; } /* Si on se sert de noms de fichiers, il faut s'armer d'une fonction qui nous permettra de récupérer seulement le nom de l'image, et non le chemin au complet.
  • /
function nomFichier(chemin) { return chemin.substring(chemin.lastIndexOf('/')+1, chemin.length); } /* Tout simplement pour éviter d'avoir à rédiger le long "document.getElementById(id)" partout
  • /
function gEBI(id) { return document.getElementById(id); }

Conclusion :


S'il y a des bugs avec d'autres navigateurs qu'Internet Explorer, je m'en excuse d'avance. Ce code a été fait avant tout pour ce navigateur, étant donné qu'une majorité de gens y a accès au départ.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
44
Date d'inscription
lundi 5 juillet 2004
Statut
Membre
Dernière intervention
29 février 2008

Salut Arto_8000, merci pour tes remarques. J'avais pris l'habitude de ne plus utiliser le document.getElementById(id) pour accèder aux éléments, ayant déjà vu qu'il réussissait à les trouver quand-même. Toutefois, je les ai rajouter dans mon code pour être certain qu'il respecte cette norme. Pour ce qui est des retours de fonction du genre "return ligne ? true : false;", je n'y avait tout simplement pas porté attention! Là il ne devrait plus rester de code inutile. Si tu as d'autres suggestions, ne te gênes pas ;)
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
7
Pour accèder à tes éléments dans ta page HTML, il est fortement recommandé (si ce n'est pas obligatoire) d'utiliser document.getElementById(id) aulieu d'utiliser directement le id de ton élément comme tu fais dans ton script.

Aussi pour ta fonction nomFichier, ça serait mieux que tu utilises la fonction String.lastIndexOf(chaine,position) et un substring pour aller extraire ton nom de fichier.

"return ligne ? true : false;"

Utiliser ce genre de synthaxe c'est parfois utile, mais faut pas abuser ... "return ligne;" aurait suffit.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.