ezzza
Messages postés6Date d'inscriptionsamedi 5 juin 2010StatutMembreDernière intervention11 juin 2011
-
5 juin 2010 à 19:05
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 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.
ezzza
Messages postés6Date d'inscriptionsamedi 5 juin 2010StatutMembreDernière intervention11 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
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 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)
Vous n’avez pas trouvé la réponse que vous recherchez ?
ezzza
Messages postés6Date d'inscriptionsamedi 5 juin 2010StatutMembreDernière intervention11 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
ezzza
Messages postés6Date d'inscriptionsamedi 5 juin 2010StatutMembreDernière intervention11 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