벽돌깨기 게임 만들기(2)

3. 공 움직이기

화면에 공을 그렸다가 지우는 과정을 반복해야 하는데, 매 프레임마다 공의 위치를 조금씩 다르게 해서 그리면 공이 움직이는 것 처럼 보인게 된다.

3.1 드로잉 루프 정의

function draw() {
    // drawing code
}
setInterval(draw, 10);

• 매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 함수가 필요하다. 매 프레임마다 위치를 바꿔주는 타이밍 함수인 setInterval()를 이용하면 함수를 몇번이고 반복해서 실행 가능하다.

• setInterval(draw, 10) 함수 덕분에 draw() 함수는 우리가 멈추기 전 까지 10밀리초마다 계속 호출된다.

3.2 움직이게 만들기

공이 움직이지 않고 있기 때문에, 공이 다시 그려지고 있다는 사실을 알 수가 없다. 그래서 공을 움직이도록 좌표 x와 y라는 변수를 이용해서 계속 그려지게 만든다.

var x = canvas.width/2;
var y = canvas.height-30;

var dx = 2;
var dy = -2;

• draw() 함수안에 x와y 변수를 정의한다.
• 공을 움직이는 것을 표현하기 위해 x와 y에 값을 매 프레임마다 더해준다. 그 값을 dx와 dy라 정의하고 draw()안에 넣어준다.

function draw() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy;
}

위에 그림 처럼 원이 계속 그려지기 때문에 대각선이 나오게 된다.

3.2 다음 프레임 전에 캔버스 지우기

매 프레임마다 공을 그릴 때 이전 프레임을 지워주지 않기 때문에 공의 흔적이 남는다 !!
그래서 캔버스의 내용을 지워주기 위한 clearRect()를 사용하여 사각형 안에 있는 그림을 전부 지워버린다

ctx.clearRect(0, 0, canvas.width, canvas.height);
// 직사각형의 좌상단 모서리(0,0)   
// 직사각형의 우하단 모서리(canvas.width, canvas.height)

draw()함수 안에 위 코드를 추가하면 공이 흔적없이 움직이게 된다 !!

위에 그림 처럼 공이 우측 대각선 방향으로 이동하게 된다

3.3 코드 정리

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() 함수로 나누었다