+- 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 : probleme barres d'energie (/showthread.php?tid=2242)
probleme barres d'energie - kevin74 - 05-01-2008
RE: probleme barres d'energie - Sephi-Chan - 05-01-2008
Je te conseille de faire en sorte de renvoyer une sortie HTML de ce genre :
Le CSS :
Code :
.barrePourcentage {
width: 100px;
border: 1px solid #000;
background: #fff;
}Le HTML :
Code :
<div class="barrePourcentage"><img src="barreRouge.jpg" width="<?php echo $pourcentage;?>" alt="<?php echo $pourcentage;?>% de vie"/></div>Sephi-Chan
RE: probleme barres d'energie - Anthor - 05-01-2008
Bonsoir,
je vous propose ma solution.
![[Image: progressbar.jpg]](http://snippets.anthor.net/_img/progressbar.jpg)
Le résultat de l'exemple est visible ici : http://snippets.anthor.net/progressbar.htm
Le code ( 100% compatible tous navigateurs )
Code PHP :
<?php
<style type="text/css">
.progressbar{
border: 1px solid #000000;
width: 190px;
height: 18px;
position: relative;
color: #000000;
font-weight: bold;
}
.progressbar div.progress{
position: absolute;
width: 0;
height: 100%;
overflow: hidden;
background-color: #B00000;
}
.progressbar div.progress .text{
position: absolute;
text-align: center;
color: #FFFFFF;
}
.progressbar div.text{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.progressbar span.text{
width: 190px;
}
/* Couleur spécifique */
.green{
border: 1px solid #FF0000;
color: #000000;
}
.green div.progress{
background-color: #00FF00;
}
.green div.progress .text{
color: #FF0000;
}
/* Image */
.image{
border: 1px solid #000000;
color: #000000;
}
.image div.progress{
background-color: #00FF00;
background-image: url(_img/barre3d.jpg);
}
.image div.progress .text{
color: #FF0000;
}
</style>
<!-- Version Normale -->
<div class="progressbar">
<div class="text">Parle : 80/200</div>
<div class="progress" style="width: 40%;">
<span class="text">Parle : 80/200</span>
</div>
</div>
<br />
<!-- Version Couleur Spécifique -->
<div class="progressbar green">
<div class="text">Parle : 80/200</div>
<div class="progress" style="width: 40%;">
<span class="text">Parle : 80/200</span>
</div>
</div>
<br />
<!-- Version Image -->
<div class="progressbar image">
<div class="text">Parle : 80/200</div>
<div class="progress" style="width: 40%;">
<span class="text">Parle : 80/200</span>
</div>
</div>
RE: probleme barres d'energie - Sephi-Chan - 05-01-2008
Le fait que le texte apparaisse deux fois dans la source n'est pas très sémantique. Mais c'est vrai que la solution est pas mal, d'autant qu'elle pourrait permettre la mise en place d'une barre entièrement graphique.
Pour résumer je dirais que ça fait un peu usine à gaz (beaucoup de ligne pour pas grand chose) mais que ça peut fournir une bonne base pour mettre en place une barre (et son cadre) graphique.
Sephi-Chan
RE: probleme barres d'energie - Anthor - 05-01-2008
Je nu'tilise jamais ce code tel quel, mais avec jQuery afin qu'il garde toute la sémantique
Code PHP :
<?php
<script type="text/javascript" src="_js/jquery.pack.js"></script>
<script type="text/javascript" src="_js/jquery.progressbar.js"></script>
<script type="text/javascript">
$().ready(function() {
$(".progressbar").each(function(){
$(this).reportprogress($(this).attr('progress'), $(this).html());
});
});
</script>
<div class="progressbar" progress="40">Parle : 80/200</div>
Dès lors ca devient très court et chaque barre se compose suivant son attribut. Dès lors ca devient bien plus sémantique ^^
Et puis c'est comme tout, moins tu as de ligne, moins tu auras un comportement plus complexe.
RE: probleme barres d'energie - Sephi-Chan - 05-01-2008
Anthor a écrit :Et puis c'est comme tout, moins tu as de ligne, moins tu auras un comportement plus complexe.Il n'y avait que le texte par dessus, on peut pas dire que ce soit un comportement complexe.
Par contre je dois reconnaître que cette automatisation vaut le coup. Le script qui donne les raccourcis syntaxiques JQuery sont légers ?
Sephi-Chan
RE: probleme barres d'energie - Anthor - 05-01-2008
jQuery fait 14ko en version gZip et le script de progressbar ne fait que 10 lignes.
Je parle de plus complexe car le texte change aussi de couleur en fonction du remplissage de la barre
RE: probleme barres d'energie - kevin74 - 06-01-2008
J'ai trouvé ma solution !!! :good:
Code PHP :
<?php
$requete = mysql_query("SELECT * FROM joueurs WHERE pseudo='$pseudo'");
$table=mysql_fetch_assoc($requete);
$x=$table['santé'];
$pourcentagesante = $x*2;
$y=$table['moral'];
$pourcentagemoral = $y*2;
?>Code :
<table style="border-color: rgb(17, 17, 17); height: 10px;"
border="1" cellpadding="0" cellspacing="0"
width="204">
<tbody>
<tr>
<td align="left" height="10"><img
src="images/pixelBarresR.jpg" alt="" border="0"
height="10" width="<? echo $pourcentagesante; ?>"></td>
</tr>
</tbody>
</table>![[Image: competences.JPG]](http://eubeubeu.free.fr/celebrity-life/kev/Decembre07/pages/joueur/images/competences.JPG)
seulement, je n'arrive pas à limiter la barre à 100 !
Comment faire pour que la barre de santé soit au maximum à 100 et lorsqu'on consomme un objet qui ajoute 5pts de santé, la barre si elle était à 100 et bien elle ne bouge pas ?
je pense que ça doit tout se jouer sur la requette creer pour la consommation de l'objet... vrai ?
RE: probleme barres d'energie - Kassak - 06-01-2008
Tu crée d'abord une variable $taillemax=100, ensuite dans ton tableau tu dis que la plus grande cellule disons fasse $taillemax de longueur.
Et ensuite quand tu bois une potion qui te donne 5pv, et que tu en a deja 100 soit le max, ce chiffre doit rester a 100, pas 105, donc lorsque tu boit la potion, tu récupères les pv du joueur, et si les pv sont différents des pvmax tu peut boire l'objet
Et tant qu'on y est, vérifie que les pv du joueur + les pv de la potion ne dépasse pas les pv max, si ça dépasse, alors après avoir bu la potion, le joueur aura pv max!
C'est confus non?^^
RE: probleme barres d'energie - Plume - 06-01-2008
C'est confus pour peu de choses
Tu fais juste :
PVMax = 100;
PVNew = PVActuel + PVGagné
Si PVNew > PVMax
Alors PVNew = PVMax
Et voilà, c'finis
Lex