J'ai découvert un tuto sur la conception du jeux Brise-Block en JavaScript et après avoir suivit le tutos a lettre quand je lance mon programme il ne s’exécute pas
il n'y que l'espace de jeu qui s'affiche.
et je ne réussi pas à trouver ou peut venir le problème est-ce que vous pourrez m'aidez s'il vous plait.
voici le code que j'ai tapez :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Brise block</title>
<style>
*{padding: 0 ; margin: 0;}
canvas {background: #eee; display : block; margin : 0 auto;}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<div class = "game-over-notify">Game Over</div>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeigth = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeigth = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var gameOverNotify = document.querySelector(".game-over-notify");
var interval;
var bricks = [];
for(var c = 0; c < brickColumnCount; c++){
bricks[c] = [];
for (var r = 0 ; r < brickRowCount; r++ ){
bricks[c][r] = {x : 0 , y : 0, status: 1};
}
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
gameOverNotify.addEventListener("click", function(){
document.location.reload();
});
function keyDownHandler(e){
if(e.keyCode == 39){
rightPressed = true;
}
else if(e.keyCode == 37){
leftPressed = true;
}
}
function keyUpHandler(e){
if(e.keyCode == 39){
rightPressed = false;
}
else if(e.keyCode == 37){
leftPressed = false;
}
}
function CollisionDetection(){
for(var c = 0; c < brickColumnCount; c++){
for(var r = 0; r < brickRowCount; r++){
var b = bricks[c][r];
if(b.status == 1){
if(x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeigth){
dy = -dy;
b.status = 0;
}
}
}
}
}
function drawBall(){
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle(){
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeigth, paddleWidth, paddleHeigth);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks(){
for (var c = 0; c < brickColumnCount; c++){
for (var r = 0; r < brickRowCount; r++){
if(bricks[c][r].status == 1){
var brickX = (r*(brickWidth + brickPadding))+ brickOffsetLeft;
var brickY = (c*(brickHeigth + brickPadding))+ brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeigth);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function draw(){
ctx.clearRect(0, 0, canvas.width , canvas.height);
drawBricks();
drawBall();
drawPaddle();
CollisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius){
dx = -dx;
}
if(y + dy < ballRadius){
dy = -dy;
}
else if (y + dy > canvas.height - ballRadius){
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
else {
gameOverNotify.style.display = "flex";
clearInterval(interval);
return;
}
}
if(rightPressed && paddleX < canvas.width-paddleWidth){
paddleX += 7;
}
else if(leftPressed && paddleX > 0){
paddleX -= 7;
}
x += dx;
y += dy;
}
interval = setInterval(draw, 10);
</script>
</body>
</html>
de mon côte je travaille avec sublime texte du coup j'ai pas de console
Re bonjour dans la console de ton navigateur qui execute le code et renvoi des retour ( des erreurs quand il en trouve ) ,
sous window F12 pour ouvrir la console de dévelopement du navigateur ( onglet console )
ou click droit -> inspecter
isolé ton code dans un fichier un langage pourrait te permettre de te repérer plus facilement dans des fichiers plus léger et mieux organisé ces toi qui décide en principe ça ne change rien au côté fonctionnel quoique tu pourra ré utilisé un code isolé plus facilement .
Merci pour votre j'ai désinstaller Mozilla puis j'ai réinstaller pour pouvoir continue et j'ai pu finir le tuto mais je suis bloqué pour l’améliorer
tout d'abord je voudrais faire en sorte que la balle s’arrête après avoir perdu une vie et ne ce mais en fonction qu’après avoir cliqué sur le clavier ou la souris et ensuite je sais pas pourquoi mais je n'arrive pas a faire en sorte que le GAME OVER reste sur l'ecrant jusqua ce que je clicl il apparet puis disparée en un instant.
et j'ai décider d'isoler les code dans une page par langage.
Merci pour votre aide voici le code que j'ai fait :
le game over disparait immédiatement parce que tu fait un reload du document juste après avoir affiché le game over , line 153 - 154
// passe de display none à display flex ( affiche la boîte )
gameOverNotify.style.display = "flex";
// recharge le document perte de l'état local
document.location.reload();
si tu veut que la balle s'arrête lorsque que l'utilisateur perd une vie , et bien il faut l'écrire ...
// ...
else {
// ici le compteur de vie étant décrémenté j'imagine que l'utilisateur à perdu une vie
lives--;
// ici stoppé le mouvement de la balle
if (!lives) {
gameOverNotify.style.display = "flex";
document.location.reload();
}
}
tu peut juste déclaré un boolean qui détermine le re dessin de ta ball et appellé la fonction de dessin de la ball uniquement lorsque il et vraie mais il faudrait une action ( où au moins un temps écoulé ) entre le moment où l'utilisateur perd une vie et le moment où la balle se "remet à bougé" sinon elle reste "bloqué" écran fixe pour illustré :
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeigth = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var rightPressed = false;
var leftPressed = false;
var brickRowCount = 5;
var brickColumnCount = 3;
var brickWidth = 75;
var brickHeigth = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;
var gameOverNotify = document.querySelector('.game-over-notify');
var score = 0;
var lives = 3;
var bricks = [];
for(var c = 0; c < brickColumnCount; c++){
bricks[c] = [];
for (var r = 0 ; r < brickRowCount; r++ ){
bricks[c][r] = {x : 0 , y : 0, status: 1};
}
}
var isDrawBall = true ; // variable qui determine si la ball doit être re dessinné entre 2 frame ( ce qui créé sont mouvement )
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
gameOverNotify.addEventListener("click", function(){
document.location.reload();
});
document.addEventListener("mousemove", mouseMoveHandler , false);
function keyDownHandler(e){
if(e.keyCode == 39){
rightPressed = true;
}
else if(e.keyCode == 37){
leftPressed = true;
}
}
function keyUpHandler(e){
if(e.keyCode == 39){
rightPressed = false;
}
else if(e.keyCode == 37){
leftPressed = false;
}
}
function mouseMoveHandler(e){
var relativeX = e.clientX - canvas.offsetLeft;
if (relativeX > 0 && relativeX < canvas.width) {
paddleX = relativeX - paddleWidth/2;
}
}
function CollisionDetection(){
for(var c = 0; c < brickColumnCount; c++){
for(var r = 0; r < brickRowCount; r++){
var b = bricks[c][r];
if(b.status == 1){
if(x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeigth){
dy = -dy;
b.status = 0;
score++;
if (score == brickRowCount * brickColumnCount){
alert("You Win, Satisfaction!");
document.location.reload();
}
}
}
}
}
}
function drawScore(){
ctx.font = "16px Arial";
ctx.fillStyle = "#0095DD";
ctx.fillText("Score : " + score , 8 , 20);
}
function drawLives(){
ctx.font = "16px Arial";
ctx.fillstyle = "#0095DD";
ctx.fillText("Lives : " + lives , canvas.width - 65, 20);
}
function drawBall(){
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawPaddle(){
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeigth, paddleWidth, paddleHeigth);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function drawBricks(){
for (var c = 0; c < brickColumnCount; c++){
for (var r = 0; r < brickRowCount; r++){
if(bricks[c][r].status == 1){
var brickX = (r*(brickWidth + brickPadding))+ brickOffsetLeft * 1.2;
var brickY = (c*(brickHeigth + brickPadding))+ brickOffsetTop;
bricks[c][r].x = brickX;
bricks[c][r].y = brickY;
ctx.beginPath();
ctx.rect(brickX, brickY, brickWidth, brickHeigth);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
}
}
}
function draw(){
ctx.clearRect(0, 0, canvas.width , canvas.height);
drawBricks();
if( isDrawBall ) {
// on re dessine la balle seulement si isDrawBall et vraie
drawBall();
}
drawPaddle();
drawScore();
drawLives();
CollisionDetection();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius){
dx = -dx;
}
if(y + dy < ballRadius){
dy = -dy;
}
else if (y + dy > canvas.height - ballRadius){
if (x > paddleX && x < paddleX + paddleWidth) {
dy = -dy;
}
else {
lives--;
isDrawBall = false; // arrête le re dessin de la balle car l'utilisateur à perdu une vie ( la balle n'a plus de mouvement )
if (!lives) {
gameOverNotify.style.display = "flex";
document.location.reload();
}
else{
x = canvas.width/2;
y = canvas.height-30;
dx = 3;
dy = -3;
paddleX = (canvas.width-paddleWidth)/2;
}
}
}
if(rightPressed && paddleX < canvas.width-paddleWidth){
paddleX += 7;
}
else if(leftPressed && paddleX > 0){
paddleX -= 7;
}
x += dx;
y += dy;
requestAnimationFrame(draw);
}
draw();
il manquera à cela la mécanique pour faire repartir la balle après avoir perdu une vie mais cela ce traduira avec ce code à juste changé la valeur d'un boolean isDrawBall si la variable et true on re déssine la ball entre 2 frame ( la balle et en mouvement ) sinon on la re déssine pas ( la balle et à l'arrêt ) .
- Edité par SamuelGaborieau3 31 janvier 2020 à 19:56:06
Je vois merci beaucoup pour l'aide que vous m'avez donnez désoler pour cette réponse en retard
et je voulais demandez si par exemple je veux générer aléatoirement un objet qui tombe qui disparée quand elle touche autre chose que le paddle ou quand elle touche le paddle change la taille ou la vitesse de celle-ci
je doit crée la fonction de l'objet mais quelle sont les modification a faire dans le paddleDraw ainsi que le Draw.
et aussi je ne sais pas pourquoi mais j'ai encore le bug qui fait que rien ne s’affiche sur la page a part le canvas j'ia ouvert l'inspecteur de mozilla et sa me donne une erreur de type canvas is null j'ai fait un link dans le head avec la syntaxe
<script src = "Brise_block.js"></script>
mais toujours rien et quand je le mets dans le body après le canvas sa me dit que c'est le game over qui à un probleme.
sinon merci de m'avoir aidée jusqu'a maintenant merci bonne journée.
- Edité par ibrahim lebond 11 février 2020 à 15:00:10
Jeux Brise - Block
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.
suggestion de présentation.