테트리스 게임 [Tetris]
Vanilla JS 미니 프로젝트
source : 추억의 게임! 테트리스 HTML, Javascript로 만들기
실행
Gameover
실행과정 코드 설명
게임 실행
-
init 함수 실행 시, 블럭의 타입, 방향, 좌표를 저장한 변수를 임시 저장한다.
-
prependNewLine 함수는 테트리스의 칸을 초기화해준다.
-
generateNewBlock 함수는 하나의 블럭의 움직임이 종료되면 다음 블럭을 생성해준다.
이때, 초기 변수값 duration의 속도로 블럭이 y축으로 1칸씩 움직이게 설정한다.
BLOCKS 파일에 저장된 블럭의 유형을 랜덤으로 선정하여 movingItem에 저장하고 블럭의 초기값을 tempMovingItem에 저장한다. 이후 renderBlocks 함수로 블럭의 생성 및 움직임을 제어한다.
블럭 움직임 조건
- renderBlocks 함수는 tempMovingItem에 저장된 변수 중 type 변수에 저장된 블럭이 실제로 이동했을 때 지정된 공간을 벗어나는지, 존재하는 블럭인지 등을 파악하여 가동 블럭인지 파악한다.(checkEmpty 함수를 사용)
가동 블럭이라면, moving 타입을 부여하고 가동블럭이 아니고, retry 타입이라면 멈출 블럭인지 게임오버 상황인지 판단한다.
이때, 정지할 블럭은 타입을 seized로 바꿔준다.
만약, 블럭이 정지했을 때, 같은 횡의 블럭이 모두 seized라면 그 줄의 블럭을 삭제하고 새로운 줄을 생성하면서 점수를 1점 증가시킨다.
조건을 만족한 경우 movingItem에 좌표와 방향을 저장한다.
기타 조작
- 조작키 설정
- restart 버튼 설정
느낀점
요즘 자바의 정석으로 이론 공부를 하다가, 조금 방향성을 바꿔볼까하는 생각이 들었고, 이제는 뭔가 만들어보고 싶다는 생각으로 무작정 시작해본 클론 코딩.
자바로 채팅 프로그램을 만들어보기 전에 맛보기로 해본 미니 프로젝트인데, 생각보다 재미있었다. 몰랐던 문법을 알아가는 재미도 있었고, 5줄 정도의 긴 코드를 1~2줄로 짧게 줄이는 방법도 신기하고 흥미로웠다.
물론 내가 직접 생각해서 적은 양의 코드라도 직접 작성해보는 것이 훨씬 의미 있겠지만, 프로젝트에 대해 모르는 나에게는 좋은 경험이 된 것 같다. 직접 목표를 가지고 프로젝트를 진행하면서 모르던 부분을 공부하고 바로바로 적용해볼 수 있는 것이 최고 장점이라고 생각한다.
해보고 싶은 것도 많고 알아야할 것도 많지만, 그 과정이 즐거우니까 꾸준히 하다보면 내가 직접 프로젝트를 이끄는 날도 오겠지!라고 생각하는 중이다.
