1. 게임 만드는 순서
- 캔버스 생성과 그리기
- 공 움직이기 구현
- 벽으로 부터 튕겨져나오기 구현
- 패들과 키보드 제어 구현
- 게임 오버 구현
- 충돌 감지 구현
- 점수, 승리 구현
2. 캔버스 생성과 그리기!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>
</script>
</body>
</html>canvas에는 게임이 렌더링되고, script안에 Javascript가 들어간다
2.1 캔버스 기본
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");document.getElementById("myCanvas")을 작성하여 canvas와 태깅을 해주었다.
2.2 캔버스에 사각형 그려보기
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();-
beginPath()와 closePath()는 각각 새로운 경로를 만들고 경로를 닫는 메소드이다.
-
rect()에서 앞에 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 뒤 값들은 직사각형의 넓이와 높이를 의미한다. 즉 직사각형은 캔버스 좌측에서 20px, 캔버스 상단에서 40px만큼 아래로 떨어져있다는 뜻 이다. 그리고 넓이와 높이는 각각 50px로 값을 주어 정사각형이 그려지게 된다.
-
fillStyle은 fill()메소드에서 칠해질 색상 값을 갖게 되고 위 코드에서 사각형을 빨간색으로 칠하고 있다.
2.3 캔버스에 원 그려보기
벽돌깨기 할 때 공을 사용해야하기 때문에 원 그리기가 중요하다!
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false);
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();- beginPath(), closePath(), fillStyle, fill()은 2.2에 설명이 되어있으니 생략한다.
- arc()에서 240과 160은 원의 중심을 가리키는 x와 y자표, 20은 원의 반지름, 0 과 Math.PI*2는 시작 각도와 끝 각도, false는 시계방향(true일 땐 반 시계 방향)으로 그려지는 것 을 의미한다.
위에 그림 처럼 캔버스 안에 원이 그려지게 된다.
