일정
- 기능, 데이터 별로 분류하여 큰 그림 잡기
- 사용한 기술 정리
- Canvas 맛보기, 정리
- 커밋 메세지 작성법 살펴보기
기능
- Play 버튼 : 버튼 상태변경, 타이머, 카운터 세팅, 아이템 배치
1) 타이머 : 게임 시작 시 디폴트 값에서 1씩 감소
2) 카운터 : 디폴트 카운트 값에서 1씩 감소
3) 아이템 배치 : 랜덤으로 X, Y 위치에 아이템 배치
4) 아이템 작동 : 당근 클릭시 당근 아이템 삭제되고 카운터 함수 호출
벌레 클릭시 lost 팝업창 노출
- Stop 버튼 : 타이머, 카운트 멈춤, 팝업창 노출 (Replay)
- win : 시간 내에 당근 모두 클리어 시 팝업창 노출
- lose : 벌레 클릭 && Timeout 시 팝업창 노출
1. play 버튼
1) 타이머, 카운터 세팅
타이머와 카운터는 처음 default style 값을 opacity: 0 으로 세팅해놓고
play 버튼을 클릭 하면 opacity 값이 1로 변경하는 함수로 간단하게 구현했다.
2) 아이템 배치
아이템 배치 기능 구현에 앞서 먼저 필요한 데이터가 무엇인지 파악하고,
객체든 배열이든 데이터를 관리할 생각을 하는 것이 우선이다.
여기서는 carrot 과 bug 아이템을 객체로 관리해주고 변경되지 않도록 freez 해주었다.
createItems 함수 내에서 이미지 요소를 동적으로 생성하도록 하였다.
생성된 이미지를 랜덤으로 배치해주어야 하는데 이 때 field 의 최소, 최대값 안에서의
랜덤 숫자를 생성하여 만들어진 x, y의 값을 아이템의 좌표로 지정해준다.
Math.floor(Math.Random() * (max - min));ㅡ Random.range 사용하기
https://cpp11.tistory.com/66
3) 타이머 동작
play 버튼이 눌렸을 때 타이머가 동작하기 위해서 이를 캐치할 수 있도록
play 버튼이 있는 js 파일을 import 해야 한다.
이슈 관리
1) Unexpected end of input ...
💡 코드 블럭의 괄호가 알맞게 닫혀지지 않았을 때 나타나는 에러 메세지
함수 괄호를 제대로 닫아주니 해결
2) 동적으로 생성한 요소 배치
createElement로 요소는 생성을 했는데 setAttribute 지정해준 것이 먹질 않는다.
아무리봐도 문제가 없어보여서 혹시나 for문을 지워봤더니 정상적으로 요소생성이 된다.
💡 멍청한 나... 정말 멍청한 나....... 조건문을 i > count; 로 해놨으니 당연히 안되지....
4) Missing initializer in const declaration ...
💡 '-' 하이픈을 변수명에 넣어서 생긴 오류였다. 하이픈을 제거하니 해결
ㅡ 캔버스 https://developer.mozilla.org/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
ㅡ 커밋 메세지
https://richone.tistory.com/26
