hoya324/tetris

테트리스 게임 [Tetris]

Vanilla JS 미니 프로젝트

source : 추억의 게임! 테트리스 HTML, Javascript로 만들기

실행

Gameover

실행과정 코드 설명

게임 실행

1. init 함수 실행 시, 블럭의 타입, 방향, 좌표를 저장한 변수를 임시 저장한다.

2. prependNewLine 함수는 테트리스의 칸을 초기화해준다.

3. generateNewBlock 함수는 하나의 블럭의 움직임이 종료되면 다음 블럭을 생성해준다. 이때, 초기 변수값 duration의 속도로 블럭이 y축으로 1칸씩 움직이게 설정한다. BLOCKS 파일에 저장된 블럭의 유형을 랜덤으로 선정하여 movingItem에 저장하고 블럭의 초기값을 tempMovingItem에 저장한다. 이후 renderBlocks 함수로 블럭의 생성 및 움직임을 제어한다.

블럭 움직임 조건

4. renderBlocks 함수는 tempMovingItem에 저장된 변수 중 type 변수에 저장된 블럭이 실제로 이동했을 때 지정된 공간을 벗어나는지, 존재하는 블럭인지 등을 파악하여 가동 블럭인지 파악한다.(checkEmpty 함수를 사용)

가동 블럭이라면, moving 타입을 부여하고 가동블럭이 아니고, retry 타입이라면 멈출 블럭인지 게임오버 상황인지 판단한다. 이때, 정지할 블럭은 타입을 seized로 바꿔준다.

만약, 블럭이 정지했을 때, 같은 횡의 블럭이 모두 seized라면 그 줄의 블럭을 삭제하고 새로운 줄을 생성하면서 점수를 1점 증가시킨다.

조건을 만족한 경우 movingItem에 좌표와 방향을 저장한다.

기타 조작

5. 조작키 설정

6. restart 버튼 설정