Moment d'affichage avec IE

Version imprimable

22/04/2010, 17h03
Lilouse

Moment d'affichage avec IE

Bonjour

J'ai un soucis avec mon script et internet explorer. J'ai créé un jeu de carte permetant de faire un mot et le moment de l'affichage n'est pas celui que je souhaite sur IE alors que je n'ai pas de soucis avec FF ou Opera.

Voici un exemple d'étape réalisé sous Firefox ou Opéra
- l'utilisateur clique sur le bouton valider pour valider un mot
- Le javascript récupère le mot et demande une vérification de son existence au serveur (AJAX)
- Si le mot est bon, normalement, le nombre de points est augmenté du nombre de points gagné avec ce mot et le mot formé est placé dans un textarea avec le nombre de point qu'il a rapporté.
- L'intelligence artificiel cherche un mot et si elle en trouve affiche les images correspondante sur la table
- Attente de 3 secondes pour voir les lettres et les images puis les images sont remplacé et les points et le mot sont placé dans la comptabilisation de points total et dans le textarea de l'IA.

Ce déroulement est le déroulement normal du jeu. Avec Internet explorer, le résultat final est le même mis à part que les points et les mots dans le textarea sont placé exactement en même temps. Du coup, on ne voit même pas les cartes utilisé par l'IA.
L'utilisateur ne peux pas rester sans aucun affichage pendant l'excution totale de ce script. Es ce qu'il n'y aurait pas de solution pour forcer l'affichage avant la fin de l'exécution ?
27/04/2010, 08h43
Lilouse

Es ce que quelqu'un pourrait m'aider ?
S'il vous manque des informations je peux aussi vous les fournir.
27/04/2010, 09h41
supersnail

Bonjour,

Le code javascript nous serait utile, on a pas de boule de cristal :aie:

Le problème est que je ne peux pas tout mettre.... ça ferais beaucoup ...

Il existe plusieurs action que l'utilisateur peut faire :
- défausser
- passer son tour
- faire un mot
- recommencer (ne nous intéresse pas du tout ici, ça recharge juste la page)

Le problème d'affichage se fait quelques soit l'action faite par l'utilisateur donc je vais vous donner l'exemple lorsque l'utilisateur passe son tour :

Dans mon fichier game.php :

Code:

<p><input type="submit" value="Passer" onclick="castor();return false;"/></p>

Lorsque l'utilisateur clique sur le bouton passer, la fonction castor() qui permet de faire jouer l'intelligence artificiel est exécutée.

castor() dans game.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// Le castor joue
function castor(){
 
	//alert(contenupioche.length); // Message de debug pour savoir combien de carte il reste dans la pioche
 
	// si la partie est terminé, castor ne peux pas jouer
	if (!partietermine){ // Variable global
 
		// Déclaration de varaible
		var jouer=false; // Le castor n'a pas encore joué
		var i; // Pour parcourir la main de castor
		var j; //pour tester les éléments qui compose le nom de la carte
 
 
		// On essaye de faire un mot
		jouer=cherchemot(); // renvoie true si un mot a été trouvé false sinon
 
		// S'il n'a pas fait de mot et qu'il n'a pas tenté de défausser, il défausse si possible
		if (!jouer){
			jouer=defaussecastor(); // renvoie true si la défausse a réussi, nfalse sinon.
		}
 
 
		// S'il a joué, il pioche
		if (jouer){
			piochecastor();
		}
		// S'il n'a pas jouer, il prévient l'utilisateur
		else{
			alert("Le castor n'a pas trouvé de mot et ne peut pas défausser.");
		}
	} else {
		alert("La partie est terminé, vous ne pouvez pas laisser Castor jouer.");
	}
}

