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:
Code Javascript :
//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.