kurtjulien | 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
|