웹 기반 테트리스 게임 JavaScript, HTML, CSS 조합

 

 

 

 

웹 기반 테트리스 게임 제품 요구사항 문서 (PRD)
  1. 개요 (Introduction)
  2. 목표 (Goals)
  3. 타겟 사용자 (Target Audience)
  4.1. 게임 보드 (Game Board)
  *   게임은 10x20 크기의 그리드 형태의 보드에서 진행됩니다.
  *   보드는 항상 화면에 명확하게 표시되어야 합니다.
  4.2. 테트로미노 (Tetriminos - 블록)
  *   게임에는 7가지 종류의 테트로미노(I, O, T, L, J, S, Z)가 사용됩니다.
  *   각 테트로미노는 고유한 모양과 색상을 가집니다.
  *   블록은 보드 상단 중앙에서 무작위로 생성되어 아래로 떨어집니다.
  4.3. 블록 조작 (Player Controls)
     좌/우 이동:* 사용자는 키보드 방향키(←, →)를 사용하여 떨어지는 블록을 좌우로 한 칸씩 이동시킬 수
  있습니다.
     회전 (Rotation):* 사용자는 키보드 위쪽 방향키(↑)를 사용하여 블록을 시계 방향으로 90도 회전시킬 수
  있습니다.
     소프트 드롭 (Soft Drop):* 사용자는 키보드 아래쪽 방향키(↓)를 눌러 블록을 현재 속도보다 빠르게 아래로
  내릴 수 있습니다.
     하드 드롭 (Hard Drop):* 사용자는 스페이스바(Spacebar)를 눌러 블록을 즉시 바닥 또는 다른 블록 위로
  떨어뜨릴 수 있습니다.
     일시정지 (Pause):* 사용자는 'P' 키를 눌러 게임을 일시정지하거나 재개할 수 있습니다.
  4.4. 줄 완성 및 점수 (Line Clearing & Scoring)
  *   가로 한 줄이 빈칸 없이 블록으로 모두 채워지면 해당 줄은 사라집니다.
  *   점수는 한 번에 없앤 줄의 수에 따라 차등 지급됩니다. (예: 1줄: 100점, 4줄: 800점)
  4.5. 레벨 시스템 (Level System)
  *   10줄을 없앨 때마다 레벨이 1씩 증가하며, 레벨이 오르면 블록이 떨어지는 속도가 점차 빨라집니다.
  4.6. 게임 오버 (Game Over)
  *   블록이 보드 맨 위까지 쌓여 더 이상 새로운 블록이 나타날 공간이 없으면 게임이 종료됩니다.
  *   게임 오버 시, "Game Over" 메시지와 최종 점수를 표시하고, 게임을 다시 시작할 수 있는 옵션을 제공합니다.
  5. UI/UX 요구사항 (User Interface & Experience)
  6. 비기능적 요구사항 (Non-Functional Requirements)
  7. 기술 스택 (Technology Stack)
  8. 향후 개선 사항 (Future Enhancements - Out of Scope for V1)

 

 

구현된 주요 기능들
1. 게임 보드 (10x20 그리드)

CSS Grid를 사용하여 정확한 10x20 크기의 게임 보드 구현
각 셀은 30x30px 크기로 명확하게 표시

2. 7가지 테트로미노 (I, O, T, L, J, S, Z)

각 블록마다 고유한 색상과 모양 정의
보드 상단 중앙에서 무작위 생성

3. 블록 조작 시스템

좌/우 이동: 방향키 ← →
회전: 위쪽 방향키 ↑ (시계방향 90도)
소프트 드롭: 아래쪽 방향키 ↓
하드 드롭: 스페이스바 (즉시 바닥으로)
일시정지: P키

4. 점수 및 레벨 시스템

1줄: 100점, 2줄: 300점, 3줄: 500점, 4줄: 800점
10줄 완성시마다 레벨 증가
레벨 상승 시 블록 낙하 속도 증가

5. 게임 오버 처리

블록이 보드 최상단에 도달하면 게임 종료
최종 점수, 레벨, 완성 줄 수 표시
재시작 버튼 제공

6. UI/UX 요소

현재 점수/레벨/줄 수 표시
다음 블록 미리보기
조작법 안내
일시정지 오버레이
반응형 디자인 (모바일 지원)

7. 추가 구현된 기능들

시각적 효과: 그라데이션 배경, 글래스모피즘 효과
충돌 감지 시스템: 정확한 블록 충돌 및 경계 검사
애니메이션: 부드러운 hover 효과
접근성: 키보드 전용 조작 가능

게임 조작법

←/→: 블록 좌우 이동
↑: 블록 회전
↓: 빠른 하강 (소프트 드롭)
Space: 즉시 하강 (하드 드롭)
P: 일시정지/재개

 

tetris_game.html

0.02MB

 

 

https://claude.ai/public/artifacts/16f77c57-4fe5-4b98-acfd-1492e4f28eee