Kommunauty
Connexion
Inscription

Voire la flotte en mouvement avec une barre de progression


Sc0rpio Messages : 100

Bonjour je suis entrain de réaliser une barre de progression pour voire les flottes voler.

Mais voila j'ai un petit soucis:

J'ais créér le fichier en html tous marche nikel et je voudrais l'implanter dans les fichiers php.

Comment dois-je faire???

lundi 27 février 2017 (Dernière édition lundi 27 février 2017)

Homer Messages : 1811

Tu as normalement toutes les infos dont tu as besoin, le temps de départ, le temps d'arrivé et le temps restant, avec ça, tu peux facilement en déduire le pourcentage et afficher ça en html.

lundi 27 février 2017

Sc0rpio Messages : 100

C'est fait ca mais quand je met le code dans un fichier .tpl et bien la barre de progression n'affiche pas le vaisseaux en déplacement. Alors que si je met le fichier .html a la racine du jeu et bien le fichier ce lance correctement.

mardi 28 février 2017

Homer Messages : 1811

Tu parles de quel code ?

mardi 28 février 2017

Sc0rpio Messages : 100
<html>
<head>
<title>Barre de progression</title>
<style type="text/css">
#progressbar
{
  position:relative;
  width:250px;
  padding:0 0 0 0;
  background-image:url("images/pggray.png");
  height:21px;
  border:1px solid #CCC;
  -moz-border-radius:2px;
  border-radius:2px;
}
#indicator
{
  position:absolute;
  right:0;
  background-image:url("images/pggreen.png");
    background-repeat: no-repeat;
  height:20px;
  width:20px;
  margin:0 0 0 0;
}
#indicatorretour
{
  position:absolute;
  right:0;
  background-image:url("images/pggreenr.png");
    background-repeat: no-repeat;
  height:20px;
  width:20px;
  margin:0 0 0 0;
}

</style>
</head>
<div id="pwidget">  
<div id="progressbar">
    <div id="indicator"></div>
    <div id="indicatorretour"></div>
</div>
<div id="progressnum"></div>
</div>
<input hidden type="text" value="5" id="Ttraj" /><br>
<input hidden type="text" value="1000" id="tempo" /><br>
<input hidden type="text" value="3" id="Testatio" /><br>


<script>  

//caractéristiques
var maxprogress = 250;
var imgwidth = 20;
var distparcourue = maxprogress - imgwidth; //taille du fond - taille img en mouvement


//variables fonctionnelles
//var tempo = 1000;
var Ttraj = 10;
var Testatio = 5;
var progressnum = document.getElementById("progressnum");
var indicator = document.getElementById("indicator");
var indicatorretour = document.getElementById("indicatorretour");
//var temporisation = document.getElementById('tempo').value;
var temporisation = 1000;


//initialisations

var HandleA = 0;
var HandleR = 0;
var HandleS = 0;
var tstatio = 0;
var actualprogress = 0;
indicatorretour.style.visibility="hidden";
indicator.style.visibility="hidden";

//HandleA = setInterval(aller, 1000);
//HandleS = setInterval(statio, temporisation);
//HandleR = setInterval(retour, 1000);
HandleA = setInterval(aller_retour, 1000);

function statio()
{
tempsfinal = document.getElementById('Ttraj').value = Ttraj;
tempsstatio = document.getElementById('Testatio').value = Testatio;
indicator.style.visibility="visible";
if(actualprogress > tempsfinal)
{
tstatio = 1;
actualprogress = 0;
}
if(tstatio){
if (tstatio > tempsstatio){
indicator.style.visibility="hidden";
clearInterval(HandleS);
HandleR = setInterval(retour, temporisation)
return;
}
// progressnum.innerHTML = (tempsstatio - tstatio) + " secondes restantes";
tstatio += 1;
}else{
indicator.style.left =actualprogress*distparcourue/tempsfinal; //met à l'échelle le temps à parcourir par rapport à la distance parcourue sur le fond
// progressnum.innerHTML = (tempsfinal - actualprogress) + " secondes restantes";
actualprogress += 1;
}


}

 function aller()
{
tempsfinal = document.getElementById('Ttraj').value = Ttraj;
indicator.style.visibility="visible";
if(actualprogress > tempsfinal)
{
actualprogress = 0;
indicator.style.visibility="hidden";
clearInterval(HandleA);
return;
}
indicator.style.left = (actualprogress*distparcourue/tempsfinal); //met à l'échelle le temps à parcourir par rapport à la distance parcourue sur le fond
// progressnum.innerHTML = (tempsfinal - actualprogress) + " secondes restantes";
actualprogress += 1;
}

 function aller_retour()
{
tempsfinal = document.getElementById('Ttraj').value = Ttraj;
if(actualprogress > tempsfinal)
{
actualprogress = 0;
//indicator.style.visibility="hidden";
clearInterval(HandleA);
HandleR = setInterval(retour, temporisation)
return;
}
indicator.style.visibility="visible";
indicator.style.left = (actualprogress*distparcourue/tempsfinal); //met à l'échelle le temps à parcourir par rapport à la distance parcourue sur le fond
// progressnum.innerHTML = (tempsfinal - actualprogress) + " secondes restantes";
actualprogress += 1;
}

function retour()
{
tempsfinal = document.getElementById('Ttraj').value = Ttraj;
indicator.style.visibility="hidden";
indicatorretour.style.visibility="visible";
if(actualprogress > tempsfinal){
actualprogress = 0;
indicatorretour.style.visibility="hidden";
clearInterval(HandleR);
return;
}
indicatorretour.style.left=distparcourue-(actualprogress*distparcourue/tempsfinal);
// progressnum.innerHTML = (tempsfinal - actualprogress) + " secondes restantes";
actualprogress += 1;
}
</script>
</html>

Voici les images a mettre dans le même dossier que le fichier:

Si tu lance ce code dans ton navigateurs ou que tu le met a la racine du jeu il fonctionne correctement mais quand je le met dans le jeu dans le fichier fleettable.tpl il ne fonctionne pas. En faites on ne voit pas le vaisseau bouger de droite a gauche.

mardi 28 février 2017 (Dernière édition mardi 28 février 2017)

Homer Messages : 1811

Quand tu mets tout ça dans fleettable.tpl voir tu bien les images ?

Qu'indique le console javascript ?

mardi 28 février 2017

Sc0rpio Messages : 100

Oui je voit toutes les images

Et bien en faites le vaisseaux ne bouge pas il reste fixe a gauche et a la fin du décompte il passe directement a droite reste fixe et revient directement a gauche en faite il y a aucun défilement.

J'ai même créer un fichier .js, insérer le css a la bonne place et ça fait la même chose.

je pense qu'il prend pas en compte le setInterval() et je voit pas comment faire une aide serais la bienvenue...

mardi 28 février 2017 (Dernière édition mardi 28 février 2017)

Homer Messages : 1811

Qu'indique la console javascript ?

au pire, donne les infos de connexion en PV, je test et regarde ça.

mercredi 1 mars 2017

Sc0rpio Messages : 100

Merci beaucoup Homer tu ma sauver des nuits d'insomnies... lol

mercredi 1 mars 2017

Sc0rpio Messages : 100

J'arrive pas a le mettre dans chaque flotte la barre de progression.

Quand j’envoie 1 flottes c'est bien prit en compte il y a pas de problème d'affichage mais quand j’envoie + de 1 flottes en même temps il y a un problème d'affichage.

jeudi 2 mars 2017

Page suivante »