공의 움직임까지 구현했지만 공이 화면 밖으로 사라지는 문제가 있습니다
화면의 끝, 벽과 충돌할 때 감지하고 벽 밖으로 나가지 못하게 충돌 감지 함수를 만들고
충돌할 경우 벽에 튕기도록 해보겠습니다
충돌 감지
충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을
수정해야 합니다
ballRadius 변수를 만들고 원의 반지름 값에 대입합니다
var ballRadius = 10;drawBall() 함수 안에 ballRadius을 그리는 코드를 아래와 같이 변경해보겠습니다
ctx.arc(x, y, ballRadius, 0, Math.PI*2);위아래 좌 우 방향 확인하기
매 프레임마다 공이 4방향에 충돌했는지 확인해야 합니다
위, 아래 방향은 y축과 좌, 우 방향은 x축과 관련이 있습니다
x, y축 최소 값은 0입니다
(0부터 시작)
x, y축 최대 값 canvas 크기입니다
if(y + dy < 0) {
dy = -dy;
}y의 값이 0보다 작은 경우, 음수일 경우 반대로 바꾸어주어 공이 벽 밖으로 나가는 것을 방지하고
캔버스 안에서 다른 방향으로 움직이게 해 줍니다
위 코드를 실행하면 위 방향에 대해서는 처리가 되었습니다
아래 방향으로도 적용될 수 있게 canvas 값을 추가합니다
if(y + dy > canvas.height) {
dy = -dy;
}
위, 아래 방향을 하나 if문으로도 만들 수 있습니다
if(y + dy > canvas.height || y + dy < 0) {
dy = -dy;
}||은 or 조건으로 왼쪽의 조건을 충족하거나 오른쪽의 조건을 충족하면
{} 안의 코드 블록을 실행합니다
좌, 우 방향도 위와 똑같이 만듭니다
if(x + dx > canvas.width || x + dx < 0) {
dx = -dx;
}
벽과 충돌하고 공이 벽 밖으로 넘어가지는 않지만 공의 일부분이 벽 밖으로 나가 있습니다
일부분이 나가 있는 이유는 공의 끝부분이 아닌 공의 중심으로 계산이 이루어지기 때문입니다
그렇게 때문에 공의 반지름 값을 더해서 공의 끝부분이 닿았을 때 if문이 실행되게 해야 합니다
ballRadius 변수가 이때 사용됩니다
if문에 ballRadius 값을 처리하도록 변경합니다
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
dy = -dy;
}
요약
코드 전체
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>벽돌깨기</title>
<style>
* { padding: 0; margin: 0; }
canvas { background: #eee; display: block; margin: 0 auto; }
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var ballRadius = 10;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if(y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
}
setInterval(draw, 10);
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| [벽돌깨기]html 캔버스로 게임 만들기 - 5(게임 오버) (0) | 2020.10.19 |
|---|---|
| [벽돌깨기]html 캔버스로 게임 만들기 - 4(패들과 키보드 조작) (0) | 2020.10.16 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 2(공 움직이기) (0) | 2020.10.09 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) (0) | 2020.10.05 |
| 움직이는 글자를 만들 수 있는 태그 marquee 사용법 (0) | 2020.09.28 |
