자바스크립트 내공기르기 (2) - 공 충돌 만들기 -

자바스크립트 내공기르기 (2) 

- 공 충돌 만들기 -

충돌 코드를 마치 물리 엔진처럼 힘들게 생각하지 말자. 그냥 너비와 높이를 설정하고, 해당 경계선에 circle이 닿으면 방향을 반대로 진행하는 정도면 충분하다. 2d 그래픽 캔버스에서 충돌이란, 어차피 길이가 정해져 있는 캔버스의 height, width 값을 활용해서 양 극에 오브젝트가 접근하는 순간에 추가되고 있는 값을 반대 방향으로 전환하면 끝이다.

현재 캔버스의 크기는 width:800, height:600 이다. 여기서 주의해야 할 점은 웹 브라우저에서 ( 0, 0 )좌표가 좌측 상단이란 점에 주의하자. 항상 좌측 상단을 원점으로 width(우측방향) , height(아래방향)를 계산한다.

따라서 ball 오브젝트의 x,y값이 캔버스 width, height의 0값보다 작아지면, dx, dy의 값을 반대로 전환하는 방법을 사용한다.

1 『 방향 전환하기 』

현재 draw함수 구문은 아래와 같다.

---

function draw( ) {    

     ctx.clearRect( 0 , 0 , canvas.width , canvas.height );

     drawBall ( );

     x += dx;

     y += dy;

} 

---

위의 코드에 다음 if문을 추가한다.

---

if( y + dy < 0 || y + dy > canvas.height ){

        dy = -dy;

}

---

-> 공의 y값(사실상 캔버스 높이값)이 원점보다 작을 시 dy = -dy 값으로 전환시켜서 

양수=>음수, 음수=>양수로 벡터방향을 전환한다.

-> 공의 y값이 canvas의 높이값을 넘어설 경우 역시 위와 같이 처리한다. 공의 x값도 y값과 비슷하게 처리하려면 아래와 같은 구문이 추가해야 한다.

---

draw( ) { 

     ctx.clearRect( 0 , 0 , canvas.width, canvas.height);

   

     if ( y + dy < 0 || y + dy > canvas.height ) {

          dy = -dy;

}else if( x + dx < 0 || x + dx > canvas.width ) {

          dx = -dx;

}

     x += dx;

     y += dy; 

}

---

공의 x , y값이 canvas width와 height의 극에 다다르면 벡터값이 전환되면서 방향이 바뀐다.

 

2 『 반지름 계산 』 

공의 반지름 값을 적용한 캔버스 경계선 값을 계산해야만 정밀한 느낌의 충돌이 만들어진다. 공의 방향전환만으로는 문제가 발생한다. 캔버스가 공의 중심을 기준으로 계산하기 때문에 현실세계와 달리 공의 반지름이 캔버스 밖을 벗어난 상태로 충돌이 발생하기 때문이다. 따라서 공의 반지름은 충돌 x, y축에서 제외해야 한다.

 

-> var ballRadius=10;   //변수값 추가한다.

-> drawBall()함수에서 ctx.arc(x,y,ballRadius,0,Math.PI*2)로 변경한다.

---

// 충돌 코드

var canvas = document.getElementById('gameCanvas');

var ctx = canvas.getContext('2d');

var x = canvas.width/2;

var y = canvas.height-30;

var Radius = 10;

 

function drawBall( ){

     ctx.beginPath( );

     ctx.arc ( x, y, Radius, 0, Math.PI * 2);

     ctx.fillStyle = 'tomato';

     ctx.fill( );

     ctx.closePath( );

}

 function draw( ) { 

        ctx.clearRect ( 0, 0, canvas.width, canvas.height );

        if ( y + dy > canvas.height - ballRadius || y + dy < ballRadius ){

                   dy = -dy;

     }else if ( x + dx > canvas.width - ballRadius || x + dx < ballRadius ){

                  dx = -dx;

     }

    x += dx;

    y += dy;

}

---

위의 코드를 실행하면 아래와 같은 충돌이 발생하는 캔버스 벽이 생성된다.