Canvas을 사용하여 벽돌깨기 게임 만들기2 (공 움직이기)

드로잉 루프를 정의하기

아래의 코드를 제외한  코드를 지우자.

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

 

타이밍 함수인 setInterval()를 사용해보자.

function draw() {
	
}

setInterval(draw, 10)

setInterval()의 첫번째 인자에는 실행시킬 함수, 두번째 인자에는 얼마의 시간 단위로 실행시킬지이다. 시간 단위는 ms이다.

 

따라서 매 순간 원을 그리기를 반복해보자.

let x = canvas.width / 2
let y = canvas.height - 20

const dx = 1
const dy = -1

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

setInterval(draw, 10)

이 코드는 매 10ms마다 draw함수를 실행시킬 것이다. draw함수가 실행되면 x와 y값이 변하므로 원은 조금씩 이동할 것이다.

하지만 그려진 원들은 지워지지 않기 때문에 매 캔버스를 지워줄 필요가 있다.

 

draw 초기에 캔버스를 지워주는 함수를 넣어주자

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

위 코드를 draw 함수 초기에 넣어주면 캔버스를 먼저 지우고 그려주니 깔끔하게 원만 날아가는 모습을 볼 수 있다.

 

보기 좋게 코드를 나누고 drawBall()함수를 하나 만들어서 분리하자

최종적으로는 아래와 같은 모습을 보일 것이다.

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

let x = canvas.width / 2
let y = canvas.height - 20
const dx = 1
const dy = -1

function drawBall() {
	ctx.beginPath()
	ctx.arc(x, y, 10, 0, Math.PI * 2, false)
	ctx.fillStyle = "blue"
	ctx.fill()
	ctx.strokeStyle = "red"
	ctx.stroke()
	ctx.closePath()
}

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

setInterval(draw, 10)

 

코드가 나와 같다면 이런 모습을 보일 것이다.