Fonction répetitive en javascript

Fermé
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 - Modifié par anto2b le 8/10/2011 à 16:59
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 - 9 oct. 2011 à 11:46
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



A voir également:

18 réponses

Réponse 1 / 18
jiantox Messages postés 1092 Date d'inscription mardi 30 septembre 2008 Statut Membre Dernière intervention 26 janvier 2019 114
8 oct. 2011 à 17:25
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
Réponse 2 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
8 oct. 2011 à 17:26
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
Réponse 3 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 17:40
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
Réponse 4 / 18
jiantox Messages postés 1092 Date d'inscription mardi 30 septembre 2008 Statut Membre Dernière intervention 26 janvier 2019 114
8 oct. 2011 à 17:44
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

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

Posez votre question
Réponse 5 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 17:47
Comment faire ?
0
Réponse 6 / 18
jiantox Messages postés 1092 Date d'inscription mardi 30 septembre 2008 Statut Membre Dernière intervention 26 janvier 2019 114
8 oct. 2011 à 17:51
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
Réponse 7 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 8/10/2011 à 17:59
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
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 17:59
Cela ne marche toujours pas
0
Réponse 8 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 17:55
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
Réponse 9 / 18
jiantox Messages postés 1092 Date d'inscription mardi 30 septembre 2008 Statut Membre Dernière intervention 26 janvier 2019 114
8 oct. 2011 à 17:58
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
Réponse 10 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 18:03
Mais comment l'indiquer dans mon code javascript car il ne faut pas actualiser la page
0
Réponse 11 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 8/10/2011 à 18:10
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
Réponse 12 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 18:14
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
Réponse 13 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 8/10/2011 à 18:26
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
Réponse 14 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 18:33
Pour finir il faudrait que la carte que je sélectionne de la pioche aille au joueur j1.

Comment faire ?
0
Réponse 15 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
8 oct. 2011 à 18:52
le <div id="la pioche"> est bien dans la partie du jouer j1
0
Réponse 16 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
8 oct. 2011 à 18:53
Faudrait que je crée une div a coté des cartes du joueur 1 ?
0
Réponse 17 / 18
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 oct. 2011 à 10:23
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
Réponse 18 / 18
anto2b Messages postés 119 Date d'inscription jeudi 21 février 2008 Statut Membre Dernière intervention 18 décembre 2011 1
9 oct. 2011 à 11:46
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

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Remplir une cellule (texte) en fonction d'une autre (texte).
SOMUM -
SOMUM -

4 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
La fonction FILTRE n'est plus reconnue
Auri328 -
Auri328 -

3 réponses
[Excel 2010] Remplir cellule d'après contenu d'une autre
nlbmoi -
amelie -

8 réponses