제미나이 AI로 만든 웹 기반 테트리스 (Web-based Gemini AI Tetris)

HTML, CSS, JavaScript로 구현된 클래식 테트리스 게임입니다. Gemini Code Assist의 도움을 받아 개발되었으며, 깔끔한 UI와 반응형 디자인, 그리고 AI 플레이 모드를 목표로 합니다.

✨ 주요 기능

style.css와 game.js의 구조를 통해 다음과 같은 핵심 기능들이 구현되었습니다.

• 기본 테트리스 플레이: 블록(테트로미노)의 좌우 이동, 회전, 빠른 드롭(Soft Drop), 한 번에 내리기(Hard Drop) 기능
• 다양한 게임 모드:
  • 마라톤: 점수를 최대한 많이 획득하는 클래식 모드입니다. 레벨이 오를수록 속도가 빨라집니다.
  • 스프린트: 40줄을 최대한 빠른 시간 안에 지우는 타임 어택 모드입니다.
• 게임 보드 및 UI:
  • 점수, 레벨, 다음 블록, 홀드 블록 등 핵심 정보 실시간 표시
  • UI 레이아웃 개편: 시각적 균형과 사용 편의성을 높이기 위해, 기존의 긴 오른쪽 사이드바를 게임 보드 양옆으로 분산시킨 대칭 레이아웃으로 개선했습니다.
• 게임 컨트롤:
  • 블록을 잠시 보관할 수 있는 'Hold' 기능
  • 게임 시작 / 일시정지 / 처음으로 돌아가기 기능 (2024-08-05 개선)
  • 게임 시작 전 난이도(쉬움, 보통, 어려움) 선택 기능
  • 사운드 제어: 게임 효과음 ON/OFF 기능 및 설정 저장
• 향상된 사용자 경험:
  • UI 한글화 및 게임 모드 설명 팝업 제공
  • 시청각 효과 강화: 보너스 텍스트 애니메이션, 게임 효과음, 스크린 쉐이크 및 파티클 효과로 타격감 증대
• 반응형 디자인 및 모바일 지원:
  • PC와 모바일 환경 모두에서 최적화된 화면 레이아웃
  • 모바일 기기를 위한 터치 컨트롤 인터페이스 제공 (2024-08-05 개선)
    • 터치 UI 개선: 버튼 겹침 현상을 해결하고, 일시정지 상태에 따라 버튼 텍스트가 동적으로 변경되도록 하여 조작 편의성을 높였습니다.
• 고급 게임 플레이:
  • T-Spin, 콤보(Combo), Back-to-Back (B2B) 등 고급 기술 구현

🐛 버그 수정 및 개선 (최신순)

• 2024-08-05:
  • ✨ 기능 개선 (Features)
    • 재시작 플로우 변경: '처음으로' 버튼을 누르면 게임이 바로 재시작되지 않고, 사용자가 게임 모드와 난이도를 다시 선택할 수 있는 초기 화면으로 돌아가도록 변경하여 편의성을 높였습니다.
    • 동적 UI 텍스트: 게임의 일시정지 상태에 따라 '일시정지/계속' 버튼의 텍스트가 동적으로 변경되도록 하여, 현재 상태를 명확히 알 수 있도록 개선했습니다.
  • 🐛 버그 수정 (Bug Fixes)
    • 모바일 터치 UI: 모바일 환경에서 터치 컨트롤 버튼들이 서로 겹쳐서 표시되던 레이아웃 문제를 해결했습니다.
    • 사운드 재생 안정화: 일부 브라우저에서 사용자 상호작용 없이 오디오를 재생할 수 없는 정책(Autoplay Policy)으로 인해 사운드가 간헐적으로 재생되지 않던 문제를 수정하여, 사운드 시스템의 전반적인 안정성을 향상시켰습니다.
• 2024-08-04:
  • 점수 로직 수정: 4줄을 클리어했을 때 'Triple!'이 아닌 'TETRIS!'가 정상적으로 표시되도록 보너스 텍스트 로직을 수정했습니다.
• 날짜 정확치 않음
  • ✨ 기능 개선 (Features)
    • 게임 오버 화면 개선: 게임 오버 시 최종 점수와 클리어한 줄 수를 명확하게 표시하도록 UI를 개선했습니다.
  • 🛠️ 리팩토링 (Refactoring)
    • 점수 계산 로직 분리: game.js 내에 흩어져 있던 점수 계산 관련 코드를 calculateScore() 함수로 통합하여 코드 구조를 개선하고 가독성을 높였습니다.

## 🛠️ 개발 워크플로우 및 사용 기술

이 프로젝트는 웹 표준 기술인 HTML, CSS, JavaScript를 기반으로 각 파일이 명확한 역할을 수행하도록 개발되었습니다.

1.  **`index.html` (구조)**
    -   게임의 전체적인 HTML 구조를 정의합니다.
    -   게임 보드, 다음 블록, 홀드 블록을 그릴 `<canvas>` 요소를 배치합니다.
    -   점수, 레벨 등 정보를 표시할 사이드바와 시작, 일시정지 등 컨트롤 버튼들을 배치합니다.
    -   `style.css`와 `game.js` 파일을 로드하여 웹 페이지에 적용합니다.

2.  **`style.css` (디자인)**
    -   게임의 모든 시각적 요소를 담당합니다.
    -   Flexbox를 사용하여 게임 보드를 중심으로 좌우 대칭 사이드바를 배치하는 유연하고 반응형인 레이아웃을 구성합니다.
    -   어두운 테마의 색상, 폰트, 버튼 스타일을 정의합니다.
    -   `@keyframes`를 이용해 줄 제거 시 나타나는 텍스트 애니메이션 효과를 구현합니다.
    -   미디어 쿼리나 JavaScript 클래스 토글을 통해 모바일 환경용 터치 컨트롤 UI의 스타일을 적용합니다.

3.  **`game.js` (로직)**
    -   게임의 모든 핵심 로직을 포함하는 엔진 역할을 합니다.
    -   `requestAnimationFrame`을 사용해 부드러운 게임 루프를 생성합니다.
    -   테트로미노의 형태, 색상, 회전 규칙을 정의합니다.
    -   키보드 이벤트(PC)와 터치 이벤트(모바일)를 감지하여 사용자 입력을 처리합니다.
    -   블록의 충돌(벽, 바닥, 다른 블록)을 감지하고 게임 보드 상태를 업데이트합니다.
    -   가득 찬 줄을 감지하고 제거하며, 점수와 레벨을 계산합니다.
    -   게임의 상태(시작 전, 플레이 중, 일시정지, 게임 오버)를 관리합니다.

## 🚀 실행 방법

이 프로젝트는 별도의 서버나 설치 과정 없이 브라우저에서 바로 실행할 수 있습니다.

1.  이 저장소의 파일들을 다운로드하거나 클론합니다.
2.  폴더에서 `index.html` 파일을 웹 브라우저(Chrome, Firefox 등)로 열어주세요.

## 🖼️ 스크린샷

**최신 UI (대칭 레이아웃)**

<img width="626" height="764" alt="image" src="https://github.com/user-attachments/assets/9f8d6a24-5abd-4add-8d81-77f2ca6382c0" />

**이전 UI (개편 전)**

<img width="494" height="865" alt="image" src="https://github.com/user-attachments/assets/15d42ebd-53b1-49c0-9141-a6d9f93301e1" />
<img width="507" height="868" alt="image" src="https://github.com/user-attachments/assets/5ce74189-8078-41d2-b092-4070f96498a9" />