JavaScriptGame

javascript game (2)

game, html5, js

잡담

이 포스팅은 한번 따라만 해보면 금방 잊어버리니간 되새김질을 하기 위해 작성하는 것이다. 잡담 끝!

본론으로 들어가보자.

Move the Ball

그리는 함수 정의하기

이번 튜토리얼부터 영어다… 후후후.. 내맘데로 번역이니 충분히 이상 할 수 있다.

먼저 지속적으로 반복하면서 canvas에 이미지를 그리는 함수를 정의하자. for-loop 보다 setInterval()을 사용하고, 마지막에는 requestAnimationFrame()으로 변경 할 것이다.

1
2
3
4
5
6
7
8
function draw() {
  ctx.beginPath();
  ctx.arc(50, 50, 10, 0, Math.PI*2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}
setInterval(draw, 10);

자, 이제 10ms 마다 draw() 함수가 실행되면서 좌표 (50, 50)에 반지름 10px의 원을 그리게 되었다. 실행해보자! 굉장히 재미없는 동그라미만 찍혀있다

움직이게 만들기

자, 움직이게 하기 위해서 무엇을 해야 할까? 이 부분을 살펴보자.

1
ctx.arc(50, 50, 10, 0, Math.PI*2);

좌표 (50, 50) 이 하드 코딩 되어 있다. 이 부분을 동적으로 바꿔주면 왠지 움직일 것 같지 않은가? 해보자.

변수를 추가해보자. 총 4개의 변수가 추가될껀데, 두 개는 초기 공의 좌표를 나타낼 x, y 와 공이 이동할 좌표인 dx, dy 이다.

1
2
3
4
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 2;
var dy = -2;

x는 canvas의 정 중앙으로, y는 canvas의 맨 아래에서 30px 만큼 띄운 상태를 공의 초기 값으로 설정하였다. dx는 오른쪽으로 2px 움직이고, dy는 위로 2xp 움직이도록 설정하였다.

그럼 draw() 함수를 수정해서 공이 움직이도록 만들어 보자.

1
2
3
4
5
6
7
8
9
function draw() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy;
}

draw() 함수가 실행할 때 마다 x와 y의 값이 변하면서 공이 움직이게 되었다! 유레카

근데 이상한게 하나 있다. 공이 움직이면서 흔적을 남긴다. 공이라기 보다는 선이 그려지는 기분이다. 이 문제를 어떻게 해결할까? 바로 clearRect()함수를 써서 canvas의 그림들을 지우면 된다.

소스코드를 아래와 같이 수정해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
}

보기 좋게 drawBall() 함수를 생성해서 공을 그리는 부분을 draw() 함수와 분리하였다.

clearRect() 함수의 파라미터는 처음 2개는 clear를 수행할 시작 좌표, 뒤의 2개는 끝 좌표를 나타낸다. 즉, canvas의 모든 그림들을 지우겠다는 의미이다. 그 후에 drawBall()을 수행하니 우리가 원하는 공이 움직이는 기능이 구현되었다. 유레카











_이 포스트는 MDN 2D Breakout game 의 튜토리얼을 참고한 내용 입니다._

Share