HTML로 테트리스 게임 만들 환경을 설정했다. 기본 환경을 설정하고 게임에 필요한 요소를 구상하고 결정한다. 게임에 필요한 요소를 결정하고 나면 게임에 들어갈 요소가 어떠한 방식으로 돌아갈지 설계한다.
내가 만든 테트리스 게임에는 첫 시작화면에 게임 제목, 시작 버튼, 정지 버튼을 넣었다. 시작 버튼을 누르면 게임이 시작되면서 게임 초기화 과정이 실행된다. 게임 초기화 과정은 다음과 같다.
우선 브라우저 화면에 게임에 필요한 요소를 그린다. 화면에 테트리스 게임이 돌아갈 테이블과 다음에 나올 테트로미노를 보여주는 테이블이 나타난다. 사용자가 게임을 조작하는 방법도 나타난다. 여기에서 고려할 점은 데스크탑과 모바일환경에서 서로 다르게 조작된다. 데스크탑 게임 조작방법과 모바일 환경 게임 조작방법은 각 환경에 맞게 보여준다. 랜덤 테트로미노가 테트리스 테이블 화면에 그려지면서 게임이 진행된다.
테트리스 테이블은 가로 20행 세로 10열인 테이블이다. 화면에 보이는 테이블과 테트리스 데이터 테이블도 있다. 화면용 테이블은 데이터 테이블을 참조하여 그려진다. 그리고 테트로미노는 매순간마다 내려온다. 테트로미노가 매순간 내려올 때 테트리스 테이블을 지우고 다시 그리는 방법을 택했다. 데이터가 20행 10열 밖에 되지 않아 이 방법을 택했다.
여기에서 기본 원리는 테트로미노가 매순간 내려오는 것이다. 이게 멈추는 경우는 다음과 같다. 첫번째는 사용자가 방향키를 눌러 테트로미노를 왼쪽, 오른쪽, 빨리 내려가게 할 때이다. 두번째는 한 행이 다 차서 한 행을 지우는 순간이다. 마지막으로는 테트리스 테이블이 다 차서 게임이 종료되는 경우이다.
게임은 테트리스 테이블이 꽉 차기 전까지 랜덤 테트로미노가 선택되고 내려오고 선택되고 내려오는 이 순환을 반복한다. 게임 기본 원리가 간섭받을 때의 경우에는 다시 테트리스 테이블을 지우고 그려주면서 해결을 한다. 그리고 게임이 종료되면 다시 모든걸 초기화 과정으로 돌려놓는다.
Leave a Reply