Code javascript ne fonctionne pas sur firefox

ezzza Messages postés 6 Date d'inscription samedi 5 juin 2010 Statut Membre Dernière intervention 11 juin 2011 - 5 juin 2010 à 19:05
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 12 juin 2010 à 17:45
Bonjour,

Je suis débutante en javascript et je dois réaliser un pong en javascript.
J'y suis arrivée grâce à un tuto et après de nombreuses difficultées mais en voici une de plus que je n'arrive pas à résoudre. Mon code fonctionne sur tout les navigateurs sauf sur firefox.

Donc voici mon code:

//variables
var GAME_BAR_WIDTH = 80;
var GAME_BAR_HEIGHT = 10;
var PXL_DEPLA = 20;
var ZONE_GAME_WIDTH = 800;
var ZONE_GAME_HEIGHT = 500;
var COLOR_BALL = "#fff";
var SIZE_BALL = 8;
var SPEED_BALL = 2;



var barX; // X position of the bar change with keypad
var barY; // Y position of the bar don't change
var context;
var ballX ;
var ballY = 150;
var dirBallX = 0;
var dirBallY = 1;
var loop = setInterval(refreshGame);


window.addEventListener('load', function () {
// Get canvas object
var elem = document.getElementById('canvasElem');
if (!elem || !elem.getContext) {
return;
}

// Get context 2D
context = elem.getContext('2d');
if (!context) {
return;
}

//Initialisation of variables
ZONE_GAME_WIDTH = elem.width;
ZONE_GAME_HEIGHT = elem.height;
ballX = Math.random()*ZONE_GAME_WIDTH;
barX = (ZONE_GAME_WIDTH/2)-(GAME_BAR_WIDTH/2);
barY = (ZONE_GAME_HEIGHT-GAME_BAR_HEIGHT);

//Initialisation of game
createContext(context);



// Events
window.document.onkeydown = checkDepla;


}, false);


function refreshGame() {

// Clear zone
clearContext(context, 0, ZONE_GAME_WIDTH, 0, ZONE_GAME_HEIGHT);

// Get all again


// Get the bar again
context.fillStyle = "#fff";
context.fillRect(barX,barY,GAME_BAR_WIDTH,GAME_BAR_HEIGHT);

// New position of the ball

if ( (ballX + dirBallX * SPEED_BALL) > ZONE_GAME_WIDTH) dirBallX = -1;
else if ( (ballX + dirBallX * SPEED_BALL) < 0) dirBallX = 1;
if ( (ballY + dirBallY * SPEED_BALL) > ZONE_GAME_HEIGHT) {ballY = 0;
//position on X
ballX = (Math.random()*ZONE_GAME_WIDTH);}
else {
if ( (ballY + dirBallY * SPEED_BALL) < 0) dirBallY = 1;
else {
if ( ((ballY + dirBallY * SPEED_BALL) > (ZONE_GAME_HEIGHT - GAME_BAR_HEIGHT)) && ((ballX + dirBallX * SPEED_BALL) >= barX) && ((ballX + dirBallX * SPEED_BALL) <= (barX+GAME_BAR_WIDTH))) {
dirBallY = -1;
dirBallX = 2*(ballX-(barX+GAME_BAR_WIDTH/2))/GAME_BAR_WIDTH;
}
}
}


ballX += dirBallX * SPEED_BALL;
ballY += dirBallY * SPEED_BALL;

// Get the ball
context.fillStyle = COLOR_BALL;
context.beginPath();
context.arc(ballX, ballY, SIZE_BALL, 0, Math.PI*2, true);
context.closePath();
context.fill();


}

function checkDepla(e) {
// Right Key
if (e.keyCode == 39) {
if ( (barX+PXL_DEPLA+GAME_BAR_WIDTH) <= ZONE_GAME_WIDTH ) barX += PXL_DEPLA;
}
// Left Key
else if (e.keyCode == 37) {
if ( ((barX-PXL_DEPLA)) >= 0 ) barX -= PXL_DEPLA;
}


}




function clearContext(context, startwidth, contextwidth, startheight, contextheight) {
context.clearRect(startwidth, startheight, contextwidth, contextheight);
}

// Get context
function createContext(context) {}




Merci de m'aider à résoudre ce problème ça devient limite urgent.

8 réponses

jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
6 juin 2010 à 03:48
Que retourne la console d'erreur de Firefox ? (Barre "Outils")


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
0
ezzza Messages postés 6 Date d'inscription samedi 5 juin 2010 Statut Membre Dernière intervention 11 juin 2011
6 juin 2010 à 14:17
La console d'erreur dit "context is undefine"
Je comprends vraiment pas ce qui cloche. Surtout que ça fonctionne sur chrome et safari. Et ça fonctionnait sur IE mais plus maintenant et je sais denouveau pas pourquoi.
Merci de m'aider
0
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
7 juin 2010 à 01:00
Je ne sais pas trop quoi te dire, ton code semble correct et je n'ai jamais utilisé de CANVAS.

Quelqu'un d'autre peut-être ?


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
7 juin 2010 à 18:47
Bonjour,
- je présumes que tu as bien une balise canvas avec la bonne id

- ensuite je trouve un peu hasardeux de mettre en début de ton code
var loop = setInterval(refreshGame); et ce sans paramètre de délai, la fonction sera appeler avant même que ton context n'ai eu le temps d'être crée.

- si tu dois la mettre quelque part mets la dans la fonction que tu réalises sur le onload...

Enfin...
...Et ça fonctionnait sur IE mais plus maintenant...
IExplorer ne reconnaît pas window.addEventListener, alors normal!

;O)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
ezzza Messages postés 6 Date d'inscription samedi 5 juin 2010 Statut Membre Dernière intervention 11 juin 2011
7 juin 2010 à 21:43
Merci ça fonctionne enfin manquait juste un paramètre de délai.
Merci beaucoup.
Mais alors à la place de window.addEventListener je dois mettre quoi.
Enfin encore merci
0
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 7
8 juin 2010 à 02:17
window.attachEvent()


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
0
ezzza Messages postés 6 Date d'inscription samedi 5 juin 2010 Statut Membre Dernière intervention 11 juin 2011
8 juin 2010 à 22:46
Je vais surement poser une question stupide mais comment on met les deux ensemble pour que ça fonctionne sur IE et sur firefox.
Encore merci de me répondre
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
12 juin 2010 à 17:45
Bonjour,
if( window.addEventListener)
  window.addEventListener( "load", nom_fonction, false);
else
  window.attachEvent( "onload", nom_fonction);
}

;O)
0
Rejoignez-nous
A voir également