[JS] Compatibilité IE/MF & fonc setInterval()

Fermé
YoshK Messages postés 26 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 16 mars 2011 - 15 mai 2009 à 14:33
Bonjour,
Je développe actuellement (j'essaie) un puissance 4 en javascript, mais je me retrouve confronté à certains problèmes:

¤ Premièrement je n'arrive pas à utiliser un système de "compteur" pour que les tours de jeu soient limités:

	function tourDeJeu()
			{	
				chrono = 1;
				tour++;
				if (tour%2 == 0)
				{
					couleur = 1;
				}
				else
				{
					couleur = 2;
				}
				for (i = 1; i < 9; i++)
				{
					document.images[i].src = "img/pion"+couleur+"a.jpg";
				}
				leChrono();
			}
			function leChrono(chrono)
			{
				clearInterval("leChrono()");
				if (chrono < 10)
				{
					chrono++;
					document.images[0].src = "img/chrono"+chrono+".jpg";
					setInterval("leChrono(chrono)",2000);
				}
				else
				{
					chrono = 1;
					document.images[0].src = "img/chrono1.jpg";
					tourDeJeu();
				}
			}
			function jouer(colonne)	
			{
				clearInterval("timer0()");
				chrono = 1;
                                [...]
                        }


(En principe, le tour de jeu est déterminé aléatoirement a l'initialisation du puissance 4, puis change à chaque fois que le joueur joue ou que les 20 secondes qu'il a pour jouer sont écoulées... Mais en pratique sur IE le compteur commence normalement 1,2 puis passe à 4 puis à 8 et continue à tourner de plus en plus vite en changeant quand même les tours de jeu... Vous imaginez le bordel?)

¤ Mon deuxième soucis est sont dysfonctionnement sur mozilla firefox où à la première pression sur un des boutons une alerte indique "la colonne est pleine"

function jouer(colonne)	
			{
				clearInterval("timer0()");
				chrono = 1;
				k = 100;
				for (ligne = 0; ligne < 8; ligne++)
				{
					if (tab[ligne][colonne] == 0)
					{
						k = ligne;
					}
				}
				if (k != 100)
				{
					tab[k][colonne] = couleur;
					l = 8;
					for (y = 0; y < 8; y++)
					{
						for (x = 0; x < 8; x++)
						{
							l++;
							document.images[l].src = "img/pion"+tab[y][x]+".jpg";
						}
					}
				}
				else
				{
					alert("La colonne est pleine !");
					tour++;
				}
				score();
			}


(Je déclare un tableau en mémoire centrale pour traiter les informations et un autre en HTML pour les afficher)

<script type="text/javascript">
			tab = new Array (8);
			tab[0] = new Array (8);
			tab[1] = new Array (8);
			tab[2] = new Array (8);
			tab[3] = new Array (8);
			tab[4] = new Array (8);
			tab[5] = new Array (8);
			tab[6] = new Array (8);
			tab[7] = new Array (8);


<fieldset id="puissance4">
		<table>
			<tr>
				<td class="caseTrans"><button type="button" onclick="jouer(0)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(1)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(2)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(3)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(4)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(5)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(6)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
				<td class="caseTrans"><button type="button" onclick="jouer(7)"><img src="img/pion1a.jpg" alt="rouge"/></button></td>
			</tr>
		</table>
		<br/>
		<table>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
			<tr>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
				<td class="case"><img src="img/pion0.jpg" alt="rien"/></td>
			</tr>
		</table>
		</fieldset>


Merci d'avance d'avoir prit la peine de lire mon problème !