JeuWeb - Crée ton jeu par navigateur
[Résolu][Javascript] Comment faire un décompte du temps de construction ? - 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 : [Résolu][Javascript] Comment faire un décompte du temps de construction ? (/showthread.php?tid=5947)

Pages : 1 2 3


[Résolu][Javascript] Comment faire un décompte du temps de construction ? - InboX - 31-01-2012

Bonjour,

J'ai un problème avec le code suivant écrit en JavaScript
il me permet d'avoir un chrono pour mon site de jeu pour mes constructions et autres.


function reste(zetime, nom_id, redirecfin) {
if (zetime>0)
{
var jours = Math.floor(zetime / 86400);
var temp = zetime- jours*86400;
var heures = Math.floor(temp / 3600);
var minutes = Math.floor( ( (temp / 3600) - Math.floor(temp / 3600) ) * 60);
var secondes = temp - ((Math.floor(temp / 60)) * 60);
var message = "";

if(jours>=1)
message+= jours + "J ";
if(heures>=1)
message+= heures + "H ";
if(minutes>=1 )
message += minutes + "m ";
if(secondes>=1 )
message += secondes + "s";

document.getElementById(nom_id).innerHTML = message;
var restant = zetime - 1;
setTimeout("reste(" + restant + ",'" + nom_id + "','" + redirecfin + "')", 1000);
}else{
document.getElementById(nom_id).innerHTML = "Terminé<br>"+"<a href="+ redirecfin +">Continuer</a>";
}
}

J'affiche le tout comme ceci


$Mess .= '
<center>
<table width="640">
<tr>
<th width="150" class="tableau01">Fin du Chrono:</th>
</tr>
<tr>
<th class="tableau02"><span id="Donjon_et_Raid">5m 0s</span><script language="JavaScript">reste('.$donnees["time_donjon"].', "Donjon_et_Raid", "general.php?Page=Miliciens");</script><br></th>
</tr>
</table></center><br>';

Je met en place le Timer
$donnees["time_donjon"] (5 Minutes) qui vient de ma base de donnée
que j'ai envoyer depuis une requête comme ceci


$time = time()+300;

$QryUpdate = "UPDATE joueur SET ";
$QryUpdate .= "`time_donjon` ='".$time."', ";
$QryUpdate .= "`donjon_recolte` ='0', ";
$QryUpdate .= "`donjon_actif` ='1' ";
$QryUpdate .= "WHERE `login` = '".$login."' ";
mysql_query($QryUpdate);

Le script du Chrono fonctionne très bien seulement quand
je revient sur ma page web ou il y a mon chrono si j'actualise ma
page du site le chrono revient a zéro.

Savez vous comment faire ceci pour que le chrono finisse sont temps avec mon Time de ma base de donnée même si j'actualise ma page svp ?

le problème en faites c'est qui faut mettre a jour le Time() je pense
pour éviter qui revienne a zéro
comme sur le site suivant => http://www.sky8.com/

mais mon compteur se remet a zéro a chaque fois que j'actualise ma page
se qui est normal d’ailleurs vu que je calcul rien pour éviter ceci mais je sait pas comment faire exactement.

Merci
Cordialement,


RE: Problème script php et javascript - extraman - 31-01-2012

Salut,

A quel moment tu vas chercher ta valeur dans la BDD? Je vois pas de select...


RE: Problème script php et javascript - keke - 31-01-2012

Juste une question, dans ta base de donnée, tu compte le temps qui passe ? (5 minutes, 4 minutes, 3 minutes ...) ou tu donne une donnée statique indique l'heure de la récolte (aujourd'hui à 12:12)

Bien que les bases de données soient modifiables facilement, il est toujours (presque) préférable de garder les données statiques. Sauvegarder une date vaut mieux que sauvegarder un compte à rebours.

Pour en revenir à nos moutons, si lors du refresh, ta donnée se trouve bien dans la variable :
$donnees["time_donjon"]
alors ta page devrait correctement s'afficher.

Bilan, vérifie que $donnees["time_donjon"] récupère bien les bonnes valeurs, même après un refresh de tes données.

kéké


RE: Problème script php et javascript - InboX - 31-01-2012

Salut,

En faite $donnees["time_donjon"] cela donne dans ma base de donnée
une série de chiffre 25759897 le time quoi via time()+300;

et je redonne la même variable dans ma commande JavaScript
$donnees["time_donjon"]

c'est pour cela que le compteur revient a zéro après un refresh
Mon (time_donjon) est un (INT(11)) dans ma base de donnée cela change quelques chose ?

Merci
Cordialement,


RE: Problème script php et javascript - Sephi-Chan - 31-01-2012

