1차 스터디 프로젝트 2주차

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

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

자신감있게 벽돌 부수기 게임 만들기!
라고 하고 시작한 스터디 프로젝트!
였지만... 뭐부터 해야하지 하는 벽에 막혔다.

구현하고 싶은 완성본을 수작업(?)으로 만들었지만, 이를 구현하기 위해 뭐부터 시작해야하는지.. 아무 생각이 안났다.

구글링으로 블로그등을 확인하기 전에,

mdn 사이트를 통해서 canvas 튜토리얼을 통해서 기본 개념과 예제를 연습하는 시간을 먼저 가졌다.

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage

canvas 요소에 대해서 조금만 공부해도 이렇게 이쁜 효과를 낼 수 있다. (추후 포트폴리오 만들 때, 꾸밀 수 있을 것 같다. feat.예제코드)

처음 마주한 시련!

먼저 막대기(바)를 좌우로 움직이는 이벤트를 구현하기 위해서 keydown 이벤트를 주었는데, 겉으로 보이기에 아래 gif을 보면 알 수 있듯이 늘어나는 것처럼 보인다.

이것은 기존의 결과에서 keydown 이벤트에 따라 색이 칠해지는(바뀌는) 것과 같다.

따라서 바뀌는 너비에 따라 막대기 바의 너비를 일정하게 유지하여야만 막대기바가 움직이는 것처럼 구현할 수 있다.

그러기 위해서는 늘어나는 너비만큼 반대쪽 너비를 줄이는 모션을 취해주어야하는데, 이때 필요한 것이 clearRect 메서드이다!!!

<mdn 참고> https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

clearRect 메서드 적용 전