Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120057 Le jeu du pendu | | Voici comme créer le jeu du pendu sur votre site On laisse le choix au visiteur sur le domaine de recherche du mot (ici Histoire, Cinéma, Internet) Dans la partie < head > - Code:
-
<script language="JavaScript"> // Détection du navigateur ns4 = (document.layers)? true:false; ie4 = (document.all)? true:false;
// Création des variables /* domaine : prendra la valeur du domaine sélectionné; selection : domaine sélectionné; hist, cine, web : domaines de recherche (peuvent être changés, augmentés...); mot : recevra le mot choisi; mot_img : la suite d'images (_) representant le mot; deja : passe à "oui" si la lettre a déjà été proposée; deja_prop : liste des lettres déjà proposées; trouve : nombre de lettres trouvées; ok : marque si la lettre proposée est bonne; fautes : compte le nombre de fautes; url : sert au rechargement de la page; chemin : chemin d'accès aux images; ext : fin du nom des images */ var domaine = new Array(); var selection; var hist = new Array('vercingetorix','napoleon','charlemagne','charles de gaulle','francois miterrand'); var cine = new Array('terminator','shrek','nikita','titanic','le grand bleu','final fantasy','la grande evasion'); var web = new Array('provider','modem','adsl','connexion','transfert','adresse ip','serveur de nom','nom de domaine');
var mot = ""; var mot_img = "<center>";
var deja = "non"; var deja_prop = new Array(1);
var trouve = 1; var ok = 0; var fautes = 0;
chemin = "images/pend_"; ext = ".gif";
var url = "http://www.biblioscript.com/javascript/demo/jeux_pendu.html";
// Affectation du domaine choisi pour la sélection du mot à trouver function select_domaine() { selection = document.formulaire.domaine.options[document.formulaire.domaine. selectedIndex].value;
// Créer autant de lignes comme ci-dessous que de domaines if ( selection == "hist" ) { domaine = hist; } if ( selection == "cine" ) { domaine = cine; } if ( selection == "web" ) { domaine = web; } }
// Sélection alléatoire du mot dans le domaine et préparation de l'affichage des images (_) function select_mot() {
// Si le mot a déjà été choisi, rien ne se passe if (mot) { }
// Sinon... else { var possibilites = domaine.length; var nombre_alleatoire = Math.random(); var index = Math.round( ( possibilites - 1 ) * nombre_alleatoire ) + 1;
// Sélection d'un mot dans le domaine mot = domaine[index];
// Si jamais le mot n'a pas été correctement affecté, on relance le choix if (!mot) { select_mot(); }
// Sinon... else { alert('J\'ai choisi un mot, commencez a chercher...');
// Pour chaque lettre du mot for ( i = 0; i < mot.length; i++ ) {
// Si on rencontre un espace (" ") on affiche un espace if ( mot.substr(i,1) == " " ) { mot_img += "<img src='images/pend_px.gif' name='sol_" + i + "' width='15' height='18'>";
// On marque l'espace comme déjà trouvé trouve++; }
// Sinon on place un tiret (_) else { mot_img += "<img src='images/pend_off.gif' name='sol_" + i + "'>"; } }
// Lancement de l'affichage des images affiche_mot_cache(); } } }
// Affichage des images du mot caché (_) function affiche_mot_cache() {
// Instructions pour Netscape if (ns4) { eval("interne = (document.lieu.document.lieulieu)"); with (interne) { document.open();
// Ecriture des images document.write(mot_img); document.close(); } }
// Instructions pour Internet Explorer if (ie4) { eval('document.all.lieu.innerHTML = "' + mot_img + '"'); } }
// Changement des lettres bleues en rouge et enregistrement de la lettre proposée function chg_lettre(lettre) { eval("document.l" + lettre).src = chemin + lettre + "_off" + ext; deja_prop[deja_prop.length] = lettre; }
// Contrôle de la lettre proposée (bon déroulement du jeu) function propose(lettre) {
// Si le mot a été choisi if (mot) { deja = "non";
// Test si la lettre a déjà été proposée for ( i = 0; i < deja_prop.length; i++ ) { if ( lettre == deja_prop[i] ) { alert('Vous avez deja propose cette lettre !'); deja = "oui"; } }
// Sinon modification de la lettre et lancement du test par rapport au mot caché if ( deja == "non" ) { chg_lettre(lettre); verif_lettre(lettre); } }
// Si le mot n'a pas encore été choisi else { alert('Selectionnez un domaine, puis cliquez sur le bouton \'OK\' avant de commencer a proposer des lettres.') } }
// Vérification de la lettre par rapport au mot caché function verif_lettre(lettre) { ok = 0;
// Par rapport à chaque lettre du mot for ( i = 0; i < mot.length; i++ ) {
// Si la lettre proposée existe dans le mot if ( lettre == mot.substr(i,1) ) {
// Instructions pour Netscape if (ns4) {
// Affichage de la lettre au bon emplacement eval("document.lieu.document.lieulieu.document.sol_" + i).src = chemin + lettre + ext; ok = 1; }
// Instructions pour Internet Explorer if (ie4) { eval("sol_" + i).src = chemin + lettre + ext; ok = 1; }
// Ecrasement de la lettre dans le mot caché mot = mot.replace(i,"_");
// Marquage de la (des) nouvelle(s) lettre(s) trouvée(s) trouve++; } }
// Si toutes les lettres ont été trouvées (gagné) if ( trouve == mot.length + 1 ) { alert('Bravo, vous avez trouve avant d\'etre pendu !!\nPour rejouer, cliquez sur le bouton \'Rejouer\''); }
// Si la lettre proposée n'existe pas dans le mot, affichage du pendu if ( ok == 0 ) { eval("document.p" + fautes).src = chemin + fautes + ext; fautes++; }
// Si le pendu est complet (perdu) if ( fautes == 11 ) { alert('Perdu !\nLe mot a trouver etait : ' + mot + '\nPour rejouer, cliquez sur le bouton \'Rejouer\''); } } </script> Dans la partie < body > - Code:
-
<table border="1" cellspacing="0" cellpadding="0"> <tr> <td align="center" width="280"> <img src="images/pend_titre.gif"> <form name="formulaire"> <!-- Affectation du domaine choisi --> Domaine : <select name="domaine" OnChange="select_domaine();"> <option value="">Choisissez un domaine
<!-- Attention à donner des 'value' correspondant aux nom des domaines du script --> <option value="hist">Histoire <option value="cine">Cinema <option value="web">Internet</select>
<!-- Sélection du mot dans le domaine choisi --> <input type="button" value="OK" OnClick="select_mot();"> </form> <table border="0" cellspacing="0" cellpadding="0"> <tr>
<!-- Les lettres cliquables lance la vérification, attention à respecter les 'name' --> <td><a href="javascript:propose('a');"><img src="images/pend_a.gif" border="0" name="la"></a></td> <td><a href="javascript:propose('b');"><img src="images/pend_b.gif" border="0" name="lb"></a></td> ... </tr> <tr> <td><a href="javascript:propose('n');"><img src="images/pend_n.gif" border="0" name="ln"></a></td> <td><a href="javascript:propose('o');"><img src="images/pend_o.gif" border="0" name="lo"></a></td> ... </tr> </table>
<!-- Création des calques recevant les images représentant le mot caché --> <script language="JavaScript"> if (ns4) { document.write('<ilayer id="lieu">'); document.write('<div id="lieulieu" style="position: absolute;">'); } if (ie4) { document.write('<div id="lieu">'); } </script>
<!-- Création d'une image transparente pour dimensionner le calque (nécessaire pour Netscape) --> <script language="JavaScript"> document.write('<img src="images/pend_px.gif" width="280" height="18"><br>'); </script>
<!-- Fermeture du calque --> <script language="JavaScript"> if (ns4) { document.write('</div></ilayer>'); } if (ie4) { document.write('</div>'); } </script>
<!-- Fonction de rechargement de la page pour rejouer --> <form><input type="button" value="Rejouer" OnClick="javascript:location.href=url;"></form> </td>
<td>
<!-- Tableau présentant le futur pendu, attention au nom des images --> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/pend_px.gif" width="30" height="1"></td> <td rowspan="2"><img src="images/pend_px.gif" name="p1" width="11" height="289"></td> <td colspan="2"><img src="images/pend_px.gif" name="p2" width="137" height="13"></td> </tr> <tr valign="top"> <td><img src="images/pend_px.gif" width="1" height="276"></td> <td><img src="images/pend_px.gif" name="p3" width="46" height="46"></td> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td></td> <td><img src="images/pend_px.gif" name="p4" width="3" height="47"></td> <td></td> </tr> <tr align="center"> <td></td> <td><img src="images/pend_px.gif" name="p5" width="23" height="31"></td> <td></td> </tr> <tr align="center" valign="top"> <td><img src="images/pend_px.gif" width="1" height="10"><br><img src="images/pend_px.gif" name="p7" width="39" height="7"></td> <td><img src="images/pend_px.gif" name="p6" width="35" height="75"></td> <td><img src="images/pend_px.gif" width="1" height="10"><br><img src="images/pend_px.gif" name="p8" width="39" height="7"></td> </tr> <tr align="center"> <td></td> <td><img src="images/pend_px.gif" name="p9" width="7" height="76"><img src="images/pend_px.gif" width="10" height="1"><img src="images/pend_px.gif" name="p10" width="7" height="76"></td> <td></td> </tr> </table> </td> </tr> <tr> <td colspan="4"><img src="images/pend_px.gif" name="p0" width="202" height="11"></td> </tr> </table> </td> </tr> </table>
Voici le rendu, quand on perd [Vous devez être inscrit et connecté pour voir cette image] |
| |