Javascript 对球执行投射运动时出错

我试着做一个练习，在这个练习中，我必须对一个点击产生的球实施投射运动，每次它碰到边缘时，速度必须降低10%，并且应该反转方向

我认为x轴上的运动和摩擦都很好，但我不能使y轴上的摩擦正常工作

全球变量：

  {
      ctx: null,
      screenWidth: window.innerWidth - 50,
      screenHeight: window.innerHeight - 50,
      ballsArray: [],
      gravity: -10
  }

绘制方法：

    draw() { //draw ball logic
      this.ctx = document.getElementById("myCanvas").getContext("2d");
      this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);

      //for each ball in the array
      this.ballsArray.forEach(ball => {
        this.ctx.beginPath();
        this.ctx.fillStyle = ball.color;

        ball.time += 0.01;

        //saves new position for each axis
        let newPosX = ball.posX + ball.velX * ball.time;
        let newPosY =
          ball.posY + ball.velY - 0.5 * this.gravity * Math.pow(ball.time, 2);

        //checks if in the new position the ball will collide with margins
        //if so, it must slows down and get the inverse direction
                 if ( //colision on x axis
          newPosX <= ball.radius ||
          newPosX >= this.screenWidth - ball.radius
        ) {
          ball.velX = -ball.velX * 0.9;
        }
        if (newPosY <= ball.radius) { //colision on top
          // ball.velY = Math.abs(ball.velY * 0.9);
          ball.velY = -ball.velY * 0.9;
        }
        if (newPosY >= this.screenHeight - ball.radius) { //colition on bottom
          // ball.velY = -Math.abs(ball.velY * 0.9);          
          ball.velY = -ball.velY * 0.9;
        }

        //updates de new position for each axis
        newPosX = ball.posX + ball.velX * ball.time;
        newPosY =
          ball.posY + ball.velY - 0.5 * this.gravity * Math.pow(ball.time, 2);

        //assigns the new positions to the position
        ball.posX = newPosX;
        ball.posY = newPosY;

                //draws the ball
        this.ctx.arc(ball.posX, ball.posY, ball.radius, 0, Math.PI * 2);
        this.ctx.closePath();
        this.ctx.fill();
      });

Jsfiddle：

---

如你所见，球穿过底部边缘。我不确定问题是出在方程式上还是碰撞检测本身上。

这是可行的，但有以下修改。希望有帮助

我不知道这部分应该如何工作，所以我简化了它。 我对如何使用原始值感兴趣

  let newPosY =
          ball.posY + ball.velY - 0.5 * this.gravity * Math.pow(ball.time, 2);

简化为

 let newPosY = ball.posY + ball.velY * ball.time

工作

而且这些看起来像是错误

错误

发件人：velX

if (newPosY <= ball.radius) { //collision on top
      // ball.velY = Math.abs(ball.velY * 0.9);
      ball.velY = -ball.velX * 0.9;
    }

if (newPosY >= this.screenHeight - ball.radius) { //collision on bottom
  // ball.velY = -Math.abs(ball.velY * 0.9);          
  ball.velY = -ball.velX * 0.9;
}

if（newPosY=this.screenHeight-ball.radius）{//底部碰撞
//ball.velY=-Math.abs（ball.velY*0.9）；
ball.velY=-ball.velX*0.9；
}

改为

 if (newPosY <= ball.radius) { //colision on top
          // ball.velY = Math.abs(ball.velY * 0.9);
          ball.velY = -ball.velY * 0.9;  //correction
        }

 if (newPosY >= this.screenHeight - ball.radius) { //colition on bottom
          // ball.velY = -Math.abs(ball.velY * 0.9);          
          ball.velY = -ball.velY * 0.9;   //correction
        }

if（newPosY=this.screenHeight-ball.radius）{//colion在底部
//ball.velY=-Math.abs（ball.velY*0.9）；
ball.velY=-ball.velY*0.9；//更正
}

它确实有效，始终与底部边缘对齐，但它不再根据投射物的运动而移动，这是要点。谢谢你指出错误。你从哪里得到关于抛射运动的信息？

 if (newPosY <= ball.radius) { //colision on top
          // ball.velY = Math.abs(ball.velY * 0.9);
          ball.velY = -ball.velY * 0.9;  //correction
        }

 if (newPosY >= this.screenHeight - ball.radius) { //colition on bottom
          // ball.velY = -Math.abs(ball.velY * 0.9);          
          ball.velY = -ball.velY * 0.9;   //correction
        }