터치팡팡(a.k.a개미잡기) 개발강좌(3) - 캔버스에 공을 움직여 보자.

1 minute read

html5의 캔버스(canvas)를 이용하여 터치팡팡게임을 만드는 과정을 소개합니다. a.k.a 개미잡기
완성된 게임은 터치팡팡 <- 링크를 통해 확인할수 있다.




캔버스위에 공을 움직여 보자.

먼저 코드펜에 작성된 샘플을 보자~!

See the Pen canvas 005 by mnmsoft (@mnmsoft) on CodePen.

자유자재로 움직이지는 않치만 일단 우리가 그린 공이 오른쪽으로 움직이고 있다. 붉은 태양이 움직이는거 같치 않는가 ㅡ,.ㅡ;
소스코드를 보자.

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

계속 해왔듯이 canvas태그를 셀렉하고 2d컨텍스트를 가져온다.

function toRadian(d){
  return Math.PI/180*d;
}

이전 강좌에서 다른 내용으로 라디안 각도를 가져오기 위한 함수를 미리 만들어 두었다.

let x = 30;

붉은 원의 좌표를 계속 변경해주기 위해 let을 통해 x란 변수를 선언하고 기본값으로 30을 넣어주었다.

  if (x >= 200){
    x = 30
  }

x좌표가 끝도 없이 늘어나게 되면 화면 밖으로 나가기 때문에 200이 넘으면 30으로 초기화 시켜준다.

function render(){
  x = x + 1;
  
  ctx.clearRect(0,0,canvas.width,canvas.height);
  
  ctx.beginPath();
  ctx.fillStyle = "rgb(255,0,0)"; ctx.arc(x,30,30,toRadian(0),toRadian(360),false);
  ctx.fill();
  requestAnimationFrame(render);
}

기본이랑 다르게 함수를 하나 만들어서 함수에서 원을 그리고 있는데… 하나씩 뜯어 보자!

  x = x + 1;

이함수는 재귀 함수로 계속 자기를 호출하는 함수가 될것이다. 대부분 애니메이션처리를 하기 위해 이런식으로 재귀함수를 반복적으로 호출하여 움직임을 표현한다고 보면 된다.

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

새로나온 내용이다.
clearRect는 화면을 지워주는 함수다.
매개변수를 보면
(시작x좌표,시작y좌표,끝x좌표,끝y좌표)
기본적으로 함수를 반복하여 호출하면서 그림을 그리게 되면 이전 그림이 잔상으로 남아 있기 때문에 움직인는 원이 아닌 다른 표현이된다. clearRect를 제외한 예를 코드펜에서 보자

See the Pen canvas 006 by mnmsoft (@mnmsoft) on CodePen.

clearRect 의 중요성을 이해할것이라고 본다!

ctx.fillStyle = "rgb(255,0,0)"; ctx.arc(x,30,30,toRadian(0),toRadian(360),false);
ctx.fill();

원을 그리고 그것을 채워서 표현한다.

requestAnimationFrame(render);

또 새로운 내용이다. canvas 가 아닌 window객체가 제공하는 함수이며 애니메이션을 표현하기 위해 자주 사용되는 함수이다. render함수를 1초의 대략적으로 60번씩 호출되게 만든다.

window.load = render();

마지막으로 우리가 만든 함수를 모두 로딩이 되면 호출한다.

이렇게 공을 그려보았다.

공이라고 하기에는 허접한 면이 있지만 앞으로 저 공대신 이쁜 캐릭터를 넣어서 움직일것이니

잘 따라와 주길 바란다.

다음에 또 만나요~!

Leave a comment