Canvas을 사용하여 벽돌깨기 게임 만들기3 (공을 벽에 튕기기)

간단한 충돌 감지

ballRadius라는 변수를 만들어 원의 반지름 값 대신 사용하자

let ballRadius = 10;

//function drawBall() 안의 ctx.arc를 수정
ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false)

반지름을 사용하는 곳을 수정해준다.

 

우리는 원이 화면밖으로 나가지 않기를 원한다.

if (y + dy < 0 || y + dy > canvas.height) {
	dy = -dy
}
if (x + dx > canvas.width || x + dx < 0) {
	dx = -dx
}

원의 중심 y좌표가 0보다 작아지거나 canvas.height보다 커지면 dy를 -dy로 바꿔준다. x좌표 또한 0보다 작아지거나 canvas.width보다 커지면 dx를 -dx로 바꿔준다. 하지만 여기서는 원이 약간 화면 밖으로 나가는 문제가 있다.

 

화면밖으로 안나가게 해보자

if (y + dy < ballRadius || y + dy > canvas.height - ballRadius) {
	dy = -dy
}
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
	dx = -dx
}

원의 반지름 만큼 더 못 나가게 함으로써 원이 완벽히 화면 안에 있게 했다.

 

결과물은 이렇다.