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

【问题标题】：Bouncing ball resets to desired position but does not move弹跳球重置到所需位置但不移动
【发布时间】：2016-03-02 14:38:58
【问题描述】：

我正在尝试制作壁球游戏，并认为设置球的运动是一个不错的起点。我设法让球以我想要的方式弹跳，它从左上角 50 像素处下降，弹跳两次，然后重置回它开始的位置。重置后球不会继续移动，而是停留在距离顶角 50px 处。
为什么复位后球不动？如何让球从重置中移动？
从这里我想设置一个事件侦听器来重新开始投球，然后再次“发球”。任何关于在哪里放置的建议都会很棒。这是我第一次尝试编写自己的游戏，所以请记住我是一个完全的菜鸟。

这是我的画布代码。

<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>

【问题讨论】：

标签： javascript animation canvas html5-canvas

【解决方案1】：

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

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

【讨论】：

可能也想重置速度