|
 |
Le but de ce script est de... bah faire un Pendu.
On laisse le choix au visiteur sur le domaine de recherche du mot (ici Histoire, Cinéma, Internet) puis on affiche
des traits ( ) pour matérialiser les lettres à trouver.
Toutes les lettres de l'alphabet sont proposées et un clic sur chacune d'elle lancera une vérification par
rapport au mot caché. Si la lettre existe dans le mot, elle est affichée à sa place, sinon, le pendu
se construit petit à petit. |
 |
|
|
|
 |
Le choix du domaine de recherche dans la liste détermine le domaine dans lequel le
navigateur va aller piocher un mot au hasard (action exécutée lors du clic sur le bouton 'OK').
Suivant le mot sélectionné, on affiche ensuite des tirets représentant chaque lettre du mot (les
espaces sont affichés d'office).
A partir de là, le joueur peut commencer à proposer ses lettres.
Lorsqu'il clique sur une lettre, celle-ci envoie à la fonction sa valeur (a, b...) pour vérification.
- La lettre a-t'elle déjà été proposée ?
si oui, message d'alerte,
si non :
- on change cette lettre bleue en rouge (pour montrer qu'elle a déjà été
proposée),
- on la compare aux lettres du mot caché :
- la lettre existe, on l'affiche (éventuellement plusieures fois) dans le mot
caché,
- la lettre n'existe pas, on note l'erreur et on affiche la pièce du pendu correspondant
au numéro de l'erreur.
Lorsque le nombre de bonnes réponses est égal au nombre de lettre du mot caché, la partie est
gagnée, message d'alerte.
Si le nombre d'erreur atteint le maximum et que le mot n'a pas été trouvé, la partie est perdue,
message d'alerte.
|
|
|
|
|
 |
dans la partie <head>
 |
|
 |
|
<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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
Le jeu du Pendu
