[Javascript Basic] 03. 벽돌깨기 게임(8)

학습 목표

구현된 코드를 보면 간단해 보일 수 있지만, class의 사용과 참조로 인해 변수가 가르키는 값이 헷갈릴 수 있다.

• 중앙에 위치할 장애물 블록만들기
• 좌우로 움직이기
• ball과 충돌시키기

장애물 만들기

앞선 포스팅에서 만든 Brick 이란 class를 참조하여, CenterBlock을 만들자. 멤버변수에 중앙에 위치하도록 좌표를 찍어줄 값을 설정하여 새로운 객체를 만들면 된다. Brick에서 이미 선언을 해주었기 때문에 변수 설정만 해주면 쉽게 구현할 수 있다. let centerBlack

함수도 마찬가지로 Brick 에 설정한 draw()를 참조하여 만든 후, 화면 출력 기능을 담당하는 함수 안에서 호출해주면 된다.

class CenterBlock extends Brick {}

let centerBlack = new CenterBlock(
  canvas.width / 2 - 25,
  canvas.height / 2 - 10,
  canvas.width / 2 + 25,
  canvas.height / 2 + 10,
  "black"
);

// center block 그리기
function drawCenterBlock() {
  context.beginPath();
  centerBlack.draw();
  context.closePath();
}

// 화면그리기에 마지막줄만 추가 
function draw() {
  // 화면 클리어
  context.clearRect(0, 0, canvas.width, canvas.height);

  // 다른 도형 그리기
  drawBar();
  drawArc();
  drawBricks(); 
  drawCenterBlock();
}

장애물 움직이기

위에서 Brick을 참조하여 만든 새로운 class CenterBlock에 좌우움직임을 주는 함수를 추가해 주었다. 위에서 객체안에 각 변수를 설정해주었기 때문에 조건문 안에 this.left로 해당값을 불러 올 수 있다. 앞서 구현한 코드와 마찬가지로 해당 block의 좌,우의 position 값이 벽과 부딪힐때 방향을 바꿔주는 방식으로 접근했다.

해당 class안에 있는 함수를 호출해줄 또다른 함수를 선언하고, 이를 게임시작과 함께 움직일 수 있도록 keyDownEeventHandler(e)함수안에 setInterval을 사용하여 넣어 주었다.

class CenterBlock extends Brick {
  movingAction() {
    if (this.left < 0) {
      centerMoveDirX = 1;
    } else if (this.left > canvas.width - brickWidth) {
      centerMoveDirX = -1;
    }
    this.left += centerMoveDirX;
  }
}

function centerMoving() {
  centerBlack.movingAction();
}

// keyDownEeventHandler(e) 안에 추가해주기
if (e.key == " " && startClick) {
  setInterval(update, 10);
  setInterval(centerMoving, 10); // 장애물 블록 움직이기
  startClick = false;
}

ball과 충돌시키기

draw개념으로 블록을 찍어내는것 (그냥 좌표에맞게) 과 이동하면서 충돌을 일으킬 객체는 다르단걸 인지해야한다. 이 부분 주의해야함. 강조해서 기록해둘것. 그래서 났던 오류도 기록. 접근방법