弹跳球重置到所需位置但不移动

Question

我正在尝试制作壁球游戏，我认为设置球的运动是一个不错的起点。我已经设法让球按照我想要的方式弹跳，它从左上角的 50px 处掉落，弹跳两次，然后重置回它开始的位置。球不会在重置后继续移动，而是停留在距离上角 50 像素的位置。
为什么重置后球不动了？我如何让球从重置中移动？
从这里我想设置一个事件侦听器以重新启动球下降到 "serve" 之后再次球。任何关于把它放在哪里的建议都很棒。这是我第一次尝试编写自己的游戏代码，所以请记住我是一个彻头彻尾的菜鸟。

这是我的 canvas 代码。

<html>
<title>Squash Game V1</title>

<h1>Squash</h1>

 <canvas id="gameCanvas" width=800 height=600></canvas>

 <script>

 var canvas;
 var canvasContext;
 var ballX = 50;
 var ballY = 50;
 var gravity = 0.2;
 var bounceFactor = 0.6;
 var ballSpeedX = 3;
 var ballSpeedY = 10;
 var ballSpeedY2 = 5;
 var ballBounce = 0
 var ballStartPos = 50
 const resistence = 0.998
 const ballWidth = 15;


 window.onload = function() {

 canvas = document.getElementById('gameCanvas');
 canvasContext = canvas.getContext('2d');

 var framesPerSecond = 60;
 setInterval(function() {
 moveEverything();
 drawEverything();


 }, 1000/framesPerSecond);
 }



 function ballReset() { 
 ballX = ballStartPos;
 ballY = ballStartPos;
             }



 function moveEverything() {



 // this moves ball down
 ballY += ballSpeedY;

 // this moves the ball across 
 ballX += ballSpeedX;

 // this speeds ball up as it's falling plus slows down making it fall  

 ballSpeedY += gravity;
 ballSpeedX = ballSpeedX*resistence;


 //this bounes the ball
 if (ballY > canvas.height - ballWidth) {
 ballSpeedY = -ballSpeedY
 //this reduces height of the bounce
 ballSpeedY *= bounceFactor;}

 //this should count bounces
 if (ballY > canvas.height - ballWidth){
 ballBounce = ballBounce + 1;
 }



 //ball will bounce of right wall 
 if (ballX > canvas.width - ballWidth) {
 ballSpeedX = -ballSpeedX}

 //ball will bounce off left wall 
 if (ballX < 0 + ballWidth) {
 ballSpeedX = -ballSpeedX}

 if (ballBounce >= 2) {
 ballReset()}


 }


 function drawEverything() {
 //this draws the pong court
 colourRect(0,0,canvas.width,canvas.height, 'black');

 //this draws the ball
 colourCircle(ballX, ballY, 10, "white")



 function colourCircle(centreX, centreY, radius, drawColour) {
 canvasContext.fillStyle = drawColour;
 canvasContext.beginPath();
 canvasContext.arc(centreX, centreY, radius, 0,Math.PI*2, true)
 canvasContext.fill();
 }

        //this function draws a rectangle
        function colourRect(leftX, topY, width, height, drawColour) {
            canvasContext.fillStyle = drawColour;
        canvasContext.fillRect(leftX, topY, width, height);

        } }

</script>

</html>

Answer 1

球停止弹跳，因为您当前的代码在第二次弹跳后不断调用 ballReset()。您应该在重置方法中重置 ballBounce 计数器以使其保持弹跳。 Fiddle

function ballReset() {
     ballX = ballStartPos;
     ballY = ballStartPos;
     ballBounce = 0; // Added code
 }

弹跳球重置到所需位置但不移动

Bouncing ball resets to desired position but does not move

javascript

animation

canvas

html5-canvas