Le script exécute ensuite cherchemot() de game.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function cherchemot(){
 
	// Liste des lettres
	var i; // parcours la main du castor
	var elements; // Elements de la carte
	var tlettre= new Array(); // Liste des lettres de la main du castor
	for (i=1;i<=7;i++){
		if (maincastor[i]==""){ // Variable global
			tlettre[i]=""; // Il n'a pas de carte ici
		} else{
			elements=maincastor[i].split("-"); // On récupère les élements qui compose le nom de la carte
			if (elements[2]=="joker"){ // On vérifie si la carte est un joker
				tlettre[i]="_"; // si la carte est un joker la lettre est _ pour remplacer n'importe quel lettre dans la recherche du mot dans la BD
			}else{
				tlettre[i] = elements[2]; // Si la carte n'est pas un joker on prend la lettre de la carte 
			}
			//alert(tlettre[i]); // Debug pour savoir quell lettre castor a dans la main
		}
	}	
 
	// Recherche du mot coté serveur
	callScript("verifexiste.php","castor=true&a=" + tlettre[1] +"&b=" + tlettre[2] +"&c=" + tlettre[3] +"&d=" + tlettre[4] +"&e=" + tlettre[5] + "&f=" + tlettre[6] + "&g=" + tlettre[7]); // Envoie une requete au serveur avec AJAX
	if (motcastor!=""){ // variable global dont la valeur a été changé sur le serveur
		motexiste=true;
	}
 
	// si on trouve un mot
	if (motexiste){
		var mottrouve=new Array();
		var j; // parcours les lettres du mot
		var lettretrouve; // permet de savoir si on a trouvé la lettre ou pas
		var placecarte; // Emplacement de la carte
		var placelettre; // emplacement de la lettre de la carte
		// On parcours chaque lettre du mot
		for (j=0;j<motcastor.length;j++){ 
			i=1;
			lettretrouve=false; // on concidere que la lettre n'a pas été trouvé
			while ((i<=7)&&(lettretrouve==false)){ // On parcours la main du castor
				// Si on trouve la lettre
				if (tlettre[i].toUpperCase()==motcastor[j].toUpperCase()){
					// on place la carte sur la table
					placecarte="choisicastor"+(j+1); // id de l'emplacement
					//alert("Nom de la carte : " + maincastor[i]); // debug
					document.getElementById(placecarte).title=maincastor[i]; // on chage le titre de l'emplacement
					document.getElementById(placecarte).src="images/cartes/" + maincastor[i] + ".jpg"; // On change la source de l'image de l'emplacement
					// On place la lettre
					placelettre="lettrechoisicastor"+(j+1); // id de l'emplacement
					document.getElementById(placelettre).value=motcastor[j].toUpperCase(); // On place la valeur de la lettre dans le formulaire
					// On replace les variables
					lettretrouve=true; // On a trouvé la lettre
					maincastor[i]=""; // Il n'y a plus de carte à cette emplacement de la main
					tlettre[i]=""; // cette lettre a été utilisé
				}
				i=i+1; // Lettre suivante
			}
 
			// si on a pas trouvé la carte, la lettre est un joker
			if (!lettretrouve){
				i=1;
				while ((i<=7)&&(lettretrouve==false)){
					if (tlettre[i]=="_"){
						// on place la carte
						placecarte="choisicastor"+(j+1); // id de l'emplacement de la carte
						document.getElementById(placecarte).title=maincastor[i];
						document.getElementById(placecarte).src="images/cartes/" + maincastor[i] + ".jpg"; // On change la source de l'image de l'emplacement
						// On place la lettre
						placelettre="lettrechoisicastor"+(j+1);
						document.getElementById(placelettre).value=motcastor[j].toUpperCase(); // On place la valeur de la lettre dans le formulaire
						// On replace les variables
						lettretrouve=true;
						maincastor[i]="";
						tlettre[i]="";
					}
					i=i+1
				}
			}	
		}
 
		// Attente de 3 secondes pour que l'utilisateur puisse voir les cartes joué par le castor
		callScript("sleep.php","arret=3"); // sleep() n'existant pas en javascript, l'attente se fait coté serveur
 
		// Compte les points
		validemotcastor();
 
		motcastor=""; // Le mot trouvé par le castor est de nouveau vide
		motexiste=false; // le castor n'a plus de mot jusqu'au prochain tour
		return true; // Un mot a été trouvé donc on retourne true.
	}
	// Si on ne trouve pas de mot on return false
	return false;
 
}

Je ne pense pas que ma fonction callscript ainsi que ce qu'il se passe coté serveur soit utile vu que le problème se pose aussi quand castor défausse et donc qu'il ne passe pas par le serveur.

