[엘리스 AI트랙 5기 1차 스터디 프로젝트]

<canvas 요소와 JavaScript를 활용해서 벽돌 부수기 게임 만들기>

1. 서론

2주차에 방향키 이벤트(dom keydown event)를 실행했을 때, 기존에 구현된 막대기 바에서 입력된 방향으로 색이 덧붙여서 늘어나는 문제가 발생했다. 그래서 mdn 페이지를 참고해서 clearRect 메서드의 필요성을 느꼈다.

2. 본론

clearRect()

문법

clearRect(x, y, width, height)

매개변수

x : 사각형 시작점의 x축 좌표
y : 사각형 시작점의 y축 좌표
width : 사각형의 너비 ( 양수 값은 오른쪽이고, 음수는 왼쪽)
height : 사각형의 높이 (양수 값은 아래로, 음수 값은 위로)

처음 canvas 태그에 대해서 공부할 때, 좌표라는 개념이 헷갈렸고, 코드의 순서에 따라서 출력되는 화면이 달라져서 어려움을 느꼈다.

결과적으로 clearRect 메서드를 사용하게 되면 해당 x,y 좌표를 기준으로 width(가로), height(세로) 범위의 canvas 부분을 지운다.

애니메이션을 구현하기 위해서 꼭 필요하다. (프레임 단위)

mdn 튜토리얼은 마우스 이벤트를 통해 막대기 바 움직임을 구현했는데, 그것과 비교했을때, 프레임이 뚝뚝 끊기는 느낌이 있다.

3. 결론

발견된 문제

애니메이션의 프레임 변화가 부드럽지 않다.
코드 순서에 따라 화면의 변화에 대한 개념
막대기바가 캔버스너비에 닿았을 때, 테두리가 지워짐

막대기 바 이동 구현

이벤트 구현

function rightMove() {
  bar.x += bar.vx;
}
function leftMove() {
  bar.x -= bar.vx;
}

document.addEventListener("keydown", (e) => {
  if (e.code === "ArrowRight") {
    window.requestAnimationFrame(rightMove);
  }
});
document.addEventListener("keydown", (e) => {
  if (e.code === "ArrowLeft") {
    window.requestAnimationFrame(leftMove);
  }
});
btn.addEventListener("click", function (e) {
  window.requestAnimationFrame(draw);
});

막대기 바 생성

const bar = {
  x: 150,
  y: 350,
  vx: 15,
  width: 100,
  height: 20,
  color: "black",
};


function drawBar() {
------(일반적으로 애니메이션의 각 프레임이 시작될 때 필요)
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
---------------------------------------------------

  ctx.beginPath();
  ctx.strokeRect(0, 0, canvas.width, canvas.height);
  ctx.strokeStyle = bar.color;
  ctx.closePath();

  ctx.beginPath();
  ctx.fillStyle = bar.color;
  ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
  ctx.closePath();


벽과 만났을 때, canvas를 벗어나지 않게 처리

  if (bar.x + 100 > canvas.width) {
    bar.x = canvas.width - 100;
  } else if (bar.x < 0) {
    bar.x = 0;
  }
}

막대기 바 애니메이션 구현 (프레임 단위)