Transposer un Javascript pour Mozilla... Résolu/Fermé

Question

Bonjour! Voilou j'ai un script qui constitue un petit puzzle. C'est un puzzle où toutes les pièces sont dans un carré sauf une, ce qui permet de les déplacer une par une pour reconstituer la chose. Il fonctionne très bien sous IE, et sous Mozilla il non (comme beaucoup de script). Les pièces d'assichent toutes bien, aléatoirement etc., mais lorsque je clique sur l'un d'elles pour qu'elle se déplace, cela ne marche qu'une fois sur deux, ou pas du tout... Je pense donc que l'incompatibilité vient du module move() vu que init() et start() fonctionnent. J'aimerais savoir si il était possible de le modifier pour qu'il fonctionne sous les deux navigateurs, ou si on pouvait le refaire avec des fonctions lisibles par Mozilla, créer une condition SI pour tester le navigateur et executer le nouveau code seulement si c'est Mozilla, enfin voilà... L'URL de l'exemple du jeu : http://les.amethystes.free.fr/jeux_puzzle1.htm Le code HEAD : Dans le corps de la page : Start

Merci beaucoup d'avance pour votre aide!

Reivax962 · Answer

Tu as oublié de préciser "comme beaucoup de scripts mal écris" ;)

document.all n'existe pas selon les standards du web.

Donc quand tu cherches document.all.cadre, dans ta fonction init(), il faut mettre document.getElementById('cadre')

Courage :)

Xavier

PtitGenie · Answer

Ah oki ^^ C'est noté merci!

Sinon, pour préciser le problème, apparement (sous Mozilla...) on ne peut déplacer les pièces que verticalement et vers le bas, ce qui fait qu'après plus rien ne marche o_O

kij_82 · Answer

Et au besoin, car il me semble que certains navigateur ne prennent pas en compte document.getElementById() malgré les recommandations (je ne sais pas si ca a changé depuis), tu peux toujours copier ces fonctions en début de script (à n'inclure qu'une fois / page) afin dêtre sur que ca fonctionne sur n'importe quoi :



 if(!document.getElementById) 
 	document.getElementById=function (id) {
 		return eval("document.all."+id);
 	}
 if(!document.getElementsByName) 
 	document.getElementsByName=function (name) {
 		var el=document.all;
                result=new Array();
                j=0;
 		for(var i=0;i<el.length;i++) 
                   if(el[i].name.toLowerCase()==name.toLowerCase()) 
                      result[j++]=el[i];
 		return result;
 	}
 if(!document.getElementsByTagName) 
 	document.getElementsByTagName=function (tagName) {
 		var el=document.all;
                result=new Array();
                j=0;
 		for(var i=0;i<el.length;i++) 
                   if(el[i].tagName.toLowerCase()==tagName.toLowerCase()) 
                      result[j++]=el[i];
 		return result;
 	}

PtitGenie · Answer

Merci à toi aussi pour cette précision!

kij_82 · Answer

Sinon, je te conseille de débugger ton programme en mettant des alert(''); au niveau de ta fonction move afin de savoir exactement ou tu passe / passe pas dans ton fonction sous mozilla, quelles valeurs sont comparée, etc..
Ainsi tu pourra déterminer s'il s'agit d'un problème algorithmique (a priori non puisque ca fonctionne correctement sous IE), ou d'un probleme d'interprétation de propriété css (je pencherais pour ca), à savoir que certaines propriétés que tu utilise  ne sont peut etre pas interprétée de la même facon sous mozilla et IE (mais a priori non puisque tu utilise que style.left et style.top).

En tout cas commencer par changer ton document.all, peut etre mozilla est-il simplement capricieux.

PtitGenie · Answer

J'ai donc placé des alert!
Comme je le pensais le module qui ne fonctionne pas totalement est move().
Voici sa retranscription avec mes alert :

function move(id)
{
var tampon;
if(document.getElementById(id).style.top==document.getElementById(15).style.top)
	{
	alert('conditionA'); 
	if((parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)+75) |  (parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)-75))
		{
		alert('conditionB'); 
		tampon=document.getElementById(15).style.left;
		document.getElementById(15).style.left=document.getElementById(id).style.left;
		document.getElementById(id).style.left=tampon;
		}
	}
else if(document.getElementById(id).style.left==document.getElementById(15).style.left)
	{
	alert('condition1'); 
	if((parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)+75) |  (parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)-75))
		{
		alert('condition2'); 
		tampon=document.getElementById(15).style.top;
		document.getElementById(15).style.top=document.getElementById(id).style.top;
		document.getElementById(id).style.top=tampon;
		}
	}
}

Pour expliquer en gros :
C'est un tableau de 16 cases/pièces, mais il n'y a que 15 pièces + un espace vide qui permet de glisser les pièces etc. (voir url en haut).
Quand on clique sur une pièce, il analyse toute la ligne de celle-ci, et SI il se trouve sur la ligne verticale où il y a l'espace vide, il entre dans la donction 1 (A si c'est en horizontal). Ensuite, il regarde SI la pièce cliquée est celle qui est située juste à coté de l'espace vide. Dans ce cas il entre dans la condition 2 (ou B) et déplace la pièce dans cet espace vide.

Là, il analyse bien si la pièce se trouve sur une ligne où il y a l'espace vide (entre dans le A ou 1). Mais il n'arrive pas à voir si la pièce est celle juste à coté du vide (conditions B et 2).

C'est donc dans ces deux conditions que ça bloque, et où il doit il y avoir quelque chose de non-reconnu par Mozilla...
if((parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)+75) |  (parseInt(document.getElementById(id).style.left)==parseInt(document.getElementById(15).style.left)-75))
et
if((parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)+75) |  (parseInt(document.getElementById(id).style.top)==parseInt(document.getElementById(15).style.top)-75))

:(

PtitGenie · Answer

Bon bah j'ai été quiche! Comme quoi les problèmes sont souvent plus simple qu'on ne le pense o_O
Si ça ne se déplacait pas correctement, c'est parce que lorsqu'il généré la grille dans "l'espace", il décalait tout, ce qui fait que quand on cliquait sur une pièce, il déplacait celle d'à coté.. Je l'ai remarqué en cliquant par erreur dans le vide de la fenêtre à coté du jeu, il croyait que je cliquais sur une pièce -_- Bref! Problème résolu ^^ Merci à tous!

Transposer un Javascript pour Mozilla...

7 réponses

Discussions similaires