javascript: le jeu de pong ne rebondira pas sur l'écran du bas

Question

Im créer un jeu de pong et je suis arrivé au point où la balle rebondit sur trois des murs, mais quand j'ai essayé de le faire rebondir sur le mur du fond juste passe devant, puis comme 5 secondes plus tard, il revient

<canvas id="pg" width = "800" height = "600"> 
 
    <script> 
 
    var c; 
 
    var cc; 
 
    var ballx = 50; 
 
    var ballY = 50; 
 
    var ballSpeedX = 1.5; 
 
    var ballSpeedY = 4; 
 

 
    window.onload = function(){ 
 
     c = document.getElementById("pg"); 
 
     cc = c.getContext("2d"); 
 

 
     var fps = 180; 
 
     setInterval(function(){ 
 
     move(); 
 
     draw(); 
 
     },1000/fps) 
 
    } 
 

 
    function move(){ 
 
     ballx += ballSpeedX 
 
     if(ballx < 0) { 
 
     ballSpeedX = -ballSpeedX; 
 
     } 
 
     if(ballx > c.width) { 
 
     ballSpeedX = -ballSpeedX; 
 
     } 
 
     ballY += ballSpeedY 
 
     if(ballY < 0) { 
 
     ballSpeedY = -ballSpeedY; 
 
     } 
 
     if(ballx > c.height) { 
 
     ballSpeedY = -ballSpeedY; 
 
     } 
 

 
    } 
 
    function draw(){ 
 
     colorRect(0,0,c.width,c.height,"black"); 
 
     colorRect(10,210,5,100,"white"); 
 
     colorCircle(ballx,ballY,10,"white") 
 

 
    } 
 
    function colorCircle(centerX, centerY, radius, drawColor){ 
 
     cc.fillStyle = drawColor 
 
     cc.beginPath(); 
 
     cc.arc(centerX, centerY,5,0,Math.PI*2,true); 
 
     cc.fill(); 
 
    } 
 
    function colorRect(leftX,topY,width,height,drawColor){ 
 
     cc.fillStyle = drawColor; 
 
     cc.fillRect(leftX,topY,width,height); 
 
    } 
 
    </script> 
 
</canvas>

Answer 1

Vous avez une petite faute de frappe dans votre fonction move:

// The last if should check if ballY > c.height instead 
if(ballx > c.height) { 
    ballSpeedY = -ballSpeedY; 
} 

<canvas id="pg" width = "800" height = "600"> 
 
    <script> 
 
    var c; 
 
    var cc; 
 
    var ballx = 50; 
 
    var ballY = 50; 
 
    var ballSpeedX = 1.5; 
 
    var ballSpeedY = 4; 
 

 
    window.onload = function(){ 
 
     c = document.getElementById("pg"); 
 
     cc = c.getContext("2d"); 
 

 
     var fps = 180; 
 
     setInterval(function(){ 
 
     move(); 
 
     draw(); 
 
     },1000/fps) 
 
    } 
 

 
    function move(){ 
 
     ballx += ballSpeedX 
 
     if(ballx < 0) { 
 
     ballSpeedX = -ballSpeedX; 
 
     } 
 
     if(ballx > c.width) { 
 
     ballSpeedX = -ballSpeedX; 
 
     } 
 
     ballY += ballSpeedY 
 
     if(ballY < 0) { 
 
     ballSpeedY = -ballSpeedY; 
 
     } 
 
     if(ballY > c.height) { 
 
     ballSpeedY = -ballSpeedY; 
 
     } 
 

 
    } 
 
    function draw(){ 
 
     colorRect(0,0,c.width,c.height,"black"); 
 
     colorRect(10,210,5,100,"white"); 
 
     colorCircle(ballx,ballY,10,"white") 
 

 
    } 
 
    function colorCircle(centerX, centerY, radius, drawColor){ 
 
     cc.fillStyle = drawColor 
 
     cc.beginPath(); 
 
     cc.arc(centerX, centerY,5,0,Math.PI*2,true); 
 
     cc.fill(); 
 
    } 
 
    function colorRect(leftX,topY,width,height,drawColor){ 
 
     cc.fillStyle = drawColor; 
 
     cc.fillRect(leftX,topY,width,height); 
 
    } 
 
    </script> 
 
</canvas>