Deux choses sur tes demandes d'aide :
  • Donne un argument au BBCode pour afficher du code : code=PHP par exemple. Ça permet d'activer la coloration syntaxique.
  • Réfléchis au nom que tu donnes à ton sujet : "Problème script PHP et Javascript", c'est nul. Ça ne nous donne aucune information sur ce qu'on va trouver (et donne peu d'informations aux moteurs de recherche). Quelque chose comme "Comment faire un décompte du temps de construction ?" est plus pertinent.


Maintenant, pour ton problème en-lui même, ça semble tout à fait normal puisque dans ton décompte, tu affiches un compteur de 5 minutes. Il faudrait plutôt une fonction Javascript du type : remainingTimeUntil.

Voilà ce que je te suggère (tu peux tester en appuyant sur le bouton "Run" en haut à gauche). L'astuce, c'est de génèrer du code HTML tout simple avec des attributs personnalisés et laisse faire Javascript (ici avec jQuery). Ainsi tu garderas un code clair qui ne sera pas pollué par des scripts.

Dans data-finish-at, tu mets l'heure de fin de la production (en respectant ce format). Et dns data-finish-url, tu mets l'URL du lien qui remplacera le compteur.


<div id="buildings">
<div id="building_1" data-finish-at="2012-01-31 13:30:00" data-finish-url="http://url/for/link">
<h3>Caserne</h3>
<span class="displayer">…</span>
</div>
<div id="building_2" data-finish-at="2012-02-02 08:20:00" data-finish-url="http://url/for/link">
<h3>Moulin</h3>
<span class="displayer">…</span>
</div>
</div>

Je ne sais pas sous quelle forme tu stockes tes dates, dis-moi si tu as des problèmes pour produire ce code HTML à partir de ton script PHP.

Ensuite, on utilise Javascript pour transformer tout ça.


// Transforme le nombre de secondes restant en une chaîne.
// Modifie cette fonction pour un affichage plus joli.
window.remainingTimeAsString = function(remainingTimeInSeconds){
console.log("Convert: ", remainingTimeInSeconds);
string = remainingTimeInSeconds + " secondes";
return string;
}


// Met à jour les compteurs de la page.
window.updateBuildingsTimers = function(){
$("#buildings > div").each(function(index, building){
var $building = $(building),
$displayer = $building.find(".displayer"),
finishAt = new Date($building.data("finish-at")),
now = new Date();

// Si le bâtiment n'est pas encore terminé, on actualise l'affichage.
if(now < finishAt){
// On change l'affichage du compteur.
var remainingTimeInSeconds = Math.ceil((finishAt - now) / 1000),
newTimerText = remainingTimeAsString(remainingTimeInSeconds);

$displayer.text(newTimerText);
}
else {
// On remplace le compteur pour mettre un lien à la place.
var url = $building.data("finish-url"),
$link = $('<a />', { href: url, text: "Terminé !" });

$displayer.html($link);
}
});
}


// Toutes les secondes, tu relances la fonction.
window.timer = setInterval(window.updateBuildingsTimers, 1000);

Il faut que ce code soit appelé quand le DOM est chargé, donc soit en mettant tes balises script avant la fermeture de la balise body, soit en embarquant le code dans un callback au chargement.

Dis-moi si tu rencontres des problèmes.


RE: Problème script php et javascript - InboX - 31-01-2012

Ok désolé pour le Tag code,

J'ai fait quelques test avec le script
mais il m'affiche que ca
[Image: 1142679278.png]

j'ai changé la date mais pareil

Cordialement,


RE: Problème script php et javascript - Sephi-Chan - 31-01-2012

Comment veux-tu qu'on t'aide avec si peu d'informations ?
Est-ce que le script est exécuté ?


RE: Problème script php et javascript - InboX - 31-01-2012

Désolé mais j'ai que ceci comme détail rien de plus :/
il m'affiche bien se que je veux Caserne et moulin enfin pour le test
mais aucun lien comme quoi c'est fini a la date que j'ai mis

j'ai mis le code sur ma page directement avant body

voila mais j'ai pas plus de détails j'ai fait les mêmes manip que toi.

Cordialement,


RE: [Javascript] Comment faire un décompte du temps de construction ? - Sephi-Chan - 31-01-2012

Active la coloration du code, bordel ! C'est pas comme si je te l'avais déjà demandé 2 posts plus tôt !

Est-ce que ta console Javascript t'affiche des erreurs ?
Est-ce que tu as bien jQuery ?
Est-ce que ton code PHP génère le même HTML que le mien (puisque comme tu peux le voir, le Javascript nécessite un élément avec l'ID buildings qui contient des balises div (celles avec les attributs data) ?
Est-ce que si tu mets un console.log("Endive") au début de la fonction updateBuildingsTimers, ça s'affiche toutes les secondes dans ta console Javascript ?




RE: [Javascript] Comment faire un décompte du temps de construction ? - niahoo - 31-01-2012

Ah la la tu va nous lui faire avoir un ulcère !