Отскок мяча в холсте

Question

Я пытаюсь сделать мяч отскоком внутри холста, и он не работает. Мяч застревает у «стен», и я не понимаю, почему. Кто-нибудь знает, как я могу это исправить?

var can = document.querySelector("canvas"); 
var ctx = can.getContext("2d"); 

var canvasWidth = 500; 
var canvasHeight = 400; 

var radius = 30; 
var pX = 60; 
var pY = 50; 

function draw() { 
    ctx.clearRect(0, 0, canvasWidth, canvasHeight); 
    ctx.beginPath(); 
    ctx.fillStyle = "red"; 
    ctx.arc(pX, pY, radius, 0, Math.PI * 2, false); 
    ctx.fill(); 
    ctx.closePath(); 
} 


function animate() { 

    var vX = 3; 
    var vY = 3; 

    if (pY >= canvasHeight - radius) { 
     vY = -vY; 
    } 


    if (pX >= canvasWidth - radius) { 
     vX = -vX; 
    } 

    pX += vX; 
    pY += vY; 

    draw(); 
    requestAnimationFrame(animate); 
} 

animate(); 

Answer 1

Ваши условия обнаружения столкновений учитывают только нижнюю стену и правую стену. Вам нужно добавить условия для верхней стены и левой стены. Что-то вроде

if (pY >= canvasHeight - radius || pY <= radius) { 
    vY = -vY; 
} 


if (pX >= canvasWidth - radius || pX <= radius) { 
    vX = -vX; 
} 

---

Вы видите странное поведение с вашим обнаружением коллизий, так как Vx и Vy локально объявлены и инициализированы в неживой. Это означает, что каждый раз, когда вызывается анимация, он будет повторно инициализирован.

Просто перемещайте объявления vX и vY из функции анимации.

EDIT: JsFiddle если вы хотите увидеть его в действии: http://jsfiddle.net/y45fhko7/