为动画添加重力

Question

我正在尝试了解如何在我的动画中添加一些物理学，例如重力和风。我无法完全理解如何让这个球像有重力一样弹跳……每次更新我都在累积力，将其应用于速度，然后清除力。但我能想到让它反弹的唯一方法是改变 Y 方向..但它会继续前进，直到它到达顶部。我有什么明显的遗漏吗？任何建议表示赞赏。感谢阅读

var C, canvas, context = null;
var gravity = {x:0, y:1};
var wind = {x:0.4, y:0};
var height = 140;
var width = 300;

function Ball(x,y,w,h) {
  var ball = this;
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;
  this.xVelocity = 0;
  this.yVelocity = 0;
  this.xDirection = 1;
  this.yDirection = 1;
  
  this.update = function() {
  	ball.applyForce(gravity);
   	//ball.applyForce(wind);
  	
    ball.x += (ball.xVelocity * ball.xDirection);
   	ball.y += (ball.yVelocity * ball.yDirection);
    
    if((ball.x + ball.w) >= width) {
    	//ball.xDirection = -1;
        ball.x = width - ball.w / 2 ;
        ball.xVelocity = -ball.xVelocity
    } else if(ball.x <= 0) {
    	//ball.xDirection = 1;
        ball.xVelocity = ball.xVelocity
    }
    
    if((ball.y + ball.h) >= height) {
    	//ball.yDirection = -1;
        ball.y = height - ball.w;
        ball.yVelocity = -ball.yVelocity
    } else if(ball.y <= 0) {
    	  //ball.yDirection = 1;
        ball.yVelocity = ball.yVelocity
    }
    
    //ball.clearForces();
  }
  
  this.draw = function() {
   context.beginPath();
   context.arc(ball.x,ball.y,ball.w,0,2*Math.PI);
   context.stroke();
  }
  
  this.applyForce = function(force) {
		ball.xVelocity += force.x;
 		ball.yVelocity += force.y;
  }
  
  this.clearForces = function(force) {
		ball.xVelocity = 0;
 		ball.yVelocity = 0;
  }
}

function Canvas( ) {
var CV = this;
var balls = new Array();
balls.push(new Ball(100, 10, 10, 10));

  this.loop = function() {
		CV.update();
		CV.draw();
    window.requestAnimationFrame(CV.loop);
  }
  
  this.update = function() {
  	for(var i=0; i<balls.length; i++) {
    	balls[i].update();
    }
  }
  
  this.draw = function() {
  	context.clearRect(0, 0, width, height);
  	for(var i=0; i<balls.length; i++) {
    	balls[i].draw();
    }
  }
}


canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
C = new Canvas( );
C.loop();

#canvas {border:1px solid #d4d4d4; }

<canvas id="canvas" width="300" height="140"></canvas>

Answer 1

在运动学中，简单运动有时可以表示为v(t) = aΔt，其中v 是t 秒的速度，aΔt 是加速度乘以间隔Δt。

模拟这种情况的一种方法可能是将ball.yVelocity 组件计算为(-someAcceleration) * someTimeIndex 或执行类似的函数 var ball.yVelocity = ball.yVelocity - someFactor 每个循环。

编辑 1： 我还将设置一个单独的变量，如yVelocityAbs 以处理ball.yVelocity 的大小，以免每次球反弹时都搞砸你的方向。祝你好运！

编辑 2： 尝试像这样更新您的 clearForces() 函数：

this.clearForces = function(force) {
         ball.xVelocity = 0;
        //ball.yVelocity = 0;
  }

它应该工作！尽管是一个相当笨拙的表示，但模拟应该更适合。不过，我建议添加一些重置球的功能。