🎮 DevAi Tetris Game 🧩

서비스 설명

DevAi Tetris Game은 클래식 테트리스 게임을 현대적인 웹 환경에서 즐길 수 있도록 제작된 웹 애플리케이션입니다. 이 게임은 최신 웹 기술을 활용하여 개발되었으며, 사용자 친화적인 인터페이스와 반응형 디자인을 갖추고 있어 다양한 기기에서 최적의 게임 경험을 제공합니다.

주요 기능으로는 다양한 모양의 테트로미노 블록을 회전시키고 이동시켜 라인을 완성시키는 게임 플레이, 실시간으로 점수와 레벨, 게임 시간을 표시하는 인터페이스, 최고 점수를 기록하고 순위를 조회할 수 있는 기능 등이 포함되어 있습니다. 또한, 모바일 기기에서도 원활하게 게임을 즐길 수 있도록 가상 조작 버튼을 제공하며, 배경 음악과 효과음을 통해 몰입감을 높였습니다.

이 테트리스 게임은 Netlify를 통해 배포되었으며, Firebase를 사용하여 점수 저장 및 순위 관리를 처리합니다. 게임을 통해 자신의 기록을 세우고, 다른 플레이어와 경쟁하며, 클래식 테트리스의 재미를 다시 한번 느껴보세요!

기능 설명

Game Board: 테트리스 블록들이 내려오는 10x20 크기의 게임 보드입니다. 각 블록은 다양한 모양을 가지며, 게임 보드 위에 쌓이게 됩니다.
Tetrominos: 게임에 사용되는 테트리스 블록입니다. I, O, T, S, Z, J, L 모양의 블록들이 랜덤하게 생성됩니다.
Score and Level: 게임 도중에 블록을 잘 쌓아 완성된 줄을 지울 때마다 점수가 증가합니다. 특정 점수에 도달하면 레벨이 올라가고, 게임 속도가 빨라집니다.
Time: 게임 시작 후 경과 시간을 초 단위로 표시합니다.
High Score: 지금까지 기록된 최고 점수와 해당 점수를 기록한 플레이어의 이름과 레벨을 표시합니다.
Game Controls:
- Start Game: 게임을 시작합니다.
- Pause Game: 게임을 일시 정지합니다.
- Stop Game: 게임을 종료하고 초기화합니다.
- View Scores: 기록된 순위를 확인할 수 있는 버튼입니다.
Mobile Controls: 모바일 기기에서 게임을 조작할 수 있는 버튼들입니다. 방향키와 회전 버튼이 포함되어 있습니다.
Game Over Modal: 게임 종료 시 팝업 창이 나타나 현재 점수와 레벨을 보여주고, 이름을 입력하여 점수를 저장할 수 있는 기능을 제공합니다.
Rankings Modal: 저장된 점수를 바탕으로 순위를 표시합니다. 최고 점수와 레벨, 이름을 확인할 수 있습니다.
Audio: 게임 배경 음악과 블록이 삭제될 때 재생되는 효과음을 제공합니다.
Local Storage: 브라우저의 로컬 스토리지를 사용하여 최고 점수와 순위를 저장합니다.
Responsive Design: 화면 크기에 따라 PC와 모바일에서 게임 UI가 적절하게 표시됩니다. 모바일에서는 가상 조작 버튼이 추가로 표시됩니다.
Footer: 게임 하단에 저작권 및 문의 정보를 표시합니다.
Pause and Resume: 게임을 일시 정지하거나 다시 시작할 수 있는 기능을 제공합니다.
Clear Lines: 한 줄이 완성되면 해당 줄을 삭제하고 점수를 증가시킵니다. 한 번에 여러 줄을 지울 경우 추가 점수를 제공합니다.
Level Up: 점수에 따라 레벨이 올라가고, 레벨이 올라갈수록 블록이 내려오는 속도가 빨라집니다.

이와 같은 기능들을 통해 Tetris Game은 재미있고 도전적인 게임 경험을 제공합니다.

개발 스택

