JavaScriptGame

javascript game (6)

game, html5, js

잡담

어느덧 절반 이상 만들었다. 오늘 포스팅까지 구현하면 이제 그럴듯한 게임이 만들어 질 것이다. 그러니 나머지 부분도 잘 따라오기 바란다.

지난 포스팅이 궁금하면 다음 아래 링크를 참고하기 바란다.

  1. 캔버스 생성과 그리기
  2. 공 움직이기
  3. 벽에 공 튀기기
  4. 판때기 구현과 키보드 컨트롤
  5. Game Over

벽돌 만들기

벽돌 변수 세팅

우선 벽돌을 구현하기 위해 무엇을 먼저 해야 할까? 바로 벽돌 정보들을 저장할 변수를 선언해야 한다. 벽돌 너비라던가 높이라던가 몇 개를 몇 줄로 만들건지 라던가… 일단 아래를 봐보자.

1
2
3
4
5
6
7
var brickRowCount = 3;
var brickColumnCount = 5;
var brickWidth = 75;
var brickHeight = 20;
var brickPadding = 10;
var brickOffsetTop = 30;
var brickOffsetLeft = 30;

먼저 벽돌을 5 * 3 개수로 만들 것이다. 너비는 75px, 높이는 20px, padding은 10px, 위쪽 offset은 30px, 왼쪽 offset은 30px로 선언했다.

offset 값이 왜 필요할까? 이게 없으면 벽돌을 만들어서 출력하면 위쪽과 왼쪽에 딱 붙어서 벽돌 모습이 보기 흉할 것이다. 그래서 보기 좋~게 offset 만큼 거리를 떨어뜨려 화면에 그릴 것이기 때문에 offset을 주는 것이다.

자, 이제 for-loop를 이용해서 벽돌을 5 * 3 개수만큼 만들어 보자. 방법은 아래와 같다.

1
2
3
4
5
6
7
var bricks = [];
for (c = 0; c < brickColumnCount; c++) {
  bricks[c] = [];
  for (r = 0; r < brickRowCount; r++) {
    bricks[c][r] = { x:0, y:0 };
  }
}

위와 같이 벽돌을 저장할 2 2 배열을 선언 후 초기화 해준다. 그럼 총 5 3 만큼의 요소를 가진 배열이 만들어 질 것이다. 그런데 배열의 값이 { x:0, y:0 } 이라는 객체를 저장하고 있다. 이건 뭘까? 뒤에 나오겠지만 벽돌과 공이 충돌할 경우 감지할 수 있는 로직이 필요한데, 역시나 좌표를 이용해서 처리 할 것이다. 그럴려면 해당 벽돌의 X, Y 좌푤가 필요하지 않겠나? 바로 그거다.

벽돌 그리기

자, 이제 벽돌을 만들 준비가 다 됬다. 그럼 이제 실제로 벽돌을 화면에 그려보도록 하자. 바로 아래와 같이 drawBricks() 함수를 선언하자!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function drawBricks() {
    for(c=0; c<brickColumnCount; c++) {
        for(r=0; r<brickRowCount; r++) {
            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
            bricks[c][r].x = brickX;
            bricks[c][r].y = brickY;
            ctx.beginPath();
            ctx.rect(brickX, brickY, brickWidth, brickHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
    }
}

또 loop가 두 번 돈다. 여기서 두 번째 for-loop를 보면, brickX, brickY 변수가 새로 선언되고, bricks[c][r] 에 X, Y 좌표 값으로 할당되고 있다. 이 부분이 위에서 언급한 공과의 충돌을 처리하기 위한 벽돌의 위치 정보를 저장하는 부분이다.

brickX는 brickWidth + brickPadding에 컬럼의 갯수인 c 만큼 곱한 뒤 brickOffsetLeft를 통해 왼쪽에서 30px만큼 띄워서 화면에 그린다. brickY도 동일한 로직으로 위쪽과 offset 만큼 떨어뜨려 그리게 된다.

진짜로 벽돌 그리기

이제, draw() 함수 안에서 drawBricks() 함수를 호출하여 벽돌을 그려보자. 그럼 아래의 데모처럼 작동할 것이다.






엇 그런데 공이 벽돌을 그냥 통과한다… 그럼 나머지는 다음 시간에…





_이 포스트는 MDN 2D Breakout game 의 튜토리얼을 참고한 내용 입니다._

Share