C'est reparti pour un tour...
Il y avait longtemps que je n'étais pas venu vous proposer un petit jeu.
Je me suis attaqué cette fois-ci à un jeu de MasterMind.
Celui-ci est en JavaScript et il pourra donc être facilement mis en place. De plus, j'ai veillé à ce qu'il tourne à la fois sous FireFox et sous IE.
A vous de réfléchir pour trouver la combinaison cachée ;-)
Ci-dessous le code commenté. Le principe est simple, identique au jeu connu de tous. Il suffit de cliquer sur les ronds de couleur pour les déposer dans un emplacement libre ou pour les retirer d'un emplacement. Les messages (Bravo !, Perdu :(, etc.) peuvent bien sûr être adaptés à vos besoins... Il peut également être rendu plus sympa en affichant des pictos blanc ou noir selon les pions bien ou mal placés. Le code est déjà en place, il y a juste à le décommenter et commenter l'ancien.
mastermind.htm
<html> <head> <META NAME="AUTHOR" CONTENT="Denis Blomme"> <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE"> <style> input {font-family:Verdana,Arial;font-size:10px;} td {text-align:center;font-family:Verdana,Arial;font-size:10px;} img,a {cursor:pointer;} </style> <script language="javascript"> // Réservation des variables // Table des couleurs (noms des images GIF) var couleurs=new Array("", "bleu", "cyan", "rouge", "vert", "orange", "jaune", "violet", "marron"); var nbcouleurs=couleurs.length-1; // Nombre de couleurs (éléments de la table) var trous=new Array(0,0,0,0,0); // La combinaison du joueur var cherche=new Array(0,0,0,0,0); // La combinaison à trouver var work=new Array(0,0,0,0,0); // Table de travail pour comparer var nbtrous=4; // Nombre de trous var nbcoups=0; // Compteur des coups var nbcoupsmax=8; // Nombre de coups autorisés var verif=1; // Pour savoir s'il a bien vérifié // // Les fonctions // // Tirer «nbtrous» couleurs parmi «nbcouleurs» function combinaison() { // On tire aléatoirement les couleurs for(i=1;i<=nbtrous;i++){ Nball=1+Math.floor(Math.random()*nbcouleurs);cherche[i]=Nball; } for(i=0;i<nbcoupsmax;i++){document.frm ["R"+i].value="";} document.frm.libnb.value="Il vous reste " + (nbcoupsmax-nbcoups) + " coups"; } // L'utilisateur choisit une couleur function choisir(clr) {// Vérifier qu'il a vérifié sa précédente proposition if(verif==0){alert("Vous n'avez pas vérifié la proposition précédente");return true;} trouve=0; // Trouver la 1ère place pour la mettre for(i=1;i<=nbtrous;i++){ if(trous[i]==0){ // On stocke la couleur choisie et on l'affiche trous[i]=clr; document ["L"+nbcoups+""+i].src=couleurs[clr]+".gif"; if(i==nbtrous){verif=0;}// S'il a tout rempli il doit vérifier return true; // Il ne faut pas tous les remplir } } } // Il peut enlever une couleur function enlever(encours,point) { // Mais sur la ligne en cours ! if(encours!=nbcoups){alert("Ligne déjà jouée !");return true;} // On réinitialise à zéro, espace et on remet verif à 1 trous[point]=0;document ["L"+encours+""+point].src="espace.gif";verif=1; } // On affiche la solution function solution() { // On affiche les «nbtrous» jetons sur la dernière ligne for(i=1;i<=nbtrous;i++){ clr=cherche[i];document ["L"+nbcoupsmax+""+i].src=couleurs[clr]+".gif"; } } // On compare sa proposition function comparer() { // Vérifier qu'il a bien rempli tous les trous for(i=1;i<=nbtrous;i++){if(trous[i]==0){alert("Incomplet");return true;}} verif=1; // Indicateur comme quoi il a vérifié // Initialiser la table de travail for(i=1;i<=nbtrous;i++){work[i]=cherche[i];} nbbien=0; // Recherche des "Bien placé" for(i=1;i<=nbtrous;i++){ if(work[i]==trous[i]){nbbien++;work[i]=0;trous[i]=0;} } nbmal=0; // Recherche des "Mal placé" for(i=1;i<=nbtrous;i++){ if(work[i]!=0){// si on l'a déjà traité, ne pas le refaire for(j=1;j<=nbtrous;j++){ if((work[i]==trous[j])&&(trous[j]!=0)){nbmal++;work[i]=0;trous[j]=0;} } }work[i]=0; } // Affichage des «Bien placés» et «Mal placés» // Avec du texte dans un input en readonly document.frm ["R"+nbcoups].value="Bien: "+nbbien+ " / Mal : "+nbmal; // ou avec des images représentant les pions noirs et blancs //document.frm ["B"+nbcoups].src="B"+nbbien+".gif"; //document.frm ["M"+nbcoups].src="M"+nbmal+".gif"; // Incrémenter Nbcoups et réinitialiser la table des trous nbcoups++;for(i=1;i<=nbtrous;i++){trous[i]=0;} document.frm.libnb.value="Il vous reste " + (nbcoupsmax-nbcoups) + " coups"; // A-t-il trouvé la combinaison ? if(nbbien==nbtrous){ solution();alert("Bravo !"); if(confirm("Autre partie ?")==true){location.reload(true);} return true; } // A-t-il dépassé le nombre de coups maximum ? if(nbcoups>=nbcoupsmax){ solution();alert("Perdu :("); if(confirm("Autre partie ?")==true){location.reload(true);} return true; } } </script> </head> <body onLoad="combinaison();"> <table border=1 cellpadding=0 cellspacing=0><form name="frm"> <tr><td colspan=2> <script language="javascript"> for(i=1;i<=nbcouleurs;i++){ // Affichage des nbcouleurs jetons avec un lien pour les choisir document.write("<img title='Choisir' src='"+couleurs[i]+".gif' onclick='choisir("+i+")'>"); } </script> <u><a onclick="comparer()" title="Vérifier">Vérifier</a></u> </td></tr> <tr><td colspan=2> Cliquez sur les couleurs puis sur<br> "Vérifier" pour les comparer.<br> <input type=text size=25 readonly=readonly name="libnb" value=""> </td></tr> <script language="javascript"> for(ligne=0;ligne<=nbcoupsmax;ligne++){ // Créer les lignes où l'utilisateur va jouer document.write("<tr><td>"); // nbtrous à vide appelés "L(ligne)(colonne)" for(i=1;i<=nbtrous;i++){ document.write("<img title='Enlever' onclick='enlever("+ligne+","+i+")'"); document.write(" name='L"+ligne+""+i+"' src='espace.gif' border=0>"); } document.write("</td><td>"); // et la dernière colonne pour la solution (B ou M (ligne)(colonne) puis "Solution") if(ligne!=nbcoupsmax){ // soit un champ text en readonly document.write("<input type=text size=18 readonly=readonly name='R"+ligne+"'><br>"); // soit des images (une pour Bien placé et une pour Mal placé // document.write("<img name='B"+ligne+"' src='vide.gif'><br>") // document.write("<img name='M"+ligne+"' src='vide.gif'></td></tr>"); }else{ document.write("Solution</td></tr>"); } } </script> </form> </table> </body> </html>
A vos claviers... Et creusez-vous bien les méninges...
Forum |
Actu |
Glossaire |
Codes |
Tips |
Liens |
Livres |
Annuaire
