Charivarie avec xmlhttprequest

Télécharger le projet
Commenter

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".
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (Arto_8000)