4. 충돌 감지
- 충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 한다.
var ballRadius = 10;
ctx.arc(x, y, ballRadius, 0, Math.PI*2);- ballRaius(원의 반지름) 변수를 선언하고 drawBall() 함수 안에 ballRadius를 넣는다.
4.1 위 아래 방향으로 튕기기
- 사각형에는 총 4개의 벽이 존재하고 공을 그리는 매 프레임마다 볼이 상 하 좌 우 모서리에 닿았는지 확인해야한다. 만약 공이 닿았다면 볼이 움직이는 방향을 반대로 바꾸어 사각형 안에 여전히 공이 보이도록 해야한다. (캔버스 내 위치 구조는 좌상단부터 시작한다)
if(y + dy < 0) {
dy = -dy; //상단 모서리
}- 만약 공의 위치에서 y값이 0보다 작은 경우 음/양수를 반대로 바꾸어주어 y축의 방향을 바꾼다.
if(y + dy > canvas.height){
dy = -dy; //하단 모서리
}-
공의 위치에서 y값이 캔버스의 높이보다 큰 경우(좌상단으로부터 y값을 측정) 상단모서리에서의 y값은 0, 하단모서리에서의 y값은 480이기 때문에 y축의 방향을 바꾼다.
-
위의 두가지 코드를 합치면 아래 코드와 같다.
if(y + dy < 0 || y + dy > canvas.height ) {
dy = -dy; // 상하4.2 좌 우 방향으로 튕기기
if(x + dx > canvas.width || x + dx < 0) {
dx = -dx; //좌우
}- 좌 우 방향은 y에 x를 넣으면 바로 완성이 된다!
4.3 문제점 !
- 상하좌우로 공이 튕겨지긴 하지만 그 기준을 공의 원점에 두고 계산했기 때문에 공이 반쯤 캔버스 밖으로 나갔다가 들어온다. 이 문제점을 해결하기 위해서는 원의 둘레를 기준으로 계산을 해야 공이 벽에 닿자마자 튕겨나오게된다.
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
dy = -dy;
}- 위에 코드와 같이 상하좌우 기존 코드에서 ballRadius(원의 반지름)을 넣어주면 문제점이 해결된다.
