Fonction répetitive en javascript

anto2b Messages postés 137 Statut Membre -  
anto2b Messages postés 137 Statut Membre -
Bonjour,

Voilà pour un jeu de carte, pour afficher la pioche j'utilise du javascript 


<html> 
<head> 
<SCRIPT LANGUAGE="Javascript">  
         
function piocher(id) 
{ 
 var e= document.getElementById('la_pioche'); 
 e.innerHTML= '<img width="90px" src=\"cartes/'+id+'"/>'; 
 e.style.display= 'block'; 
} 
</SCRIPT> 
</head> 
<body> 
<div onclick="piocher(\''.$pioche[0].'\');"></div> 
<div id="la_pioche"></div> 
</body> 
</html>


Quand je clique sur la div qui exécute la fonction js cela marche : la 1ere entrée du tableau pioche[0] qui est une variable en PHP s'affiche. j'aimerais que à chaque clique de souris, il y est ceci :

1er clic : affiche $pioche[0]
2eme clic : affiche $ pioche[1]
3e clique : affiche $pioche[2] etc .......

Merci de votre aide

18 réponses

  1.
    jiantox Messages postés 1159 Statut Membre 115
     
    salut

    ta variable en php viens d'où ? ( si c'est de javascript sans ajax t'es balaise lol )

    le plus simple serais d'incrémenter le numero de $pioche à chaque tour en passant ce numero en variable :

    $num = 0;

    function pioche($num) {
    echo $pioche[$num];
    $num++; }

    et a chaque clique il rajoute 1 à num. un truc dans l'genre, à toi de voir apres selon ton codage, étant donné qu'on en a pas d'apercu.
    1
  2. Alain_42 Messages postés 5413 Statut Membre 904
     
    essaye ça, je n'ai pas testé: 
    <html> 
<head> 
<script type="text/javascript"> 
var tableau_pioche=new Array();
<?php
//on va generer un array JS à partir de l'array php
for($i=0;$i<sizeof($pioche);$i++){
	echo 'tableau_pioche['.$i.']='.$pioche[$i].'';
}
?>
	//init compteur en variable globale
  var cpt=0;      
function piocher() 
{ 
	if(cpt<tableau_pioche.length){
	 var e= document.getElementById('la_pioche'); 
	 e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />'; 
	 e.style.display= 'block'; 
	 cpt++;
	}else{
		alert('Fin de pioche atteinte');
	}
} 
</script> 
</head> 
<body> 
<div onclick="piocher();"></div> 
<div id="la_pioche"></div> 
</body> 
</html>
    0
  3. anto2b Messages postés 137 Statut Membre 1
     
    Voila mon code source : 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jeu de carte</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
							 
<SCRIPT LANGUAGE="Javascript"> 
							 
function piocher(id)
{
	var e= document.getElementById('la_pioche');
	e.innerHTML= '<img width="90px" src=\"cartes/'+id+'"/>';
	e.style.display= 'block';
}
</SCRIPT>

</head>
<body>
<div id="container">
<?php 
include'connect_bdd.php'; 
$jeu = array();
$i =0;     
$reponse = $bdd->query('SELECT * FROM cartes ORDER BY RAND()'); 
while ($donnees = $reponse->fetch()) 
{ 
$jeu[$i] = $donnees['image'];
//echo'<img width="110px" src="cartes/'.$jeu[$i].'" />';
$i++;
}

echo '<h1> Joueur 1 </h1>';
echo'<div><table height="155px"><tr>';
for($i=0;$i<16;$i=$i+2)
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>';
echo'</tr></table></div>';

// Passe entre jeu et pioche //
for( $j=0 , $i=17 ; $i<52 ; $i++ , $j++)
	 $pioche[$j] = $jeu[$i];
	 
