compatibilité javascript

Marsh Posté le 01-02-2012 à 14:42:14

Bonjour,
j'ai un probleme de compatibilité de mon code javascript sur différent navigateur:
- sur IE6.0, les images ne sont meme pas affichées...
- sur google chromo, elles sont affichées, mais on ne peut pas cliquer dessus, rien ne se passe.

Pour précision, c'est un jeu de démineur qui fonctionnait très bien sur IE version précédente.

voici le code:

qu'est ce qui a changé depuis ?

je vous remercie de votre aide.

Code :

<script type="text/javascript">
var CASE_EMPTY = 0; //
var CASE_FLAG = 1; //
var CASE_CLICK = 2; //
var TABLE_WIDTH = <?php if (isset($horizontal)) {echo $horizontal;} else {echo '9';}?>; // Nombre de cases HORIZONTALE
var TABLE_HEIGHT = <?php if (isset($vertical)) {echo $vertical;} else {echo '9';}?>; // Nombre de cases VERTICALE
var nbMines = <?php if (isset($mines)) {echo $mines;} else {echo '10';}?>; // Nombre de mine dans le jeu
var nbFlags = 0; // Nombre de drapeau posé
var nbrMaxClick = TABLE_WIDTH*TABLE_HEIGHT - nbMines; // nombre de click maximum
var PMS; // Première MilliSeconde
var alreadyClick = false;
var elapsedTime = 0;
var idto; // nombre ?? temps ??
var tab = new Array();
var tabFlag = new Array();
function initTabs()
{
alreadyClick = false;
elapsedTime = 0;
idto = null;
nbFlags = 0;
for(var i=0; i<TABLE_HEIGHT; i++) // CREATION DES CASES VERTICALES
{
tab[i] = new Array();
tabFlag[i] = new Array();
for(var j=0; j<TABLE_WIDTH; j++) // CREATION DES CASES HORIZONTALES (pourquoi le mettre dans le premier for? si je le met en dehors, est-ce que ca marche ?)
{
tab[i][j] = 0;
tabFlag[i][j] = CASE_EMPTY;
}
}
}
function fillTab(NbMines, xPosInit, yPosInit)
{
var iNbMines = NbMines;
var minValue = -2*NbMines;
while(iNbMines > 0)
{
var xPos = Math.floor(Math.random()*TABLE_HEIGHT); // Retourne un nb ENTIER aléatoire entre 0 et TABLE_HEIGHT
var yPos = Math.floor(Math.random()*TABLE_WIDTH); // Retourne un nb ENTIER aléatoire entre 0 et TABLE_WIDTH
if(tab[xPos][yPos] >= 0 && (xPosInit != xPos || yPosInit != yPos))
{
tab[xPos][yPos] = minValue;
if(xPos > 0)
{
tab[xPos-1][yPos] ++;
if(yPos > 0) tab[xPos-1][yPos-1] ++;
if(yPos < TABLE_WIDTH - 1) tab[xPos-1][yPos+1] ++;
}
if(xPos < TABLE_HEIGHT - 1)
{
tab[xPos+1][yPos] ++;
if(yPos > 0) tab[xPos+1][yPos-1] ++;
if(yPos < TABLE_WIDTH - 1) tab[xPos+1][yPos+1] ++;
}
if(yPos > 0) tab[xPos][yPos-1] ++;
if(yPos < TABLE_WIDTH - 1) tab[xPos][yPos+1] ++;
iNbMines --;
}
}
return true;
}
function writeTab(bFlag)
{
for(var xPos=0; xPos<tab.length; xPos++)
for(var yPos=0; yPos<tab[xPos].length; yPos++)
if(!tabFlag[xPos][yPos])
{
if(tab[xPos][yPos] < 0)
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>'+(bFlag?'flag':'mine')+'.bmp"/>'
else
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>'+tab[xPos][yPos]+'.bmp"/>';
}
else
if(tabFlag[xPos][yPos] == CASE_FLAG && tab[xPos][yPos] >= 0)
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>nomine.bmp"/>'
}
function caseClick(caseId)
{
var xPos = Math.floor(caseId/TABLE_WIDTH);
var yPos = caseId - TABLE_WIDTH * xPos;
if(!alreadyClick)
{
fillTab(nbMines, xPos, yPos);
compteur();
alreadyClick=true;
}
if(tabFlag[xPos][yPos]) return;
if(checkEnd()) return;
if(!tabFlag[xPos][yPos])
{
if(tab[xPos][yPos] < 0) /* JEU PERDU */
{
window.clearTimeout(idto); // ARRET DU CHRONO
idto = null;
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>mine.bmp"/>';
tabFlag[xPos][yPos] = CASE_CLICK;
writeTab();
alert("DESOLE, VOUS AVEZ PERDU !" );
document.chronometre.gagne.value=0;
window.document.forms['chronometre'].submit();
return;
}
else
{
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img onmouseup="if(event.button == 2) balayage('+(xPos*TABLE_WIDTH+yPos)+');" src="img/<?php echo $design; ?>'+tab[xPos][yPos]+'.bmp"/>';
nbrMaxClick --;
checkEnd();
tabFlag[xPos][yPos] = CASE_CLICK;
}
if(tab[xPos][yPos]==0)
{
if(xPos > 0)
{
caseClick(caseId - TABLE_WIDTH);
if(yPos > 0) caseClick(caseId - TABLE_WIDTH - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId - TABLE_WIDTH + 1);
}
if(xPos < TABLE_HEIGHT - 1)
{
caseClick(caseId + TABLE_WIDTH);
if(yPos > 0) caseClick(caseId + TABLE_WIDTH - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId + TABLE_WIDTH + 1);
}
if(yPos > 0) caseClick(caseId - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId + 1);
}
}
}
function caseRightClick(caseId) // CLIQUE DROIT -----------------------
{
if(!idto) return;
if(!alreadyClick) return;
var xPos = Math.floor(caseId/TABLE_WIDTH);
var yPos = caseId - TABLE_WIDTH * xPos;
if(!tabFlag[xPos][yPos] && nbFlags < nbMines)
{
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>flag.bmp" onmouseup="if(event.button == 2) caseRightClick('+(xPos*TABLE_WIDTH+yPos)+'); else if(event.button == 1) caseClick('+(xPos*TABLE_WIDTH+yPos)+');"/>';
tabFlag[xPos][yPos] = CASE_FLAG;
nbFlags ++;
mineCompteur();
}
else if(tabFlag[xPos][yPos] == CASE_FLAG || nbFlags == nbMines)
{
if(tabFlag[xPos][yPos] == CASE_FLAG)
{
nbFlags --;
mineCompteur();
}
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = '<img src="img/<?php echo $design; ?>vide.bmp" onmouseup="if(event.button == 2) caseRightClick('+(xPos*TABLE_WIDTH+yPos)+'); else caseClick('+(xPos*TABLE_WIDTH+yPos)+');">';
tabFlag[xPos][yPos] = CASE_EMPTY;
}
checkEnd();
}
function balayage(caseId)
{
if(!idto) return;
if(!alreadyClick) return;
var xPos = Math.floor(caseId/TABLE_WIDTH);
var yPos = caseId - TABLE_WIDTH * xPos;
document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML = document.getElementById('case'+(xPos*TABLE_WIDTH+yPos)).innerHTML;
var count = tab[xPos][yPos];
if(xPos > 0)
{
if(tabFlag[xPos-1][yPos] == CASE_FLAG) count--;
if(yPos > 0) if(tabFlag[xPos-1][yPos-1] == CASE_FLAG) count--;
if(yPos < TABLE_WIDTH - 1) if(tabFlag[xPos-1][yPos+1] == CASE_FLAG) count--;
}
if(xPos < TABLE_HEIGHT - 1)
{
if(tabFlag[xPos+1][yPos] == CASE_FLAG) count--;
if(yPos > 0) if(tabFlag[xPos+1][yPos-1] == CASE_FLAG) count--;
if(yPos < TABLE_WIDTH - 1) if(tabFlag[xPos+1][yPos+1] == CASE_FLAG) count--;
}
if(yPos > 0) if(tabFlag[xPos][yPos-1] == CASE_FLAG) count--;
if(yPos < TABLE_WIDTH - 1) if(tabFlag[xPos][yPos+1] == CASE_FLAG) count--;
if(count) return;
if(xPos > 0)
{
caseClick(caseId - TABLE_WIDTH);
if(yPos > 0) caseClick(caseId - TABLE_WIDTH - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId - TABLE_WIDTH + 1);
}
if(xPos < TABLE_HEIGHT - 1)
{
caseClick(caseId + TABLE_WIDTH);
if(yPos > 0) caseClick(caseId + TABLE_WIDTH - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId + TABLE_WIDTH + 1);
}
if(yPos > 0) caseClick(caseId - 1);
if(yPos < TABLE_WIDTH - 1) caseClick(caseId + 1);
}
function checkEnd() // JEU TERMINE -----------------------
{
if(nbrMaxClick) return false;
window.clearTimeout(idto); // ARRET DU CHRONO
idto = null;
writeTab(true);
alert('BRAVO ! VOUS AVEZ GAGNE');
//window.location="score.php"; // AJOUT JULIEN
document.chronometre.gagne.value=1;
window.document.forms['chronometre'].submit();
return true;
}
PMS = (new Date()).getTime();
function compteur() // COMPTEUR TEMPS -----------------------
{
var tps, hs, das, s, ds, cs, ms;
tps = (new Date()).getTime() - PMS; // CALCUL DU TEMPS ÉCOULÉ DEPUIS LE DÉBUT DU CHRONOMÈTRE.
hs = Math.floor(tps / 100000); // HECTOSECONDE
das = Math.floor((tps%100000) / 10000); // DECASECONDE
s = Math.floor((tps%10000) / 1000); // SECONDE
ds = Math.floor((tps%1000) / 100); // DECISECONDE
cs = Math.floor((tps%100) / 10); // CENTISECONDE
ms = Math.floor((tps%10) / 1); // MILLISECONDE
document.chronometre.ms.value=ms; // MILLI
document.chronometre.cs.value=cs; // CENTI
document.chronometre.ds.value=ds; // DECI
document.chronometre.s.value=s; // SEC
document.chronometre.das.value=das; // DIXAINE
document.chronometre.hs.value=hs; // CENTAINE
// on relance la fonction pour mettre le chronomètre à jour. Sauf si on dépasse 999 secondes.
idto = setTimeout(compteur, 1);
if (hs < 10) {idto}
document.chronometre.haut.value=TABLE_HEIGHT;
document.chronometre.large.value=TABLE_WIDTH;
document.chronometre.mine.value=nbMines;
document.getElementById('digit0').src = 'img/<?php echo $design; ?>digit'+s+'.bmp'; // SECONDE
if(s) return;
document.getElementById('digit1').src = 'img/<?php echo $design; ?>digit'+das+'.bmp'; // DIXAINE DE SECONDE
if(das) return;
document.getElementById('digit2').src = 'img/<?php echo $design; ?>digit'+hs+'.bmp'; // CENTAINE DE SECONDE
}
function newGame() // 1. NOUVEAU JEU -----------------------
{
nbrMaxClick = TABLE_WIDTH*TABLE_HEIGHT - nbMines; // NOMBRE MAXIMUM DE CLIC
initTabs();
mineCompteur();
var htmlCode = ''; // CREATION DE LA ZONE DE JEU
htmlCode += '<table class="zonejeu_table" summary="Zone de jeu">';
for(var indexX = 0; indexX<TABLE_HEIGHT; indexX++)
{
htmlCode += '<tr>';
for(var indexY = 0; indexY<TABLE_WIDTH; indexY++)
htmlCode += '<td class="zonejeu_td"><span id="case'+(indexX*TABLE_WIDTH+indexY)+'"><img src=img/<?php echo $design; ?>vide.bmp onmouseup="if(event.button == 2) caseRightClick('+(indexX*TABLE_WIDTH+indexY)+'); else if(event.button == 1) caseClick('+(indexX*TABLE_WIDTH+indexY)+');"></span></td>';
htmlCode += '</tr>';
}
htmlCode += '</table>';
document.getElementById('gamezone').innerHTML = htmlCode;
}
function setWidth(val) // SELECTION WIDTH -----------------------
{
var tmpWidth = parseInt(val);
if(tmpWidth+'' == 'NaN' || tmpWidth <= 1) {document.getElementById('gameWidth').value = TABLE_WIDTH; return;}
TABLE_WIDTH = tmpWidth;
setMines(document.getElementById('gameMines').value);
}
function setHeight(val) // SELECTION HEIGHT -----------------------
{
var tmpHeight = parseInt(val);
if(tmpHeight+'' == 'NaN' || tmpHeight <= 1) {document.getElementById('gameHeight').value = TABLE_HEIGHT; return;}
TABLE_HEIGHT = tmpHeight;
setMines(document.getElementById('gameMines').value);
}
function setMines(val) // SELECTION MINES -----------------------
{
var tmpMines = parseInt(val);
if(tmpMines+'' == 'NaN' || tmpMines < 1 || tmpMines >= TABLE_WIDTH*TABLE_HEIGHT)
{
document.getElementById('gameMines').value = ((TABLE_WIDTH*TABLE_HEIGHT>10)?10:TABLE_WIDTH*TABLE_HEIGHT-1);
//alert('Vous avez choisi le niveau \n\nPersonnalisé'); /* Lors d'une sélection du nombre de mine, mettre comme niveau "personnalisé" */
document.getElementById('niveau').value = "Personnalisé"
return;
}
nbMines = tmpMines;
}
function mineCompteur() // COMPTEUR MINE -----------------------
{
var val = nbMines - nbFlags; // MINES RESTANTES
var mines_restantes_1 = Math.floor(val/10);
var mines_restantes_0 = val - 10*mines_restantes_1;
document.getElementById('minedigit0').src = 'img/<?php echo $design; ?>digit'+mines_restantes_0+'.bmp';
document.getElementById('minedigit1').src = 'img/<?php echo $design; ?>digit'+mines_restantes_1+'.bmp';
}
</script>

Message édité par kurtjulien le 01-02-2012 à 17:49:04

Marsh Posté le 01-02-2012 à 14:42:14

Marsh Posté le 01-02-2012 à 16:55:47

balise code, svp

Message cité 1 fois

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Marsh Posté le 01-02-2012 à 17:49:46

rufo a écrit :

balise code, svp

désolé, voila, c'est édité. merci

Marsh Posté le 02-02-2012 à 09:58:10

[cite]Pour précision, c'est un jeu de démineur qui fonctionnait très bien sur IE version précédente. [/cite]
Quelle version précédente d'IE? Pas la 5.5 quand même :??:

Le pb est que ce code est pas bien codé et difficile à lire En +, y'a même pas l'indentation. Sur FF, installes Firebug et essayes de voir où ça coince...

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *