2020/10/05 - [HTML] - [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성)
캔버스를 이용해서 벽돌깨기 게임을 만들 준비와 공을 그렸습니다
이번에는 공을 움직이는 방법입니다
화면에서는 공이 움직이지만 실제로는 공이 움직이는 것처럼 보이게 공을
그렸다가 지우는 과정을 반복합니다
매 프레임마다 공의 위치를 조금씩 다르게 그려서 공이 움직이는 것처럼 보이게 하는 방식입니다
드로잉 루프 정의하기
매 프레임마다 캔버스에 계속해서 그리는 것을 반복하기 위해서는 갱신해주는 함수가 필요합니다
MDN 사이트에서는 JavaScript 타이밍 함수인 SetInterval() 함수 또는 requestAnimationFrame() 함수를
이용하면 함수를 계속 반복 사용할 수 있다고 소개하고 있습니다
setInterval 함수를 사용해서 공을 그리는 방법을 사용하겠습니다
"draw" 이름의 함수를 만들고 setInterval로 draw 호출하고 10ms(밀리초)마다 실행하겠습니다
function draw() {
// drawing code
}
setInterval(draw, 10);위와 같이 코드를 적고 이번에는 공을 만들겠습니다
ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();해당 코드를 draw() 안에 넣어줍니다
function draw() {
ctx.beginPath();
ctx.arc(50, 50, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}이제 파일을 확인해보면 공이 매 프레임마다 다시 그려지게 됩니다
공 움직이게 만들기
공은 10ms마다 새로 그려지고 있지만 공의 움직임에 변화가 없어서 화면상에는 변화가 없어 보입니다
ctx.arc(50, 50, 10, 0, Math.PI*2); 부분에서 50은 X, Y 좌표의 고정값으로 변수를 이용해서
좌표값이 변하도록 변경하겠습니다
x, y 이름으로 좌표를 정해주는 변수를 만들겠습니다
var x = canvas.width/2;
var y = canvas.height-30;변수 x, y는 canvas 변수 바로 아래에 위치하도록 합니다
변수를 추가한 후에 draw() 함수 안의 ctx.arc의 고정된 값 50 대신에 x, y로 변경합니다
function draw() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}x, y 변수를 통해서 공은 캔버스 화면의 가운데 부분에 위치하게 되었습니다
이제 공의 움직임을 갱신해줄 dx, dy 변수를 선언하고 draw 함수 안에 넣어줍니다
(고정된 값을 입력해도 되지만 관리, 수정을 용이하게 하기 위해서 dx, dy를 만듭니다)
var dx = 2;
var dy = -2;
function draw() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
x += dx;
y += dy;
}
다음 프레임 전에 공 흔적 지우기
예상과 달리 공을 그리고 나서 전에 있던 공이 지워지지 않아서 공이 선으로 변했습니다
선이 되지 않도록 공을 그리고 새로운 공을 그릴 때 기존의 공을 지우는 방법을 추가하겠습니다
clearRect() 함수를 사용하면 손쉽게 공을 지울 수 있습니다
clearRect 함수에 4개의 파라미터가 필요합니다
void ctx.clearRect(x, y, width, height);x는 직사각형 시작점의 X축 좌표입니다
y는 직사각형 시작점의 y축 좌표입니다
width는 직사각형의 너비입니다 양의 값은 오른쪽에, 음의 값은 왼쪽에 있습니다
height는 직사각형의 높이입니다 양의 값은 내려가고 음의 값은 올라갑니다
draw 함수 안의 첫 번째 줄에 clearRect함수를 추가합니다
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
x += dx;
y += dy;
}ctx.clearRect(0, 0, canvas.width, canvas.height);는 캔버스 전체를 지우는 방법입니다
draw함수를 실행하면 기존의 캔버스에 있던 공을 지우고 공을 새로 그립니다
코드 정리
draw 함수 안의 코드를 용도에 맞게 2개의 함수로 분리할 수 있습니다
drawBall() 함수는 공을 그리는 함수
draw 함수는 공의 움직임을 그리는 함수로 각각 사용할 수 있습니다
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;
}위와 같이 함수를 분리했습니다
요약
코드 전체
<!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;
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;
}
setInterval(draw, 10);
</script>
</body>
</html>'HTML' 카테고리의 다른 글
| [벽돌깨기]html 캔버스로 게임 만들기 - 5(게임 오버) (0) | 2020.10.19 |
|---|---|
| [벽돌깨기]html 캔버스로 게임 만들기 - 4(패들과 키보드 조작) (0) | 2020.10.16 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 3(충돌감지) (0) | 2020.10.12 |
| [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) (0) | 2020.10.05 |
| 움직이는 글자를 만들 수 있는 태그 marquee 사용법 (0) | 2020.09.28 |
