如何在JavaScript中使用重力彈跳球 -

Question

我想從一個球在畫布上來回跳動，以便有一定的重力並最終下降。 我知道我需要改變速度，當它到達底部，但我不知道這應該如何完成和編碼。

我是一個全新的JS學生，沒有物理學背景 - 這會是多麼困難？我很高興學習等。我試圖讓球碰撞並以正確的角度脫落，但現在看起來似乎高於我。

var canvas, 
    ctx, 
    cx = 100, 
    cy = 150, 
    vx = 0, 
    vy = 5, 
    radius = 30; 

function init() { 

    canvas = document.getElementById("gameCanvas"); 
    ctx = canvas.getContext("2d"); 

    circle(); 
} 

function circle() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    requestAnimationFrame(circle); 

    if (cx + radius > canvas.width || cx - radius < 0) 
    vx = -vx; 
    if (cy + radius > canvas.height || cy - radius < 0) 
    vy = -vy; 

    cx += vx; 
    cy += vy; 
} 

我取出CX運動只是向上/向下動畫和空間 圈抽籤碼會是什麼下一步？

我會乘上它的當前速度一個數字如0.8在碰撞和在哪裏/如何？

原諒基本/可怕的書面代碼 - 必須從某處開始！

Answer 1

你非常接近，把重力看作是一個不斷向下的速度增量，所以在每一步中你都需要把它加到你的計算中。

「我知道我需要在它到達底部更改速度」`

，由於重力影響對象的所有的時間是不正確的。當你碰到底部時，會發生材料阻尼和表面摩擦等事情。

var canvas, 
 
    ctx, 
 
    cx = 100, 
 
    cy = 100, 
 
    vx = 2, 
 
    vy = 5, 
 
    radius = 5, 
 
    gravity = 0.2, 
 
    damping = 0.9, 
 
    traction = 0.8, 
 
    paused = false; 
 
    ; 
 

 
function init() { 
 

 
    canvas = document.getElementById("gameCanvas"); 
 
    ctx = canvas.getContext("2d"); 
 
    
 
    canvas.width = 300; 
 
    canvas.height = 150; 
 

 
    circle(); 
 
} 
 

 
function circle() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (!paused) 
 
    requestAnimationFrame(circle); 
 

 
    if (cx + radius >= canvas.width) { 
 
    vx = -vx * damping; 
 
    cx = canvas.width - radius; 
 
    } else if (cx - radius <= 0) { 
 
    vx = -vx * damping; 
 
    cx = radius; 
 
    } 
 
    if (cy + radius >= canvas.height) { 
 
    vy = -vy * damping; 
 
    cy = canvas.height - radius; 
 
    // traction here 
 
    vx *= traction; 
 
    } else if (cy - radius <= 0) { 
 
    vy = -vy * damping; 
 
    cy = radius; 
 
    } 
 

 
    vy += gravity; // <--- this is it 
 

 
    cx += vx; 
 
    cy += vy; 
 

 
    ctx.beginPath(); 
 
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false); 
 
    ctx.fillStyle = 'green'; 
 
    ctx.fill(); 
 
} 
 

 
init(); 
 

 
// fancy/irrelevant mouse grab'n'throw stuff below 
 
canvas.addEventListener('mousedown', handleMouseDown); 
 
canvas.addEventListener('mouseup', handleMouseUp); 
 

 
function handleMouseDown(e) { 
 
    cx = e.pageX - canvas.offsetLeft; 
 
    cy = e.pageY - canvas.offsetTop; 
 
    vx = vy = 0; 
 
    paused = true; 
 
} 
 

 
function handleMouseUp(e) { 
 
    vx = e.pageX - canvas.offsetLeft - cx; 
 
    vy = e.pageY - canvas.offsetTop - cy; 
 
    paused = false; 
 
    circle(); 
 
}

canvas {border: 1px solid black; cursor: crosshair;} 
 
p {margin: 0;}

<canvas id="gameCanvas"></canvas> 
 
<p>Throw the ball by holding and releasing the left mouse button on the canvas (reverse slingshot)</p>