echo '<table><tr><td width="400px"><h1> Carte depot </h1></td><td><h1> Pioche </h1></td></tr>';
echo'<tr><td width="400px"><img src="cartes/'.$jeu[16].'" <img width="90px"/></td><td><div onclick="piocher(\''.$pioche[5].'\');"><img src="img/dos.png" width="90px"/></div></td><td><div id="la_pioche"></div></td></tr></table>';
echo '<h1> Joueur 2 </h1>';
echo'<div><table height="155px"><tr>';
for($i=1;$i<16;$i=$i+2)
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>';
echo'</tr></table></div>';



$reponse->closeCursor();  
?>
</div>
</body>
</html>


    Alain42 votre méthode ne marche pas malheureusement
    0
  4. jiantox Messages postés 1159 Statut Membre 115
     
    vois comme j'ai proposé, incrémenter à chaque click le numero de $pioche via une fonction ( ou encore mieu, la fonction déja existante au click ;) )
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. anto2b Messages postés 137 Statut Membre 1
     
    Comment faire ?
    0
  7. jiantox Messages postés 1159 Statut Membre 115
     
    onclick="piocher(\''.$pioche[5].'\');" pk le n° 5 et pas un autre ?

    j'ai un peu de mal a piger ton codage, ta variable $pioche tu la recupere ici ? :
    $pioche[$j] = $jeu[$i];

    si c'est le cas pk tu l'utiliserais pas pour l'envoyer dans ta fonction ?

    j'ai du mal à voir ton but en fait ^^
    0
  8. Alain_42 Messages postés 5413 Statut Membre 904
     
    j'avais pas testé, modifie cette partie: 

    //on va generer un array JS à partir de l'array php 
for($i=0;$i<sizeof($pioche);$i++){ 
 echo 'tableau_pioche['.$i.']="'.$pioche[$i].'";'; //cette ligne a modifier 
}


    et d eplus comme tu defini ton array $pioche plus bas dans le php il faut que la fonction JS pioche() soit plus bas
    tu peux très bien la déplacer juste avant la balise </body>

    ce n'est pas obligatoire que toutes les fct JS soient dans le head
    0
    1. anto2b Messages postés 137 Statut Membre 1
       
      Cela ne marche toujours pas
      0
  9. anto2b Messages postés 137 Statut Membre 1
     
    Non en fait le numéro 5 c'est juste un exemple lol.

    Alors en fait $jeu c'est un Array contenant le jeu de 52 carte stocker dans une base de donnée.

    J'ai fait une affectation à un array $pioche qui va contenir les (52-16) cartes (les 16 première cartes du jeu sont celles distribués aux 2 joueurs).

    Et c'est la que j'aimerais qu'a chaque fois que je clique sur pioche il y est une incrémentation pour afficher la carte suivante de la pioche.
    0
  10. jiantox Messages postés 1159 Statut Membre 115
     
    donc en gros il faudrais récuperer les 36 dernieres cartes qui reste, fait un compteur à part et les afficher

    tu recupere le n° de la carte dans une variable ( exemple $num )
    afficher la carte voulu ( $pioche[$num] )
    et ensuite incrementer $num ( $num++; ) pour le prochain affichage
    0
  11. anto2b Messages postés 137 Statut Membre 1
     
    Mais comment l'indiquer dans mon code javascript car il ne faut pas actualiser la page
    0
  12. Alain_42 Messages postés 5413 Statut Membre 904
     
    le code complet modifié, attention modif aussi dans le onclick="pioche() 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Jeu de carte</title> 
<link href="styles/style.css" rel="stylesheet" type="text/css" />        

</head> 
<body> 
<div id="container"> 
<?php  
include'connect_bdd.php';  
$jeu = array(); 
$i =0;      
$reponse = $bdd->query('SELECT * FROM cartes ORDER BY RAND()');  
while ($donnees = $reponse->fetch())  
{  
$jeu[$i] = $donnees['image']; 
//echo'<img width="110px" src="cartes/'.$jeu[$i].'" />'; 
$i++; 
} 

echo '<h1> Joueur 1 </h1>'; 
echo'<div><table height="155px"><tr>'; 
for($i=0;$i<16;$i=$i+2) 
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>'; 
echo'</tr></table></div>'; 

