2048 머지게임

웹 브라우저에서 플레이할 수 있는 2048 머지게임입니다. Amazon Q를 사용하여 개발되었습니다.

🎮 게임 소개

2048은 4×4 격자에서 타일을 이동시켜 같은 숫자끼리 합쳐서 2048 타일을 만드는 퍼즐 게임입니다.

게임 방법

• 방향키(↑↓←→) 또는 스와이프로 타일을 이동
• 같은 숫자의 타일이 충돌하면 하나로 합쳐집니다
• 2048 타일을 만들면 승리!
• 더 이상 이동할 수 없으면 게임 오버

🚀 라이브 데모

웹사이트: http://merge2048byamazonq.s3-website-us-east-1.amazonaws.com

🛠 기술 스택

• HTML5: 시맨틱한 마크업
• CSS3: 반응형 디자인, 애니메이션
• JavaScript (ES6+): 클래스 기반 게임 로직
• AWS S3: 정적 웹사이트 호스팅

📁 프로젝트 구조

merge2048/
├── src/
│   ├── index.html      # 메인 HTML 파일
│   ├── style.css       # 스타일시트
│   └── script.js       # 게임 로직
├── docs/
│   ├── gamerule.md     # 게임 규칙
│   └── development-specification.md  # 개발 명세서
├── .amazonq/
│   └── rules/
│       └── merge2048-rules.md  # Amazon Q 개발 규칙
└── README.md

🎯 주요 기능

• ✅ 4×4 격자 게임 보드
• ✅ 방향키 및 터치/스와이프 지원
• ✅ 타일 병합 로직
• ✅ 점수 시스템 및 최고점수 저장
• ✅ 승리/패배 조건
• ✅ 반응형 디자인 (모바일 최적화)
• ✅ 부드러운 애니메이션

🎨 디자인 특징

• 원작 2048 게임의 색상 스키마 재현
• 모바일과 데스크톱 모두에서 최적화된 UI
• CSS 변수를 활용한 일관된 색상 관리
• 접근성을 고려한 디자인

💻 로컬 실행 방법

1. 리포지토리 클론

git clone https://github.com/geoseong/merge2048.git
cd merge2048

2. 웹 서버 실행 (선택사항)

# Python 3
python -m http.server 8000

# Node.js (http-server 설치 필요)
npx http-server src/

3. 브라우저에서 src/index.html 파일 열기

🏗 개발 정보

코드 품질

• 클래스 기반 구조: 유지보수하기 쉬운 OOP 설계
• 모듈화: 기능별로 메서드 분리
• 상세한 주석: JSDoc 스타일 문서화
• 네이밍 컨벤션: 일관된 코딩 스타일

성능 최적화

• 효율적인 DOM 조작
• CSS 트랜지션을 활용한 부드러운 애니메이션
• localStorage를 통한 최고점수 영구 저장

📱 브라우저 호환성

• Chrome (권장)
• Firefox
• Safari
• Edge
• 모바일 브라우저 (iOS Safari, Chrome Mobile)

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

👨‍💻 개발자

TaeSeong Park - imf4@naver.com

🙏 감사의 말

• 원작 2048 게임을 개발한 Gabriele Cirulli
• Amazon Q를 통한 AI 기반 개발 지원
• AWS S3를 통한 정적 웹사이트 호스팅

---

⭐ 이 프로젝트가 마음에 드셨다면 Star를 눌러주세요!