자바스크립트로 웹 테트리스 만들기(6) - End

저는 이쯤에서부터 깃허브 호스팅을 시작했던 것으로 기억합니다.

 

어느정도 플레이 할 수 있는 테트리스가 되니 다른분들도 시켜보고 싶더군요.

 

깃허브 호스팅은 간단합니다.

 

`gh-pages`라는 브랜치를 만들어서 push하면, 가장 상위루트에 index.html로 정의한 파일이 호스팅되게 됩니다.

 

URL을 예를 들어보면 제 github 프로젝트 주소가 github.com/WoochanLee/BalanceTetris이고,

호스팅하면 woochanlee.github.io/BalanceTetris 이런 주소가 됩니다.

 

이 주소를 공유하여 테스터분들의 피드백을 요청하여 봤습니다.

 

근데 피드백을 들어보니, 랜덤의 문제점이 들어납니다.

 

긴 블럭만 계속 나온다던지.. 아니면 죽어도 안나온다던지..

 

그래서 찾아보니 테트리스는 7-bag 이라는 방식이 있습니다.

 

총 7개 블럭종류이다 보니 7개를 각각 묶어서 이것 내에서만 랜덤이 되는거에요.

 

(7개 랜덤 블럭 시퀀스) -> (7개 랜덤 블럭 시퀀스) -> (7개 랜덤 블럭 시퀀스)

 

이런 방식이라면 아무리 운이 좋아도 특정 블럭은 두번 연속까지만 나오고, 아무리 운이 안좋아도 특정 블럭이 13번째에는 나오게 되는 거죠.

 

이 로직을 추가해봅시다.

 

enqueueRandomTypePack() {
  let array = this.makeRandomTypePack();

  for (let i = 0; i < array.length; i++) {
    this.previewBlockQueue.enqueue(new ControlBlockType(array[i]));
  }
}

makeRandomTypePack() {
  return shuffleArray([
    this.blockTypeOne,
    this.blockTypeTwo,
    this.blockTypeThree,
    this.blockTypeFour,
    this.blockTypeFive,
    this.blockTypeSix,
    this.blockTypeSeven,
  ]);
}

 

7개 블럭 종류를 랜덤으로 넣고, 7개를 다 쓰고나면 다시 7개 랜덤으로 블럭을 추가해 줍니다.

 

그리고 다음 피드백으로 반대 회전이 필요하다는 요구사항이 들어옵니다.

 

저는 항상 한방향 회전밖에 안해서 몰랐는데.. 고수들은 두방향 다 회전을 하더군요.

 

그래서 반대회전의 설계도와, QE & ZC키로 양방향 회전을 넣어줍니다.

 

/**
 ****□□□□****
 **/
class BlockTypeOne {
  constructor() {
    this.widthBlockCount = 4;
    this.widthBlockMarginCount = 0;
    this.heightBlockCount = 1;
    this.heightBlockMarginCount = 1;
    this.blockColor = "#8CD6F3";
    this.shape = [
      [0, 1],
      [1, 1],
      [2, 1],
      [3, 1],
    ];
    this.rotationBlueprint = [
      [
        [-2, 1],
        [-1, 1],
        [0, 1],
        [1, 1],
      ],
      [
        [2, -1],
        [2, 0],
        [2, 1],
        [2, 2],
      ],
    ];
    this.reverseRotationBlueprint = [
      [
        [-2, 1],
        [-1, 1],
        [0, 1],
        [1, 1],
      ],
      [
        [2, -1],
        [2, 0],
        [2, 1],
        [2, 2],
      ],
    ];
  }
}

/**
 *****□******
 ****□□□*****
 **/
class BlockTypeTwo {
  constructor() {
    this.widthBlockCount = 3;
    this.widthBlockMarginCount = 1;
    this.heightBlockCount = 2;
    this.heightBlockMarginCount = 1;
    this.blockColor = "#BC48A9";
    this.shape = [
      [1, 2],
      [2, 1],
      [2, 2],
      [3, 2],
    ];
    this.rotationBlueprint = [
      [
        [0, 0],
        [1, -1],
        [1, 0],
        [2, 0],
      ],
      [
        [1, -1],
        [1, 0],
        [1, 1],
        [2, 0],
      ],
      [
        [-1, 1],
        [0, 1],
        [0, 2],
        [1, 1],
      ],
      [
        [0, 0],
        [1, -1],
        [1, 0],
        [1, 1],
      ],
    ];
    this.reverseRotationBlueprint = [
      [
        [-1, 1],
        [0, 0],
        [0, 1],
        [1, 1],
      ],
      [
        [1, -1],
        [1, 0],
        [1, 1],
        [2, 0],
      ],
      [
        [0, 0],
        [1, 0],
        [1, 1],
        [2, 0],
      ],
      [
        [0, 0],
        [1, -1],
        [1, 0],
        [1, 1],
      ],
    ];
  }
}

/**
 *****□□*****
 *****□□*****
 **/
...
...

 

그리고 블럭색상에 명암이 들어가면 좋겠다는 의견을 받아 명암을 넣어주었습니다.

 

그리고 제가 키우고 있는 두마리 고양이가 들어가면 좋을것 같아 고양이도 넣고..

 

TITLE도 더 이쁘면 좋을것 같아서 제작해서 넣었습니다.

 

자 이제 결과물입니다.

 

드디어 테트리스가 완성되었습니다.

 

정말 뿌듯하더군요.. ㅠㅠ

 

본업은 안드로이드 개발자이다보니 좋은 코드라고 말은 못하지만 적어도 왕년에 테트리스 만들어봤다 라고 말할 순 있겠네요. ㅎㅎ

 

사실 여기에 담지못한 내용도 많습니다.

 

평생 테트리스를 하면서 한번도 들어보지 못했던 T-spin을 구현해 달라는 요구사항을 듣고, 이 로직을 넣을때는 예상치 못했던 스펙에 머리가 아프더군요..

 

하지만 결국 다 구현했을때는 대단히 성취감이 있었습니다.

 

 

 

제 제작기를 6부까지 완독하신분이면 아시겠지만, 테트리스를 처음부터 끝까지 다 설계하고 개발한 것도 아니고 제가 자바스크립트나 웹개발에 익숙한것도 아닙니다.

 

생각의 흐름대로 개발했고, 마음속에 마일스톤을 그려가며 하나씩 목표를 세우고 이뤄가며 점검했습니다.

 

그래도 단기간에 큰 막힘없이 개발했던것 같습니다.

 

여러분도 뭔가 만들고 싶은것이 있다면 이렇게 저처럼 취미로 하나씩 개발해 보는것은 어떠신가요? ㅎㅎ

 

 

 

물론 이 테트리스에도 아직도 넣지못한 요구사항들이 있고, 제가 넣고 싶은 기능들도 많습니다.

 

테트리스를 완성한 이후로 컨트리뷰터가 한두명씩 늘어서 이제는 저까지 4명의 컨트리뷰터가 오픈소스로써 함께하고 있습니다.

 

그리고 여러분이 또 한 분의 컨트리뷰터가 되어주시면 정말 기쁠것 같습니다.

 

언제든 여러분의 이슈와 PR을 올려주세요!

 

감사합니다.

 

github.com/WoochanLee/BalanceTetris

WoochanLee/BalanceTetris