validemotcastor() de game.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// Valide un mot
function validemotcastor(){
	// trouver le premier emplacement vide
	var videtable=trouvervide("choisicastor"); // trouve le premier remplacement vide soit l'emplacement qui suit la dernière carte
 
	// On récupère le mot
	var mot="";
	var videtableb=videtable;
	var idcarte;
	var idlettre;
	var points=0; // points du mot
	var cartetable; // nom de la carte sur la table
	var elements; // element qui compose le nom de la carte
	var bonus=2; // bonus si on vide la main (point multiplié par bonus)
	// si castor a trouvé un mot de la taille maximum
	if (videtable==-1){
		videtableb=8; // nombre de carte maximum +1
	}
	// on parcours la table
	for(i=1;i<videtableb;i++){
		idcarte="choisicastor" + i ; //emplacement de la carte (image)
		idlettre= "lettre" + idcarte; // emplacement de la lettre
 
		// On ajoute une lettre au mot
		mot = mot + document.getElementById(idlettre).value;
 
		// On rajoute les points de la carte
		cartetable=document.getElementById(idcarte).title; // nom de la carte
		elements=cartetable.split("-"); // élement qui compose le nom de la carte
		if (parseInt(elements[1],10)<=10){ // si la carte n'est pas un joker
			//alert (parseInt(elements[1]));
			points=points + parseInt(elements[1],10); // on rajoute les points de la carte
		}
 
		// on rajoute le bonus s'il a trouvé un mot avec toute les lettres de la main
		if (i==7){
			points=points * bonus;
		}
 
		// On supprime la lettre
		document.getElementById(idlettre).value="";
		document.getElementById(idlettre).readOnly=true; // on s'assure que readonly est bien a true (ce qui n'est pas le cas quand la lettre était un joker)
 
		// On supprime la carte
		document.getElementById(idcarte).src="images/cartes/vide.jpg";
		document.getElementById(idcarte).title="vide";
	}
 
	// On place dans la comptabilisation des points
	document.getElementById('pointsducastor').value = parseInt(document.getElementById('pointsducastor').value,10) + points;
	document.getElementById ('motsducastor').value = document.getElementById ('motsducastor').value + mot + " : " + points + "\r\n";
 
}

Un autre problème est apparue avec IE qu'il n'y a pas avec ff, la page se met à recharger de temps en temps tout en laissant le problème persister...

J'espère que c'est informations vous suffiront ... mon code game.php suit le xHTML.

29/04/2010, 16h13
Lilouse

Petit test que je viens de faire :
dans ma fonction castor(), j'ai rajouté un message d'alert.

J'ai d'abord mis la ligne :

Code:

jouer=cherchemot();

en commentaire avec l'alert situé juste apres.

La page ne se recharge pas donc le problème de rechargement vient de la fonction cherchemot() de plus les affichage qui doivent se faire avant le message alert ce font à ce moment la et n'attende pas la fin du script. je ne peux pas voir si le problème d'affichage est correcte dans le sens que l'exécution de la fonction est instantané ici.

J'ai donc essayé de mettre mon message alert avant la fonction cherchemot() sans que celle ci soit en commentaire. La page recommence à ce recharger mais l'affichage de ce que l'utilisateur joue se fait en même temps que mon alert puis la page recharge une fois le message validé.
30/04/2010, 15h23
Lilouse

J'ai résolu un de mes deux problèmes, le fait que la page recharge. dans ma fonction cherchermot() j'utilisais motcastor[j] pour acceder à la lettre en position i du mot motcastor mais si ceci fonctionne sous firefox, cela n'est pas le cas sur internet explorer j'ai donc dut le remplacer par motcastor.charAt(j)

Mais le problème persiste, l'affichage se fait toujours quand l'utilisateur reprend la soit à la fin du tour de l'intelligence artificiel soit lors de l'affichage d'un message alert.

Peut être existerait il alors un moyen de simuler l'intervention de l'utilisateur sans pour autant que celui ci est à faire quoi que ce soit ?

Toujours pas de réponse ? Mon problème peut se trouver n'importe ou alors j'ai créé un fichier test afin de voir ce qu'il se passe quand je n'ai pas toute mes fonction dut au jeu juste pour savoir à quel moment des images s'affiche. J'ai mis en place deux images blanche et un bouton sur ma page lorsque je clique sur le bouton cela exécute une fonction javascript qui me change la source de mes deux images :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <title>Rêve Pocket</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> function clique(){ document.getElementById("img1").src="images/cartes/bleu-01-A.jpg"; document.getElementById("img2").src="images/cartes/bleu-01-A.jpg"; } </script> </head> <body> <img id="img1" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" /> <img id="img2" src="images/cartes/vide.jpg" alt="image non trouvé" height="150" /> <br/> <form id="passertour" action=""> <p><input type="submit" value="test" onclick="clique();return false;"/></p> </form> </body> </html>
Afin de ralentir l'exécution j'ai utilisé deux méthodes :
1. un sleep passif en php
2. un boucle active avec une durée limité.

