Bug jeux javascript alert document.location.reload

amaury -  
 amaury -
Bonjour,
j'ai un problème avec les jeux que j'ai programmer ( casse-briques ) après une défaite un alert annonce games over puis la page est censé être recharger pour reprendre à 0 cependant on est obligé de fermé la boite d'alert une dizaine de fois avant que la page se recharge j'aimerai savoir comment y remédier.
l'alert qui pose problème est situé a 10 lignes de la fin du programme

merci d'avance
voici mon code : 

var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var y = canvas.width/2;
   var x = canvas.height-30;
   var dx = 4;
   var dy = -4;
   var ballradius = 10;
   var paddleheight = 10;
   var paddlewidth = 75;
   var paddleX = (canvas.width-paddlewidth)/2;
   var rightpressed = false;
   var leftpressed = false;
   var brickRowCount = 6;
   var brickColumnCount = 10;
   var brickWidth = 75;
   var brickHeight = 20;
   var brickPadding = 10;
   var brickOffsetTop = 30;
   var brickOffsetLeft = 30;
   var score = 0;
   
   
   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);
   document.addEventListener("mousemove",mouseMoveHandler,false);
   
   function mouseMoveHandler(e){
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0 && relativeX < canvas.width){
     paddleX = relativeX-paddlewidth/2;
    }
   }
   
   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+brickHeight){
        dy = -dy;
        b.status = 0
        score++;
        if(score == brickColumnCount*brickRowCount){
         alert("vous avez gagné");
         document.location.reload();
        }
       }
      }
     }
       }
   }
   
   function drawscore(){
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("score : " + score, 8, 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-paddleheight, paddlewidth, paddleheight);
    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 = (c*(brickWidth+brickPadding))+brickOffsetLeft;
       var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
       bricks[c][r].x = brickX;
       bricks[c][r].y = brickY;
       ctx.beginPath();
       ctx.rect(brickX, brickY, brickWidth, brickHeight);
       ctx.fillStyle = "#0095DD";
       ctx.fill();
       ctx.closePath();
      }
     }
    }
   }
   
   function draw(){
    ctx.clearRect(0,0 ,canvas.width ,canvas.height)
    drawbricks();
    drawball();
    drawpaddle();
    drawscore();
    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{
      alert("game over");
      document.location.reload();
     }
    }
    
    if(rightpressed && paddleX < canvas.width-paddlewidth) {
        paddleX += 7;
    }
    else if(leftpressed && paddleX > 0) {
     paddleX -= 7;
    }
    
    x += dx;
    y += dy;
    requestAnimationFrame(draw);
   }
   
   draw();

**Modifié par la modération pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE

Configuration: Macintosh / Safari 12.0.2

2 réponses

  1.
    SioGabx Messages postés 260 Date d'inscription   Statut Membre Dernière intervention   100
     
    Alors déjà colle ton code dans des balise code du forum (<code html>) et sa fermeture avec le /.

    Et surtout met le code COMPLET de ta page (html; css;js)...
    0
  2. amaury
     
    <!doctype html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>case bricks</title>
		<style>
			
			*{
				padding: 0;
				margin: 0;
			}
		
			canvas{
				background-color: #EEEEEE;
				display: block;
				margin: 0 auto;
			}
			
			input{
				display: inline-block;
				padding: 20px;
			}

		</style>
	</head>
	<body>
		
		<canvas id="canvas" width="910px" height="640px"></canvas>
		
		<script>
			
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			var y = canvas.width/2;
			var x = canvas.height-30;
			var dx = 4;
			var dy = -4;
			var ballradius = 10;
			var paddleheight = 10;
			var paddlewidth = 75;
			var paddleX = (canvas.width-paddlewidth)/2;
			var rightpressed = false;
			var leftpressed = false;
			var brickRowCount = 6;
			var brickColumnCount = 10;
			var brickWidth = 75;
			var brickHeight = 20;
			var brickPadding = 10;
			var brickOffsetTop = 30;
			var brickOffsetLeft = 30;
			var score = 0;
			
			
			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);
			document.addEventListener("mousemove",mouseMoveHandler,false);
			
			function mouseMoveHandler(e){
				var relativeX = e.clientX - canvas.offsetLeft;
				if(relativeX > 0 && relativeX < canvas.width){
					paddleX = relativeX-paddlewidth/2;
				}
			}
			
			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+brickHeight){
								dy = -dy;
								b.status = 0
								score++;
								if(score == brickColumnCount*brickRowCount){
									alert("vous avez gagné");
									document.location.reload();
								}
							}
						}
					}
    			}
			}
			
			function drawscore(){
				ctx.font = "16px Arial";
				ctx.fillStyle = "#0095DD";
				ctx.fillText("score : " + score, 8, 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-paddleheight, paddlewidth, paddleheight);
				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 = (c*(brickWidth+brickPadding))+brickOffsetLeft;
							var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
							bricks[c][r].x = brickX;
							bricks[c][r].y = brickY;
							ctx.beginPath();
							ctx.rect(brickX, brickY, brickWidth, brickHeight);
							ctx.fillStyle = "#0095DD";
							ctx.fill();
							ctx.closePath();
						}
					}
				}
			}
			
			function draw(){
				ctx.clearRect(0,0 ,canvas.width ,canvas.height)
				drawbricks();
				drawball();
				drawpaddle();
				drawscore();
				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{
						alert("game over");
						document.location.reload();
					}
				}
				
				if(rightpressed && paddleX < canvas.width-paddlewidth) {
    				paddleX += 7;
				}
				else if(leftpressed && paddleX > 0) {
					paddleX -= 7;
				}
				
				x += dx;
				y += dy;
				requestAnimationFrame(draw);
			}
			
			draw();
			
		</script>
	</body>
</html>
    0
    1. amaury
       
      désolé de la perte de temps je n'arrivais pas a effectuer se que vous demandiez
      0

Discussions similaires

application JAVA sur telephone portable !!!!
julio -
lehon kabre -

43 réponses
Java : Jeux gratuits à télécharger !
undertaker3 -
neogenesis -

1 réponse
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Iptv beug
leogauthier15 -
bazfile -

1 réponse
Jeux sur itel it6800
deniseprisk -
Abel -

4 réponses