프론트엔드:
- HTML5: 게임 구조와 콘텐츠를 구성합니다.
- CSS3: 게임의 스타일링과 레이아웃을 정의합니다.
- JavaScript: 게임 로직과 사용자 인터랙션을 구현합니다.
백엔드 및 배포:
- Netlify: 정적 웹 사이트와 서버리스 함수 배포를 위한 플랫폼입니다.
- Firebase Functions: 클라우드 함수로, 점수 저장 및 순위 조회 등의 기능을 처리합니다.
- Local Storage: 브라우저의 로컬 스토리지를 사용하여 사용자 점수를 저장합니다.
기타 도구:
- Generative AI: 게임 기능 설명과 개발 방법 문서화를 위해 ChatGPT 4와 Claude를 사용합니다.
- Version Control: GitHub을 사용하여 코드 버전 관리 및 협업을 수행합니다.

개발 방법

게임 보드 및 테트로미노:
- 게임 보드: 10x20 크기의 그리드를 생성하여 테트리스 블록들이 쌓이는 영역을 만듭니다.
- 테트로미노: I, O, T, S, Z, J, L 모양의 블록들을 정의하고, 랜덤하게 생성되도록 합니다.
게임 로직:
- 블록 이동 및 회전: 블록이 좌우로 이동하고, 회전하며 아래로 떨어지도록 구현합니다.
- 라인 삭제: 한 줄이 완성되면 해당 줄을 삭제하고 점수를 증가시킵니다.
- 레벨 업: 점수에 따라 레벨이 올라가고, 블록이 내려오는 속도가 빨라집니다.
사용자 인터페이스:
- 점수 및 레벨: 현재 점수와 레벨을 화면에 표시합니다.
- 게임 시간: 게임 시작 후 경과 시간을 초 단위로 표시합니다.
- 최고 점수: 최고 점수와 해당 점수를 기록한 플레이어의 이름과 레벨을 표시합니다.
게임 제어:
- 게임 시작: 게임을 시작하는 버튼을 제공합니다.
- 일시 정지 및 재개: 게임을 일시 정지하고 다시 시작할 수 있는 기능을 제공합니다.
- 게임 종료: 게임을 종료하고 초기화하는 버튼을 제공합니다.
오디오 기능:
- 배경 음악: 게임 중 배경 음악을 재생합니다.
- 효과음: 블록이 삭제될 때 효과음을 재생합니다.
반응형 디자인:
- 모바일 지원: 화면 크기에 따라 적절하게 UI를 조정하여 PC와 모바일에서 모두 플레이할 수 있도록 합니다.
- 가상 조작 버튼: 모바일 기기에서 게임을 조작할 수 있는 가상 버튼을 제공합니다.
개발 단계:
1. 프로젝트 설정: HTML, CSS, JavaScript 파일을 생성하고 기본적인 프로젝트 구조를 설정합니다. GitHub 저장소를 생성하여 코드 버전 관리를 시작합니다.
2. 게임 보드 및 테트로미노 구현: HTML을 사용하여 게임 보드 구조를 정의하고, CSS로 스타일링을 추가합니다. JavaScript로 테트로미노의 모양과 이동, 회전 로직을 구현합니다.
3. 게임 로직 구현: 블록이 내려오고, 충돌 시 멈추며, 라인을 삭제하는 로직을 추가합니다. 점수와 레벨, 게임 시간을 계산하고 화면에 표시합니다.
4. 사용자 인터페이스 및 제어: 점수, 레벨, 시간 등을 표시하는 UI 요소를 추가합니다. 게임 시작, 일시 정지, 종료 버튼을 추가하고 기능을 연결합니다.
5. 오디오 기능 추가: 배경 음악과 효과음을 추가하고, 게임 이벤트에 맞춰 재생되도록 합니다.
6. 반응형 디자인: CSS 미디어 쿼리를 사용하여 모바일 및 PC 환경에서 적절하게 UI가 조정되도록 합니다. 모바일에서 사용할 수 있는 가상 조작 버튼을 추가합니다.
7. 백엔드 및 배포: Firebase Functions를 사용하여 점수 저장 및 순위 조회 기능을 구현합니다. Netlify를 통해 프로젝트를 배포하고, Firebase와 연결합니다.
8. 테스트 및 디버깅: 다양한 환경에서 게임을 테스트하고, 버그를 수정합니다. 사용자 피드백을 반영하여 게임을 개선합니다.