많은 사람들이 좋아하는 테트리스 게임을

두 가지 방법으로 개발하면서

하나의 제품이나 기능을 다양하게 개발하는 방법을 정리하였다.

덤으로 간단한 게임 개발법과

자바스크립트 Canvas 사용법도 익힐 수 있다.


자바 스크립트를 이용하여 구현하고 정리하였지만

여기서 정리하는 주요 개념에 대한 내용은

개발 언어에 관계없이 동일하게 사용할 수 있다.

시각적인 표현에 조금 차이가 있을 수 있지만

대부분의 개발언어에서 동일하게 구현할 수 있다.


인터넷을 검색해 보면

여러가지 방법으로 개발된 소스를 찾을 수 있다.

하나의 많이 참고되는 방식이 있고,

다소 비효율적이긴 하지만

재미난 방식으로 개발한 소스들도 있다.

비효율적으로 작성된 코드가 쉽게 작성되어 개념을 익히기 좋은 장점이 있고,

모든 코드가 비효율적이 것은 아니기 때문에,

남의 소스를 많이 보고 다양하게 개발해 보는 것이

중요하다고 생각하여 두가지 방식으로 정리하였다.


테트리스를 제작하는 방법에 대한 설명과 예제는

다음 사이트에 잘 정리되어 있다 (영어).



이 내용에서 첫 사이트의 예제와

나머지 사이트의 예제로 나눌수 있고,

이 게임들은 두가지 방식으로 개발되었다.

근본적인 차이는 테트리스 도형의 회전 방식의 차이이다.

테트리스 도형에 대한 용어가 사람에 따라 조금씩 차이가 있는데

Shape, Piece, Block, Tetromino등으로 사용한다.

여기서는 도형, Shape, Block을 같은 의미로 사용한다.


테트리스는 O, I, T, S, X, J, L의 7개 도형을

특정 버튼이나 키보드를 이용하여 오른쪽으로 90도씩 회전시키고

한 라인을 모두 채우면 사라지는 게임이다.

출처: Code in Complete


이 도형을 회전 시키는

첫번째 방법은 각 7 개의 도형에 대한 정보를 배열에 넣고

회전 명령에 따라

그때 그때 90 도씩 계산하여 회전시키는 것이다.


또다른 방법은

7 개 도형의 회전 후 모습을

모두 배열에 담아서 저장하고

상황에 맞추어 보여주는 방식이다.

다음 그림과 같이 90 도로 회전하는 4 개의 도형 정보를 저장한다.

이 방식은 제법 많은 데이터를 저장 하기 때문에

데이터를 16 진수로 변환해서 사용한다.

출처: Code in Complete

편의상,

앞서 7개의 도형을 배열에 저장하고

동적으로 회전을 계산하여 구현하는 것을 배열 개발법 (또는 배열법),

두번째의 모든 도형 모습을 저장하여 사용하는

개발 방법을 Bitmask개발법(또는 bitmask법)으로 호칭한다.

Bitmask로 개발하는 방법은 Code in Complete에 잘 설명되어있다.


이해를 쉽게 하기 위해

다음과 같이 단계별로 정리한다.

1. 배열 방식의 도형 회전

2. Bitmask 방식의 도형 회전

3. 배열기반 회전 방식의 테트리스

4. Bitmask기반 회전 방식의 테트리스

5. requestAnimationFrame




+ Recent posts