[javascript] 자바스크립트로 테트리스 게임 개발하기

14 Dec 2023

javascript

테트리스는 많은 사람들이 즐기는 인기 있는 게임 중 하나입니다. 이 게임을 자바스크립트로 개발하여 브라우저에서 플레이할 수 있도록 만들어보겠습니다.

필수 기능

우리의 테트리스 게임은 다음과 같은 기능을 포함해야 합니다:

모양을 바꿀 수 있는 블록들
블록을 이동시키고 회전시키는 기능
블록이 쌓여 채워진 줄을 제거하는 기능
블록이 화면 맨 위에 도달하면 게임이 종료되는 기능

게임판 만들기

우선 HTML과 CSS를 사용하여 게임판을 만들어야 합니다. 게임판은 테트리스 블록들이 떨어지는 공간입니다. HTML과 CSS를 사용하여 간단한 게임판을 만들어봅시다.

<div class="game-board"></div>

.game-board {
  width: 300px;
  height: 600px;
  border: 2px solid #000;
}

블록 만들기

자바스크립트로 테트리스 블록들을 만들어 봅시다. 각 블록은 작은 정사각형으로 이루어져 있습니다. 여러 가지 모양의 블록을 만들고, 이를 게임판에 랜덤하게 나타나도록 설정합니다.

class Block {
  constructor(shape) {
    this.shape = shape;
    this.x = 0;
    this.y = 0;
  }

  moveDown() {
    this.y += 1;
  }

  moveLeft() {
    this.x -= 1;
  }

  moveRight() {
    this.x += 1;
  }

  rotate() {
    // 블록을 회전시키는 코드 작성
  }
}

const shapes = [
  [[1, 1, 1],
   [0, 1, 0]],
  // 다른 모양들 추가
];
const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
const block = new Block(randomShape);

게임 로직 추가

이제 게임 로직을 추가하여 블록이 아래로 계속 떨어지고, 키보드 입력에 따라 블록을 움직일 수 있도록 만들어 봅시다.

function gameLoop() {
  // 게임 로직 작성
}

document.addEventListener('keydown', event => {
  if (event.keyCode === 37) {
    // 왼쪽 키 눌렀을 때 블록을 왼쪽으로 이동
  } else if (event.keyCode === 39) {
    // 오른쪽 키 눌렀을 때 블록을 오른쪽으로 이동
  } else if (event.keyCode === 40) {
    // 아래쪽 키 눌렀을 때 블록을 아래로 이동
  } else if (event.keyCode === 38) {
    // 위쪽 키 눌렀을 때 블록을 회전
  }
});

setInterval(gameLoop, 1000);

결론

이제 자바스크립트로 기본적인 테트리스 게임을 만들어 보았습니다. 하지만 아직 많은 추가 기능들이 필요합니다. 새로운 블록 생성, 게임오버 상태 처리, 점수 계산 등 다양한 기능을 추가하여 완전한 테트리스 게임을 완성할 수 있습니다.

테트리스 게임을 더 발전시키는 방법에 대해 궁금하다면 Tetris: From Russia With Love 를 읽어보세요.