JeuWeb - Crée ton jeu par navigateur
Labyrinthe en javascript - compte à rebours - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Labyrinthe en javascript - compte à rebours (/showthread.php?tid=1635)



Labyrinthe en javascript - compte à rebours - Pandoux - 10-05-2014

Bonjour !

Je viens vous demander de l'aide car nous aimerions mettre un compte à rebours dans notre labyrinthe javascript.

Nous avons déjà trouvé un compte à rebours seulement lorsque l'on arrive sur la dernière case (la case d'arrivée), il ne s'arrête pas. On va avoir l'affichage comme quoi on a gagné et à la fin totale du compte à rebours on va avoir l'affichage qui dit qu'on a perdu.

Voici le code du compte à rebours :

Code :
var compte = 25;
        function decompte()
        {
            if(compte <= 1) {
                pluriel = "";
        }         else {
                pluriel = "s";
        }

        document.getElementById("compt").innerHTML = compte + " seconde" + pluriel;

            if(compte == 0 || compte < 0) {
            compte = 0;
            alert("Perdu! Tu as tué un panda!")
            clearInterval(timer);
            }

        compte--;
        }
        var timer = setInterval('decompte()',1000);

Si vous avez des idées, je suis preneuse ! Smile

Merci beaucoup du coup j'ai réussi à l'intégrer ! Smile


RE: Labyrinthe en javascript - compte à rebours - DrXela - 13-05-2014

Vu que personne n'avance de solution, je vais avancer un truc, mais je sais plus trop si ca marche, j'ai pas retouché mon js pour le moment...

De souvenir, il existe aussi un setTimeout, qui ne marche qu'une fois...
Si j'étais toi, je ferais une fonction récursive

en gros :

var compte = 25;
function decompte()
{
//tout le code du timer
if (compte > 0) setTimeout(decompte(),1000)
}
setTimeout(decompte(),1000)

Si je me trompe pas, le timeout à la fin déclenche la fonction décompte au bout d'une seconde, mais qu'une seule fois. Et c'est la fonction elle-même qui se relance toute les secondes tant que le compte n'est pas de 0. Une fois à zero, plus de timeout donc plus de décompte.

PS : if(compte == 0 || compte < 0) -> tu peux pas faire if(compte <= 0) ?


RE: Labyrinthe en javascript - compte à rebours - Xenos - 13-05-2014

J'avais oublié ce sujet :\
D'abord, j'ajouterais un ; en fin de ligne alert() (sinon, la ligne suivante voire les 2 lignes seront ineffectives), et ensuite, j'inverserais le "alert()" et le "claerTimeout()" (sinon, le compteur risque de continuer à tourner tant que la boite d'alerte n'a pas été fermée):


clearInterval(timer);
alert("Perdu! Tu as tué un panda!");

setTimeout() est une autre possibilité, mais vu la durée de la fonction de rappel, cela ne changera rien sur le principe. En revanche, pour le "if", je rejoins DrXela.


RE: Labyrinthe en javascript - compte à rebours - niahoo - 14-05-2014

le manque de point virgule ne devrait pas être gênant mais il faut très probablement inverser les deux lignes.

Sinon perso j'aime bien avoir une approche évitant les variables externes inutiles autant que possible. sauf si tu veux modifier compte depuis l'extérieur évidemment. Mais en l'occurence ça te permet de lancer plein de décomptes concurrents sans avoir à gérer un tableau de timers ou des trucs comme ça.

Ce que je fais généralement c'est que j'englobe toute ma fonction dans le setTimeout, je trouve la syntaxe plus simple :

function decompte(compte){
setTimeout(function(){

if (compte > 0) {
return decompte(compte-1);
}

alert('Perdu');

},1000);
}

decompte(25);

Note que la dernière ligne permet de lire directement "Lance un décompte de 25 secondes".

Sinon attention aux syntaxes : appeler setTimeout/setInterval avec une string en premier paramètre, c'est moche mais ça marche, par contre DrXela tu ne mets pas les quotes mais tu mets les parenthèses. Du coup je dirais que tu as une boucle infinie, un browser complètement freeze (du moins l'onglet) et une stack qui finit par exploser.


RE: Labyrinthe en javascript - compte à rebours - DrXela - 14-05-2014

C'est du fait que j'ai écris ça à la va-vite, c'est pas complet ^^


RE: Labyrinthe en javascript - compte à rebours - Pandoux - 14-05-2014

J'avais déjà eu une réponse du coup mais elle s'est effacé pour je ne sais quelle raison. Bref du coup j'ai fait comme ci-dessous. J'ai ajouté clearInterval(timer) dans les déplacements. Si le personnage arrive sur la case "f", la case d'arrivée, le compte à rebours s'arrête.

Citation : if(e.keyCode == 40) // BAS
{

if(laby[xperso][yperso+1]==1){
yperso=yperso+1;
afficherperso (xperso,yperso);
}
else if(laby[xperso][yperso+1]=='f'){
yperso=yperso+1;
afficherperso (xperso,yperso);
alert("Tu as sauvé un Panda!");
clearInterval(timer);
}

}

if(e.keyCode == 38) //Haut
{

if(laby[xperso][yperso-1]==1){
yperso=yperso-1;
afficherperso (xperso,yperso);
}
else if(laby[xperso][yperso-1]=='f'){
yperso=yperso-1;
afficherperso (xperso,yperso);
alert("Tu as sauvé un Panda!");
clearInterval(timer);
}

}

if(e.keyCode == 37) //Gauche
{

if(laby[xperso-1][yperso]==1){
xperso=xperso-1;
afficherperso (xperso,yperso);
}
else if(laby[xperso-1][yperso]=='f'){
xperso=xperso-1;
afficherperso (xperso,yperso);
alert("Tu as sauvé un Panda!");
clearInterval(timer);
}


}

if(e.keyCode == 39) // Droite
{

if(laby[xperso+1][yperso]==1){
xperso=xperso+1;
afficherperso (xperso,yperso);

}
else if(laby[xperso+1][yperso]=='f'){
xperso=xperso+1;
afficherperso (xperso,yperso);
alert("Tu as sauvé un Panda!");
clearInterval(timer);
}

}
});


var compte = 15;
function decompte()
{
if(compte <= 1) {
pluriel = "";
} else {
pluriel = "s";
}

document.getElementById("compt").innerHTML = compte + " seconde" + pluriel;

if(compte == 0 || compte < 0) {
compte = 0;
alert("Perdu! Tu as tué un panda!")
clearInterval(timer);
}

compte--;
}
var timer = setInterval('decompte()',1000);



RE: Labyrinthe en javascript - compte à rebours - niahoo - 14-05-2014

C'est pas très lisible ...


RE: Labyrinthe en javascript - compte à rebours - Pandoux - 14-05-2014

Malheureusement je peux pas faire plus lisible sur le forum à moins que je puisse mais dans ce cas là je sais pas comment faire


RE: Labyrinthe en javascript - compte à rebours - Xenos - 14-05-2014

Entre crochets (choisi celui qui correspond au langage à afficher):
• code="javascript"
• code="html"
• code="php"
• code="mysql"

Et y'en a surement d'autres, mais ils ne te serviront pas :p