Charivarie avec xmlhttprequest

Soyez le premier à donner votre avis sur cette source.

Vue 11 782 fois - Téléchargée 364 fois

Description

C'est un jeu de charivarie ,un peu modifier. Premièrement il faut placer les 4 mots mélangées dans la grille dans le bon ordre. Le seul indice que vous avez pour trouver les mots est que la 1er lettre du 1e mot est la 1e lettre du 2e mot, la 8e lettre du 1e mot est la 1e du 3e mot et ainsi de suite. Pour aller chercher les mots qui vont parfaitement dans la grille il y a un petit script sur mon site qui fait le travail et vous avez la source dans le zip (index.php et 8.txt). Pour cela j'ai utiliser une méthode nommée xmlhttprequest. Cette méthode permet de demander a voir une page sans utiliser de fenetre pop-up ou de frame caché. Malheureusement seulement deux navigateurs supportent cette méthode soit Firefox et Internet Explorer, mais ces navigateurs sont les plus utiliser. Pour plus de détail sur le jeu vous irez voir le fichier aide.html (Je l'ai pas fait pour rien).

Source / Exemple :


Index.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>Jeu de Mot</TITLE>
    <SCRIPT language="javascript" type="text/javascript">
    window.onerror = null;
    /*
    Jeu créer par Arto_8000
    Pour de l'aide regarde la page d'aide

  • /
var request = new Array(); var Mots = new Array(); var numOpen = 0; var answerGive = false; var isLoading = true; var isEnd = false; function HTTPRequest() // Function pour créer l'objet xmlhttprequest // { var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlhttp = false; } } if (!xmlhttp && typeof XMLHttpRequest != "undefined") { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function askWord() // Demande pour des mots au serveur, si vous utiliser votre propre serveur changer l'adresse // { request[0] = HTTPRequest(); request[0].open("GET","http://olivierscripts.worldfreeweb.com/Mot/index.php",true); request[0].onreadystatechange = receiveWord; request[0].send(null); } function receiveWord() // Recois et analyse les mots reçu // { if (request[0].readyState == 4) { receiveData = request[0].responseText; } else { return false; } receiveData = receiveData.substr(receiveData.indexOf("<[INCOMING DATA]>")+17,38); // Enlève la publicité qui a pu être ajouter et qui est indésirable // Mots = receiveData.split("\r\n"); if (Mots[0].length != 8 || Mots[1].length != 8 || Mots[2].length != 8 || Mots[3].length != 8) // Si une erreur est survenue lorsque les mots sont arriver il refait une demande pour des mots // { //askWord(); return false; } init(); // Initialise les mots // } function change(id) // Edite un case du tableau // { if (numOpen < 1) { document.getElementById(id).innerHTML = "<INPUT type='text' value='' size='1' onblur='this.focus()' onkeyup='valid(\""+id+"\")' id='answer' maxlength='1'>"; document.getElementById("answer").focus(); numOpen++; } } function valid(id) // Valide une case du tableau // { try { ans = answer.value; } catch(e) { ans = document.getElementById("answer").value; } document.getElementById(id).innerHTML = ans; numOpen--; check(); } function check() // Vérifie si l'utilisateur a réuissie // { isGood = true; for (i=0;i<8;i++) { if (document.getElementById("0,"+i).innerHTML != Mots[0].charAt(i) || document.getElementById(i+",0").innerHTML != Mots[1].charAt(i) || document.getElementById(i+",7").innerHTML != Mots[2].charAt(i) || document.getElementById("7,"+i).innerHTML != Mots[3].charAt(i)) { isGood = false; } } if (isGood && !answerGive && !isEnd) { alert("Vous avez réussi !"); isEnd = true; document.getElementById("ansmsg").innerHTML = "Jouez de nouveau"; document.getElementById("ansmsg").href = "javascript:recommencer()"; } } function init() // Initialise les mots et affiche les mots melangés // { document.getElementById("def").innerHTML = ""; for (y=0;y<4;y++) { tempMot = melangerMot(Mots[y]); document.getElementById("def").innerHTML += (y+1)+". "+tempMot+"<BR>"; } isLoading = false; } function melangerMot(mot) // Fonction pour mélange les lettres du mot // { mot = mot.split(""); for (i=0;i<8;i++) { for (x=0;x<8;x++) { if (Math.random() < Math.random()) { temp = mot[i]; mot[i] = mot[x]; mot[x] = temp; } } } Fmot = ""; for (i=0;i<8;i++) { Fmot += mot[i]; } return Fmot; } function giveAnswer() // Demande si l'utilisateur veut abandonner et si oui il affiche les réponses // { if (!(answerGive || !HTTPRequest() || isLoading)) { MsgConfirm = confirm("Êtes-vous sur de vouloir voir les réponses et d'abandonner la partie ?"); if (MsgConfirm) { document.getElementById("def").innerHTML = ""; for (i=0;i<4;i++) { document.getElementById("def").innerHTML += (i+1)+". "+Mots[i]; if (i<3) { document.getElementById("def").innerHTML += "<BR>"; } } answerGive = true; document.getElementById("ansmsg").innerHTML = "Recommencer"; document.getElementById("ansmsg").href = "javascript:recommencer()"; } } } function recommencer() // Recommence une nouvelle partie // { for (i=0;i<8;i++) // Efface le tableau // { for (x=0;x<8;x++) { if (document.getElementById(i+","+x)) { document.getElementById(i+","+x).innerHTML = ""; } } } request = new Array(); // Remet les valeurs a zéro // Mots = new Array(); numOpen = 0; answerGive = false; isLoading = true; isEnd = false; document.getElementById("def").innerHTML = "Chargement Des Mots Veuiller Patienter ..."; document.getElementById("ansmsg").innerHTML = "Donner les réponses"; document.getElementById("ansmsg").href = "javascript:giveAnswer()"; askWord(); // Redemande pour des mots // } function verefC() { if (!HTTPRequest()) // Vérifie si le navigateur supporte le script // { document.getElementById("def").innerHTML = "Votre navigateur ne peut supporter le présent script assurez-vous<BR>qu'il supporte les requêtes xmlhttprequest. Dans le cas de Internet<BR>Explorer, assurez-vous d'accepter d'éxecuter les ActiveXObject."; } } </SCRIPT> <STYLE type="text/css"> a:link { color:#000000; text-decoration:none; background-color : #FFFFFF; } a:visited { color:#000000; text-decoration:none; background-color : #FFFFFF; } a:active { color:#000000; text-decoration:none; background-color : #FFFFFF; } a:hover { color:#000000; text-decoration:overline underline; background-color : #FFFFFF; } .lettre { border-width:thin; background-color:#330099; color:#FFFFFF; width:30px; height:30px; text-align:center; } .vide { border-width:0; } .answer { font-size:17px; } </STYLE> </HEAD> <BODY onload="askWord();verefC()"> <BLOCKQUOTE> <BR> <SCRIPT language="javascript" type="text/javascript"> code = "<TABLE>"; // Crée le tableau de 8X8 pour le jeu // for (i=0;i<8;i++) { code += "<TR>"; for (x=0;x<8;x++) { className = (x==0 || i==0 || x==7 || i == 7) ? "lettre" : "vide " ; att = (x==0 || i==0 || x==7 || i == 7) ? " onclick='change(this.id)' id='"+i+","+x+"'" : "" ; code += "<TD class='"+className+"'"+att+"><\/TD>"; } code += "<\/TR>"; } code += "<\/TABLE>"; document.write(code); </SCRIPT> <BR><BR> <DIV id="def" class="answer">Chargement Des Mots Veuiller Patienter ...</DIV> <BR> <A href="javascript:giveAnswer()" id="ansmsg">Donner les réponses</A> | <A href="aide.html" target="blank">Aide ?</A> <BR><BR> <P><!-- Mon script est valide au niveau du HTML et CSS --> <A href="http://validator.w3.org/check?uri=referer"><IMG src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></A> <A href="http://jigsaw.w3.org/css-validator/"><IMG src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" border="0"></A> </P> </BLOCKQUOTE> <DIV style="position:absolute;left:20px;top:40px"><B>1 ></B></DIV> <DIV style="position:absolute;left:55px;top:10px"><B>2 v</B></DIV> <DIV style="position:absolute;left:300px;top:10px"><B>v 3</B></DIV> <DIV style="position:absolute;left:20px;top:265px"><B>4 ></B></DIV> </BODY> </HTML> Aide.html : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>Aide ?</TITLE> <SCRIPT language="javascript" type="text/javascript"> try { window.toolbar.visible = false; } catch(e) { try { window.locationbar.visible = false; } catch(e) { try { window.personalbar.visible = false; } catch(e) { // Rien // } } } window.resizeTo(400,screen.height); window.moveTo(0,0); function resizeOpener() { window.opener.resizeTo(screen.width,screen.height); window.opener.moveTo(0,0); } window.opener.resizeTo(screen.width-400,screen.height); window.opener.moveTo(400,0); window.onunload = resizeOpener; </SCRIPT> <STYLE type="text/css"> p.titre { color:#111111; font-size:20px; } p.text { margin-left: 10px; } p.bigtitre { text-align:center; font-size:25px; } p.center { text-align:center; } </STYLE> </HEAD> <BODY> <P class="bigtitre"> Aide </P> <P class="titre"> Compatilibilité : </P> <P class="text"> Ce script est compatible avec Internet Explorer et Firefox, ainsi que tout les navigateurs qui supporte les requêtes xmlhttprequest. </P> <P class="titre"> Comment Jouer : </P> <P class="text"> Vous devez d'abord attendre que les mots soient chargé. Regardez les mots qui se trouve en-dessous de la grille. Vous devez replacer les lettres des mots et les placer dans la grille. Pour mettre les lettres dans la grille vous devez cliquer sur la case et entrer la lettre voulu. Si vous avez cliquer par erreur sur la case, retapez la lettre qui ci trouvait ou appuyez sur ESC. Lorsque vous aurez placé les mots dans le bon ordre dans la grille un message apparaitra vous disant que vous avez réussi. </P> <P class="titre"> FAQ : </P> <P class="text"> <B>Q</B> : Le message <I>Chargement Des Mots Veuiller Patienter ...</I> reste toujours et les mots ne se charge jamais.<BR><BR> <B>R</B> : Votre navigateur ne supporte probablement pas les requêtes xmlhttprequest ou le script ne peut rejoindre le serveur.<BR><BR> <B>Q</B> : J'ai les bonnes réponses dans la grille, mais il ne m'affiche pas le message disant que j'ai réussi.<BR><BR> <B>R</B> : Si vous avez demander de voir les réponses ou que le message est déjà apparu, il ne vous affichera pas le message disant que vous avez réussi. </P> <BR> <P class="center"> <A href="javascript:window.close()">Fermer</A> </P> <P> <A href="http://validator.w3.org/check?uri=referer"><IMG src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88" border="0"></A> <A href="http://jigsaw.w3.org/css-validator/"><IMG src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" border="0"></A> </P> </BODY> </HTML>

Conclusion :


Mon script est valide selon les normes W3C pour le HTML et CSS, alors il ne devrait pas y avoir de problème pour ça. Aussi n'hésiter pas à ajouter des commentaires, questions ou ... insultes.

[IMPORTANT]

Étant donné que le serveur où je hostais le script m'a supprimé mon compte (ce qui allait arriver un jour où l'autre, car je l'utilisait pour autre chose que pour un site), il faut vous même héberger le script index.php, de préférence en local. Pour cela modifier la ligne 48 pour "http://localhost/[votredossier]/index.php". Pour tester ouvrez la page "http://localhost/[votredossier]/index.html".

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
1er - Assure-toi que le script index.php roule sur un serveur Apache local.
2e - Ensuite modifie la ligne 50 avec "http://localhost/[dossier ou il est]/index.php"
3e - Ouvre ton le ficher index.html via ton localhost (http://localhost/[dossier ou il est]/index.html)

Quand j'ai fait le script j'ai testé en local et cela devrait marcher.
Messages postés
14
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
28 mai 2006

Je viens de retélécharger le .zip avec les 4 fichiers ci-haut

aide.html
8.txt
index.php
index.html

Le problème persiste avec ce message, sans avoir de mots pour joué
Chargement Des Mots Veuiller Patienter ...
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
C'est fort possible là où je hoster le script pour les mots m'ont deleter mon account parce qu'il servait de rammassie de script de test. Maintenant pour tester il faut hoster nous même le script. Je crois que le script pour généré les mots est dans le zip sinon je le rajoute.
Messages postés
14
Date d'inscription
mercredi 17 novembre 2004
Statut
Membre
Dernière intervention
28 mai 2006

Les mots ne semble pas vouloir ce charger sur IE
Messages postés
102
Date d'inscription
mardi 15 mars 2005
Statut
Membre
Dernière intervention
9 juin 2006

bon script..
ca marche bien sur IE , sauf p-e pour FF et opera

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.