// Passe entre jeu et pioche // 
for( $j=0 , $i=17 ; $i<52 ; $i++ , $j++) 
  $pioche[$j] = $jeu[$i]; 
   
echo '<table><tr><td width="400px"><h1> Carte depot </h1></td><td><h1> Pioche </h1></td></tr>'; 
////ATTENTION modif aussi dans cette ligne ci dessous onclick= 
echo'<tr><td width="400px"><img src="cartes/'.$jeu[16].'" <img width="90px"/></td><td><div onclick="piocher();"><img src="img/dos.png" width="90px"/></div></td><td><div id="la_pioche"></div></td></tr></table>'; 
///// 
echo '<h1> Joueur 2 </h1>'; 
echo'<div><table height="155px"><tr>'; 
for($i=1;$i<16;$i=$i+2) 
echo'<td class="select_carte" style="z-index:'.$i.'"><img width="100%px" src="cartes/'.$jeu[$i].'" /></td>'; 
echo'</tr></table></div>'; 



$reponse->closeCursor();   
?> 
<script type="text/javascript">  
var tableau_pioche=new Array(); 
<?php 
//on va generer un array JS à partir de l'array php 
for($i=0;$i<sizeof($pioche);$i++){ 
 echo 'tableau_pioche['.$i.']="'.$pioche[$i].'";'; 
} 
?> 
 //init compteur en variable globale 
  var cpt=0;       
function piocher()  
{  
 if(cpt<tableau_pioche.length){ 
 alert("tableau= "+tableau_pioche[cpt]); 
  var e= document.getElementById('la_pioche');  
  e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />';  
   
  e.style.display= 'block';  
  cpt++; 
 }else{ 
  alert('Fin de pioche atteinte'); 
 } 
}  
</script>  
</div> 
</body> 
</html>
    0
  13. anto2b Messages postés 137 Statut Membre 1
     
    Un grand merci, la methode d'Alain 42 marche. Mais j'aimerais qu'a la fin de la pioche ca recommence au debut de la pioche.
    0
  14. Alain_42 Messages postés 5413 Statut Membre 904
     
    modifies ta fonction: 
    //init compteur en variable globale 
  var cpt=0;       
function piocher()  
{  
 if(cpt == tableau_pioche.length){ 
  cpt=0; 
 } 
 
  var e= document.getElementById('la_pioche');  
  e.innerHTML= '<img width="90px" src="cartes/'+tableau_pioche[cpt]+'" />';    
  e.style.display= 'block';  
  cpt++; 
  
}
    0
  15. anto2b Messages postés 137 Statut Membre 1
     
    Pour finir il faudrait que la carte que je sélectionne de la pioche aille au joueur j1.

    Comment faire ?
    0
  16. Alain_42 Messages postés 5413 Statut Membre 904
     
    le <div id="la pioche"> est bien dans la partie du jouer j1
    0
  17. anto2b Messages postés 137 Statut Membre 1
     
    Faudrait que je crée une div a coté des cartes du joueur 1 ?
    0
  18. Alain_42 Messages postés 5413 Statut Membre 904
     
    je ne sais pas je ne visualise pas ta page, mais tu peux très bien rajouter un div avec un id obligatoirement différend, et mettre dans ta fct JS une autre instruction d' innerHTML 

    var e2= document.getElementById('la_pioche2');  
  e2.innerHTML= '<img width="90px" ..........
    0
  19. anto2b Messages postés 137 Statut Membre 1
     
    Par contre dans la pioche j'ai remarquer un souci. Quand je sélectionne une carte , il faudrait qu'elle sorte de la pioche, comment faire ?
    0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Message "cette fonction n'est pas disponible actuellement"
daladala -
Lucaslebg -

15 réponses
Remplir cellule si l'autre se fait remplir
TheCrazyMod -
TheCrazyMod -

5 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Message récurrent sur TV LG LED HD
bullshitt -
ghsi med -

5 réponses