Sujet Précédent Sujet Suivant

Faire disparaître une image

Bioubiou - Modifié par jordane45 le 8/11/2015 à 02:02
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 - 10 nov. 2015 à 19:18
Bonjour,
je dois coder un jeu en html, css et js, mon problème est que, sur la page de commencement, un personnage explique dans une bulle ce que le joueur dois faire. J'aimerais que cette bulle disparaisse au bout de 5 ou 6 secondes mais je n'y arrive pas...
La bulle est une image part que j'ai mis dans une div :

HTML : 
<div id="mabulle">
   <img id="bulle1" src="bulle.png" style="position:absolute; left:100px; width:1000px; height:500px; z-index:6"></a>
   </div>


Quelqu'un a -t-il une solution?

Merci


EDIT : Ajout des balises de code.

3 réponses

Réponse 1 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
7 nov. 2015 à 16:52
bonjour

il faut utiliser setTimeout 

 setTimeout(function(){document.getElementById("mabulle").style.display="none"},6000)
0
Bioubiou
7 nov. 2015 à 17:09
Merci pour votre réponse,
le setTimeout je le met à la suite dans la div?
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
7 nov. 2015 à 18:37
tout depend a quelle moment est affiché la bulle
0
Bioubiou > @karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024
8 nov. 2015 à 00:42
La bulle est affichée au début
0
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 8/11/2015 à 12:28
il faut donc utiliser un onload 

<script>
addEventListener('load',function(){setTimeout(function(){document.getElementById("mabulle").style.display="none"},6000)},false);
</script>
0
Bioubiou
8 nov. 2015 à 21:19
ça marche !!! :) merci beaucoup.
Et par hasard vous ne sauriez pas comment faire un compte à rebours?
0
Réponse 2 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 9/11/2015 à 21:53
j'ai ceci 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script>

function rebour_multiple(tempsFin, idRebour){

 this.tempsFin=tempsFin;
 this.idRebour=document.getElementById(idRebour);
 this.rebour();
 }


rebour_multiple.prototype.rebour=function(){

  var that=this;
  var date1 = new Date().getTime();
  var date2 = new Date(this.tempsFin).getTime();

  if(date1>date2){
  this.idRebour.firstChild.nodeValue ='Temps restant : date passé'
  }

  else{
  var sec = (date2 - date1) / 1000;
  var n = 24 * 3600;

  var j = Math.floor (sec / n);
  var h = Math.floor ((sec - (j * n)) / 3600);
  var mn = Math.floor ((sec - ((j * n + h * 3600))) / 60);
  var sec = Math.floor (sec - ((j * n + h * 3600 + mn * 60)));

  j= j < 10 ? '0' + j : j;
  h= h < 10 ? '0' + h : h;
  mn= mn < 10 ? '0' + mn : mn;
  sec= sec < 10 ? '0' + sec : sec;

  this.idRebour.firstChild.nodeValue = "Temps restant : " + j +"J  "+ h +"H  "+ mn +"Min  "+ sec + "Sec ";
  }

  setTimeout(function(){that.rebour()}, 1000); 

 }

function initcompteur(){

 new rebour_multiple('09/10/2015 22:47:00',"compteur1");

 new rebour_multiple('02/18/2016 12:55:20', "compteur2");

 new rebour_multiple('04/19/2017 23:00:00', "compteur3");

}

typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', initcompteur) : window.addEventListener('load', initcompteur, false);

</script>

 </head><body>
 
  <span id="compteur1">00:00:00</span>;
  <br>
  <span id="compteur2">00:00:00</span>;
  <br>
  <span id="compteur3">00:00:00</span>;
      
 </body></html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
0
Bioubiou
9 nov. 2015 à 23:11
Coool je l'ai modifié un peu et il marche! Merci beaucoup! :)

Et par hasard... ahah j'ai un autre souci : Le but du joueur est de trouver la bonne touche du clavier pour faire rentrer une balle dans un trou, avant la fin du compte à rebours. Lorsque le joueur trouve la bonne touche avant la fin du compte à rebours, comment interrompre celui ci et inviter le joueur au niveau suivant? Dans mon js j'ai cela :

switch ( lettre )
{
case 'j': TweenMax.to( $balle1, 1, { left:'1200px', top:'590px', rotation:'3rad' }); break;
case 'a' : TweenMax.to( $balle1, 1, { opacity : '0'}); break;
case 'p': TweenMax.to( $balle1, 1, { left:'-100px', top:'500px' }); break;

}

La bonne touche est le J (les autres sont des pièges...). Du coup il faut que j'indique que lorsque le J est enclenché, le compte à rebours s'arrête et un lien vers le niveau suivant apparaît. Ou alors, j'indique que lorsque ma "balle1" touche la sortie (appelée dans mon code "trou1") le compte à rebours s'arrête etc.

Il y a t-il un moyen de faire ça ?
0
Réponse 3 / 3
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
10 nov. 2015 à 19:18
je te laisse l'adaptation 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>

function rebour_multiple(tempsFin, idRebour){

 this.tempsFin=new Date().getTime()+tempsFin*1000;
 this.idRebour=document.getElementById(idRebour);
 this.timer="";
 this.rebour();
 }


rebour_multiple.prototype.rebour=function(){

  var that=this;
  var date1 = new Date().getTime();
  var date2 = this.tempsFin;

  if(date1>date2){
  this.idRebour.firstChild.nodeValue ='perdu'
  }

  else{
  var sec = (date2 - date1) / 1000;

  var mn = Math.floor (sec / 60);
  var sec = Math.floor (sec % 60);

  mn= mn < 10 ? '0' + mn : mn;
  sec= sec < 10 ? '0' + sec : sec;

  this.idRebour.firstChild.nodeValue =  mn +"Min  "+ sec + "Sec ";
  }

  this.timer=setTimeout(function(){that.rebour()}, 1000); 

 }


function touche(e){

  if(e.keyCode==74){
    
  clearTimeout(el_obj.timer)
  
   alert("gagne")
   
   document.getElementById('lien').style.display="block"
  
  }
}

var el_obj=""
 
function initcompteur(){

el_obj=new rebour_multiple(120,"compteur1");

}

typeof window.addEventListener == 'undefined' ? window.attachEvent('onload', initcompteur) : window.addEventListener('load', initcompteur, false);

typeof window.addEventListener == 'undefined' ? window.attachEvent('onkeydown', touche) : window.addEventListener('keydown', touche, false);

</script>

 </head><body>
 
  <span id="compteur1">00:00:00</span>;
  
   <a href="http://www.developpez.com/" id="lien" style="display:none">suivant</span>;
      
 </body></html>
0

Discussions similaires

vectoriser un logo sous photoshop
cs_babidou -
harleyman37 -

11 réponses
[Photoshop] : Image noir et blanc en image blanc et noir ?
kristoufiol -
titoine2000 -

4 réponses
image avec FPDF
cs_sebalex -
Franck -

12 réponses
initialisation du BITMAPINFO pour avoir une palette 256 couleurs!
SyN42 -
chris91 -

2 réponses
insérer une image dans une form
cs_jordinette -
Warning -

2 réponses
Rejoignez-nous