1. le sleep :
Comme on ne peux pas utiliser de sleep en javascript, j'ai utilisé l'AJAX pour acceder à un sleep en php.
J'ai donc rajouté dans mon document de test la fonction javascript suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function callScript ( scriptName, args ){ var xhr_object = null; // Construction de l’objet XMLHttpRequest selon le type de navigateur if(window.XMLHttpRequest) { xhr_object = new XMLHttpRequest(); } else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } xhr_object.open("POST", scriptName+"?rnd="+Math.random(), false); xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Envoi de la requête xhr_object.send(args); //execute le code javascript de ma requete eval(xhr_object.responseText); }
et j'ai modifié ma fonction clique() :
Code:

1 2 3 4 5 6 function clique(){ document.getElementById("img1").src="images/cartes/bleu-01-A.jpg"; callScript("sleep.php","arret=3"); document.getElementById("img2").src="images/cartes/bleu-01-A.jpg"; }
et bien sur voici ma page sleep.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php // Include include "fonctionphp/fsecurite.php"; // fonction vérifiant plusieurs élément de sécurité // Récupération des paramètres if (isset($_POST['arret'])){ // Récupération des paramètres $arret=injection($_POST['arret']); // pause sleep($arret); } ?>
Avec ceci, j'ai le même résultat que lorsque je fait mon jeu c'est à dire mes images s'affiche l'une puis l'autre sur firefox alors que internet explorer j'ai mes deux images qui s'affichent en même temps après un temps d'attente d'au moins trois secondes.

2. Temps d'attente actif
à la place de ma fonctioncallscript dans clique() j'utilise une autre fonction appelé attente avec en paramètre le nombre de milliseconde :

Code:

attendre(3000);

ma fonction attendre() :
Code:

1 2 3 4 5 6 7 8 9 function attendre(secondeatt){ var debut = new Date(); var ecoule=0; var maintenant; while (ecoule<secondeatt){ maintenant= new Date; ecoule= maintenant.getTime() - debut.getTime(); } }
Bien sur cette solution ne sera pas gardé mais c'est à titre comparatif surtout que le résultat m'intrigue : avec cette méthode, les deux navigateurs réagisse de la même façon en affichant les images en même temps une fois le temps écoulé...

Es ce que vous voyez comment afficher mon image des que je fais :

Code:

document.getElementById("img1").src="images/cartes/bleu-01-A.jpg";

Sans attendre que toute ma fonction soit exécutée.

Bonjour,

Dans ta fonction callScript, il faudrait faire:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function callScript ( scriptName, args ){ var xhr_object = null; // Construction de l’objet XMLHttpRequest selon le type de navigateur if(window.XMLHttpRequest) { xhr_object = new XMLHttpRequest(); } else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; } xhr_object.open("POST", scriptName+"?rnd="+Math.random(), false); xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Envoi de la requête xhr_object.send(args); //execute le code javascript de ma requete while(xhr_object.readyState != 4){} //on attend jusqu'à ce que la requête soit revenue eval(xhr_object.responseText); }
il faut peut-être attendre que la page ait fini de se charger avant d'évaluer le résultat,nan? :koi:.
On dirait que firefox fait correctement cette étape,mais pas Internet Explorer.

Sinon ta fonction "attendre", pourquoi ne pas la conserver? Ça me paraît moins bourrin que d'appeler une page sur le serveur qui fait la même chose:mouarf:

03/05/2010, 17h45
Lilouse

Pour callscript tu est sur de toi ? Comme je suis en synchrone(dernier paramètre de xhr_object.open() à false), il me semble qu'on m'avais dit qu'il n'y avais pas besoin de mettre readyState mais j'ai peut être mal compris.

Pour ce qui est du type d'attente utilisé c'est que j'utilise déjà ma fonction callscript pour quelque chose de complètement différent (accès à la bd) et une attente active n'est pas forcement le mieux comme attente alors comme j'avais déja ma fonction callscript je me suis dit que je pouvait aussi m'en servir. sleep fait une attente ou tout le programme est en pause alors que pour attendre() mon programme tourne dans le vide c'est pas bon du tout ça ...

En utilisant la deuxième méthode avec le while le résultat est pire qu'avec callscript car même sur firefox, les images sont toutes affichés à la fin et non au fur et à mesure...