캔버스에 튀는 공

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 선언을 애니메이션 기능 밖으로 옮기십시오. 당신이 행동을보고 싶다면 JsFiddle는 :

편집 http://jsfiddle.net/y45fhko7/