자바스크립트로 테트리스게임 개발!!

이전까지 해킹보안을 공부하다가 웹 개발자가 돼보기로 마음먹고 본격적으로 공부하기 시작한 지 5개월 정도 된 것 같습니다. 아직은 풋풋한 새내기 개발자지만 그동안 공부한 것을 공유하고 개인 공부와 자기만족 + 친구의 적극 추천으로 블로그를 시작해보려고 합니다.

 

보여줄만한 결과물이 많지 않기 때문에 지금까지 한 것만이라도 조금씩 정리해서 올려보려고 합니다.

 

그중 첫번째 게시글은 테트리스입니다.

 

자바스크립트를 처음 공부하면서 자바스크립트랑 조금이나마 친해지고자 만들어 봤던 테트리스 게임입니다. 지금 와서 다시 보니깐 어색한 부분과 잔잔한 오류들이 조금 있긴 하지만 혹시나 누군가에겐 도움이 되지 않을까 해서 올려봅니다.

 

먼저 테트리스 개발을 하기 전에 블록 정보를 어떻게 저장을 해야 할지 생각을 해보았는데 2차원 배열을 써야 한다는 것 외에는 특별한 알고리즘이 떠오르지 않아서 구글 신의 도음을 받았던 기억이 납니다. 구글에 "자바스크립트 테트리스"로 검색하면 제일 상단에 나오는분의 게시글을 통해서 

https://codeincomplete.com/posts/javascript-tetris/

Javascript Tetris

해당 사이트를 알게 되었고 세상엔 정말 GOD개발자가 정말 많구나... 하는 걸 느꼈습니다. 이런 생각을 어떻게 하는지~

 

방법은 

var shapes = [
                [0x4640, 0x0E40, 0x4C40, 0x4E00], // 'T' 
                [0x8C40, 0x6C00, 0x8C40, 0x6C00], // 'S' 
                [0x4C80, 0xC600, 0x4C80, 0xC600], // 'Z' 
                [0x4444, 0x0F00, 0x4444, 0x0F00], // 'I' 
                [0x44C0, 0x8E00, 0xC880, 0xE200], // 'J' 
                [0x88C0, 0xE800, 0xC440, 0x2E00], // 'L' 
                [0xCC00, 0xCC00, 0xCC00, 0xCC00] // 'O' 
            ]; 

이런식으로 블록정보를 16진수를 사용해서 배열로 미리 만들어두는 방식입니다.

 

배열안에 들어가있는 배열들은 각각의 테트리스 블럭들이 가질 수 있는 모양입니다.

 

ex) [0x4640, 0x0E40, 0x4C40, 0x4E00],  < --- 'T' 모양의 블럭

16진수 0x4640 을 2진수로 표현하면 0100 0110 0100 0000이 됩니다.

해당 내용으로 4X4 모양의 블럭 그림을 표현하면

0	1	0	0
0	1	1	0
0	1	0	0
0	0	0	0

옆으로 누워있는 'T' 자 모양이되는 방식입니다.

한가지 경우를 더보면

0x4640 옆에있는 0x0e40은 마찬가지로

0x0e40 -> 0000 1110 0100 0000

0	0	0	0
1	1	1	0
0	1	0	0
0	0	0	0

‬위에 'T' 모양이 옆으로 90도만큼 회전한 모양입니다.

이런식으로 블록의 정보를 배열변수에 담아두고 인덱스를 랜덤하게 뽑아 무작위 모양을 만들어주는 방식입니다. 

이방식을 사용하면 html 캔버스를 통해서 그려줄 때 1이 있는 자리에만 색상을 주면 됩니다.

 

function draw(){
    gamePanelDraw();
            
    for (var y = 0; y < 4; y++) {
         for (var x = 0; x < 4; x++) {
              if (curShape & (0x8000 >> (y * 4 + x))) { 
                  ctx.fillStyle = this.colorList[this.curShapeType];
                  ctx.fillRect((sPos.x+x) * 20, (sPos.y+y) * 20, 19, 19); 
              }
         } 
    }
}

curShape는 랜덤하게 뽑은 도형의 정보를 0x8000(16진수) -> 1000 0000 0000 0000‬(2진수)로 한칸씩 비트연산을하면서 각자리값이 0인지 1인지 확인하고 1인경우만 블럭의 색상을 채워주는 함수입니다.

ex)

  0x0e40 -> 0000 1110 0100 0000

  0x8000 -> 1000 0000 0000 0000

                0100 0000 0000 0000

                0010 0000 0000 0000

                           ...

                0000 0000 0000 0001

0과 1을 &연산하면 0이되고, 1과1이 &연산되면 1이되는것을 응용한 풀이었습니다!!!

 

 

버그가 있을수도 있습니다. 서툴지만 이거라도 혹시나 필요하신다면

테트리스.html

0.01MB