diff --git a/Readme.md b/Readme.md index 1c22f32..ad99560 100644 --- a/Readme.md +++ b/Readme.md @@ -6,100 +6,52 @@ --- -## :computer: 기능 - -- **게임 선택**: 다양한 레트로 게임 중 선택 가능 -- **게임 플레이**: 키보드를 이용한 게임 컨트롤 -- **스코어 보드**: 게임 스코어 표시 및 최고 점수 저장 -- **사운드 효과**: 게임 플레이 중 다양한 사운드 효과 제공 - +## 목차 +- [프로젝트 개요](#프로젝트-개요) +- [사용자 매뉴얼](#사용자-매뉴얼) +- [실행 화면](#실행-화면) + --- -## :wrench: 설치 방법 - -1. GitHub에서 프로젝트를 클론하세요. - ```bash - git clone https://github.com/KOPO-DA5/Retro-game-console.git - ``` -2. 클론된 폴더로 이동합니다. - ```bash - cd Retro-game-console - ``` -3. `index.html` 파일을 웹 브라우저에서 엽니다. - ---- - -## :video_game: 사용 방법 - -웹 브라우저에서 `index.html` 파일을 열면, 사용 가능한 게임 목록이 표시됩니다. 원하는 게임을 선택하고, 키보드의 방향키 및 지정된 액션 키를 사용하여 게임을 시작하세요. +## 프로젝트 개요 +### 소개 +레트로 게임 콘솔 웹은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 간단한 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다. 횡스크롤 게임과 테트리스 게임을 즐길 수 있습니다. --- -## :memo: 기술 스택 - -- **HTML**: 웹 페이지 마크업 -- **CSS**: 스타일링 및 레이아웃 구성 -- **JavaScript**: 게임 로직 및 상호작용 구현 +### 팀 +- 김해린 +- 성창민 +- 송지원 +- 최승환 --- -## :file_folder: 프로젝트 구조 - -``` -📦Retro-game-console - ┣ 📂audios # 게임 사운드 폴더 - ┃ ┣ 📂dino - ┃ ┣ 📂else - ┃ ┗ 📂tetris - ┣ 📂css # css 폴더 - ┃ ┣ 📜common.css - ┃ ┣ 📜dinosaur.css - ┃ ┗ 📜tetris.css - ┣ 📂images # 게임 이미지 폴더 - ┃ ┣ 📂dinosaur - ┃ ┃ ┣ 📂kirby - ┃ ┃ ┣ 📂mario - ┃ ┃ ┗ 📂mushroom - ┃ ┗ 📂main - ┣ 📂js - ┃ ┣ 📂dinosaur - ┃ ┃ ┣ 📜dinosaur.js - ┃ ┃ ┣ 📜main.js - ┃ ┃ ┗ 📜skin.js - ┃ ┗ 📂tetris - ┃ ┃ ┣ 📜board.js - ┃ ┃ ┣ 📜constants.js - ┃ ┃ ┣ 📜main.js - ┃ ┃ ┣ 📜piece.js - ┃ ┃ ┗ 📜sound.js - ┃ ┣ 📜app.js - ┃ ┣ 📜coin.js - ┃ ┣ 📜gameControler.js - ┃ ┣ 📜globalState.js - ┃ ┗ 📜tetris.js - ┣ 📜index.html - ┗ 📜Readme.md -``` +### 기술 스택 +- HTML: 웹 페이지 마크업 +- CSS: 스타일링 및 레이아웃 구성 +- JavaScript: 게임 로직 및 상호작용 구현 + --- -## :raising_hand: 기여 방법 - -1. 이 프로젝트를 포크합니다. -2. 새로운 브랜치를 만듭니다 (`git checkout -b feature/your_feature`). -3. 변경 사항을 커밋합니다 (`git commit -am 'Add some feature'`). -4. 브랜치에 푸시합니다 (`git push origin feature/your_feature`). -5. 새로운 풀 리퀘스트를 작성합니다. +### 기능 +- **게임 선택**: 다양한 레트로 게임 중 선택 가능 +- **게임 플레이**: 키보드 입력을 이용한 게임 컨트롤 +- **스코어 보드**: 게임 스코어 저장 및 랭킹 표시 +- **사운드 효과**: 게임 플레이 중 다양한 사운드 효과 제공 +- **애니메이션 효과**: 코인 애니메이션, 조이스틱 상하좌우로 움직이는 애니메이션, 버튼 눌리는 애니메이션, 최상위 점수 갱신 시 축하 애니메이션, 게임기 줌인 애니메이션 --- -## :question: 도움말 - -더 많은 정보가 필요하거나 도움이 필요하시면, 담당자를 통해 문의해 주세요. +### 프로젝트 개발 기간 +2024.04.22-2024.04.30 --- -## 소개 -레트로 게임 콘솔 웹은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 간단한 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다. 횡스크롤 게임과 테트리스 게임을 즐길 수 있습니다. +## 사용자 매뉴얼 +### :video_game: 사용 방법 + +웹 브라우저에서 `index.html` 파일을 열면, `Insert`키로 코인을 넣고, 사용 가능한 게임 목록이 표시됩니다. 원하는 게임을 `Enter`키로 선택하고, 키보드의 방향키 및 지정된 액션 키를 사용하여 게임을 시작하세요. --- @@ -107,12 +59,9 @@ ### 게임 이동 방법 -| 이동방향 | 방향키 | -|---------|-------| -| 상(위) | ⬆️ | -| 좌(왼쪽) | ⬅️ | -| 하(아래) | ⬇️ | -| 우(오른쪽)| ➡️ | +| 상(위) | 좌(왼쪽) | 우(오른쪽) | 하(아래) | 점프 | 선택 | +|---------|-------|-------|-------|-------|-------| +| ⬆️ | ⬅️ | ➡️ | ⬇️ | `Space` | `Enter` | - **메인 화면**: `insert` 키를 눌러 코인을 삽입합니다. - **게임 선택 화면**: 키보드의 좌우키⬅️➡️를 사용하여 게임을 선택하고, `Enter` 키로 선택합니다. @@ -135,30 +84,19 @@ - **코인**: 게임 시작할 때마다 코인을 1개씩 사용합니다. 코인을 모두 사용하면 카운트 다운 화면이 표시되고, `insert` 키를 눌러 코인을 사용하여 게임을 재시작할 수 있습니다. --- -### 🕹️ 테트리스 게임 + +## 실행 화면 +### 테트리스 게임 | 첫 화면 | 실행 화면 | 이름 입력 | 랭킹 화면 | 일시정지 화면 | |:---:|:---:|:---:|:---:|:---:| | | | | | | | 아무 키 입력하고 게임 시작 | 게임 실행 화면 | 게임 오버 후 닉네임 입력받기 | 현재 1등-3등까지 랭킹 화면 | 게임 재개, 게임 재시작, 게임 선택 화면으로 돌아가기 버튼 선택 화면 -### 🕹️ 횡스크롤 게임 +### 횡스크롤 게임 | 첫 화면 | 실행 화면 | 이름 입력 | 랭킹 화면 | 카운트 다운 화면 | |:---:|:---:|:---:|:---:|:---:| | | | | | | | 게임 캐릭터 선택 | 게임 실행 화면 | 게임 오버 후 닉네임 입력받기 | 현재 1등-3등까지 랭킹 화면 | 코인 전부 사용 시, insert coin 화면 - ---- - -## 팀 -- 김해린 -- 성창민 -- 송지원 -- 최승환 - ---- - -## 프로젝트 정보 -- 프로젝트 기간: 2024.04.22 - 2024.04.30