1. 우리는 플래피 버드 게임을 다국어 지원까지 해 보았다. 이 정도면 게임을 만들 수 있을 것이다.
2. 이제 기존 플래피 버드 게임에서 메뉴와 세팅화면은 그대로 둔 채, 게임 클래스를 고쳐서 테트리스를 만들어 보자.
3. 시작할 프로젝트 파일은 테트리스 스타팅파일이다¹⁾
4. 그 전에 C / C++ 에서 정적라이브러리 만들기를 읽어보자. 여기에서 사용한 예제 파일을 기반으로 프로젝트를 시작할 것이다. 즉, 테트리스는 gui와 buttonActionMap을 a파일로 만든 후에 시작하는 것이다.

테트리스는 가로 20열, 세로 40행 혹은 어느 임의의 수든 간에 그 정도의 배열을 가지고 그 안에 블록들이 어떻게 있는지를 판단한 후, 블록들이 한 줄에 있으면 그 한 줄을 지우는 게임이다.

여기서 그리드라는 개념이 등장한다. 각 배열의 원소에 대응하는 그림을 그리게 되는 것이다.

이렇게 2차원 배열로 그리드를 만들고 그 그리드에 대응하는 그림을 그리면 우리가 알고 있는 대부분의 타일 베이스 게임이 될 것이다.

따라서 그리드를 응용하면 2D 게임을 바로 만들 수 있다.

game.h에 다음과 같이 멤버변수를 선언하자.

grid에 사용될 행의 갯수와 열의 갯수, 그리고 셀의 사이즈를 정하는 것이다.

그리고 컬러 값도 배열로 만들어서 숫자를 통하여 컬러 값을 정할 것이다.

    private: 
        void Draw(); 
        void Update();
        void DrawBackground();
 
        // 게임 패드 
        int gamepad = 0; // 제일 처음에 꽂은 게임패드만 사용하도록 하자. 제일 처음이므로 0이다. 
 
        // 테트리스 설정
        int numCols; // 컬럼 갯수
        int numRows;  // 행의 갯수
        int paddingX; // 화면 x 패딩 
        int paddingY; // 화면 y 패딩 
        int cellSize; // 셀의 크기 
 
        int backGrid[20][10]; // 그리드의 크기 20행 10열 
 
        // Color Pallette 
        Color colors[5] = {BLACK, RAYWHITE, DARKGREEN, YELLOW, RED};

가로 20 세로 10의 그리드 행렬에는 숫자값(int)을 저장한다. 이 숫자에 따라 해당 셀의 색상이 바뀌는 것이다.

0은 블랙, 1은 흰색, 2는 어두운녹색, 3은 노랑, 4는 빨강색으로 그려준다.

먼저 game 클래스가 생성될 때 각 값들을 초기화해야 한다.

Game::Game()
{
    numCols = 10;
    numRows = 20;
    paddingX = 100;
    paddingY = 100;
    cellSize = 30;
 
    for (int i = 0; i < 20; i++)
    {
        for (int j =0; j < 10; j++)
        {
            backGrid[i][j] = 0;
        }
    }
 
    backGrid[18][2] = 3;
    backGrid[18][3] = 3;
    backGrid[19][3] = 3;
 
}

그리드 전체를 0으로 하여 검은색으로 덮되, 맨 아래쪽 몇개는 노랑색이 나오게 해보았다.

따로 DrawBackground()함수를 호출하게 한 후에, 그 DrawBackground()함수를 다음과 같이 만들었다.

void Game::DrawBackground()
{
    ClearBackground(DARKBLUE);
 
 
    for (int row = 0; row < numRows; row++)
    {
        for (int column = 0; column < numCols; column++)
        {
            int cellValue = backGrid[row][column];
            DrawRectangle(paddingX + column * cellSize, paddingY + row*cellSize, cellSize - 5 , cellSize - 5 , colors[cellValue]);
        }
    }
}