아케이드 게임은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 테트리스와 횡스크롤 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다.

• 게임 선택: 다양한 레트로 게임 중 선택 가능
• 게임 플레이: 키보드를 이용한 게임 컨트롤
• 스코어 보드: 게임 스코어 표시 및 최고 점수 저장
• 사운드 효과: 게임 플레이 중 다양한 사운드 효과 제공

1. GitHub에서 프로젝트를 클론하세요.

   git clone https://github.com/KOPO-DA5/Retro-game-console.git

2. 클론된 폴더로 이동합니다.

   cd Retro-game-console

3. index.html 파일을 웹 브라우저에서 엽니다.

웹 브라우저에서 index.html 파일을 열면, 사용 가능한 게임 목록이 표시됩니다. 원하는 게임을 선택하고, 키보드의 방향키 및 지정된 액션 키를 사용하여 게임을 시작하세요.

• HTML: 웹 페이지 마크업
• CSS: 스타일링 및 레이아웃 구성
• JavaScript: 게임 로직 및 상호작용 구현

📦Retro-game-console
 ┣ 📂audios # 게임 사운드 폴더
 ┃ ┣ 📂dino # 다이노 게임에서 사용될 소리 모음 폴더
 ┃ ┣ 📂else # 메인 페이지나 공통적으로 사용될 모음 폴더
 ┃ ┗ 📂tetris # 테트리스 게임에서 사용될 소리 모음 폴더
 ┣ 📂css # css 폴더
 ┃ ┣ 📜common.css # 공통 css
 ┃ ┣ 📜dinosaur.css # 공룡 css
 ┃ ┗ 📜tetris.css # 테트리스 css
 ┣ 📂images # 게임 이미지 폴더
 ┃ ┣ 📂dinosaur
 ┃ ┃ ┣ 📂kirby # 커비 스킨의 이미지 폴더
 ┃ ┃ ┣ 📂mario # 마리오 스킨의 이미지 폴더
 ┃ ┃ ┗ 📂mushroom # 주황버섯 스킨의 이미지 폴더
 ┃ ┗ 📂main
 ┣ 📂js
 ┃ ┣ 📂dinosaur
 ┃ ┃ ┣ 📜dinosaur.js # 공룡 게임의 요소와 js를 로드하는 js
 ┃ ┃ ┣ 📜main.js # 공룡 게임의 실행 로직이 담긴 js, 즉시 실행 함수로 선언됨
 ┃ ┃ ┗ 📜skin.js # 스킨 선택창의 요소와 js를 로드 하는 js
 ┃ ┗ 📂tetris
 ┃ ┃ ┣ 📜board.js # 테트리스 게임판에 대한 js 
 ┃ ┃ ┣ 📜constants.js # 각종 상수들을 담은 js
 ┃ ┃ ┣ 📜main.js # 테트리스 게임의 실행 로직을 담은 js
 ┃ ┃ ┣ 📜piece.js # 테트리스 블럭에 대한 js
 ┃ ┃ ┗ 📜sound.js # 테트리스 소리에 대한 js
 ┃ ┣ 📜app.js # 게임들을 선택하는 js
 ┃ ┣ 📜coin.js # 코인 개수를 전역으로 관리하기 위한 js
 ┃ ┣ 📜gameControler.js # 조이스틱의 상태와 이미지들을 관리하는 js
 ┃ ┣ 📜globalState.js # 게임과 이벤트 리스너 등의 상태를 관리하는 js 
 ┃ ┗ 📜tetris.js # 테트리스 게임을 불러오는 js
 ┣ 📜index.html # SPA를 담당하는 View
 ┗ 📜Readme.md

1. 이 프로젝트를 포크합니다.
2. 새로운 브랜치를 만듭니다 (git checkout -b feature/your_feature).
3. 변경 사항을 커밋합니다 (git commit -am 'Add some feature').
4. 브랜치에 푸시합니다 (git push origin feature/your_feature).
5. 새로운 풀 리퀘스트를 작성합니다.

더 많은 정보가 필요하거나 도움이 필요하시면, 담당자를 통해 문의해 주세요.

레트로 게임 콘솔 웹은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 간단한 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다. 횡스크롤 게임과 테트리스 게임을 즐길 수 있습니다.

• 자율성: 플레이어는 자신의 가고자 하는 방향으로 게임을 진행할 수 있습니다. 게임은 제한 없이 플레이어의 활동에 따라 진행됩니다.
• 힐링: 게임은 긴장감과 압박감을 느끼기보다는 편안한 분위기를 제공하여 플레이어가 게임을 즐기는 것에 중점을 두었습니다.
• 다양한 활동: 마을에서는 채집, 농사, 요리 등의 활동을 할 수 있으며, 숲에서는 몬스터와 싸우고 낚시를 즐길 수 있습니다.

• 메인 화면: insert 키를 눌러 코인을 삽입합니다.
• 게임 선택 화면: 키보드의 좌우키⬅️➡️를 사용하여 게임을 선택하고, Enter 키로 선택합니다.
• 테트리스 게임:
  • 첫 화면: 아무 키나 입력하여 게임을 시작합니다.
  • 게임 실행 화면: 테트리스 블록이 내려오고, 점수가 자동으로 계산됩니다.
  • 이미지 참조
  • 좌측 화면: 로컬 스토리지에 저장된 점수와 닉네임이 내림차순으로 정렬되어 표시됩니다. 현재 남은 코인의 개수도 표시됩니다.
  • 중간 화면: 테트리스 게임 화면이 표시됩니다. 게임 일시정지 및 게임 오버 시에도 화면에 표시됩니다.
  • 우측 화면:
    • 상단: 점수가 자동으로 계산되며, 레벨 별 깨진 줄 수와 현재 사용자의 레벨이 표시됩니다.
    • 하단: 다음에 나올 테트리스 블록이 표시되고, 소리를 켜거나 끌 수 있으며, 게임을 재개할 수 있는 버튼이 있습니다.
• 횡스크롤 게임:
  • 게임 선택 화면: 키보드의 좌우키⬅️➡️를 사용하여 게임 캐릭터를 선택하고, Enter 키로 선택합니다.
  • 게임 실행 화면: Space키를 누르면 게임 캐릭터가 점프하고 장애물을 피합니다.
  • 게임 오버 화면: 게임 종료 후 닉네임을 입력하고 Enter키를 눌러 제출합니다, 현재 1등부터 3등까지의 랭킹 화면을 표시합니다.
  • 이미지 참조
  • 상단: 현재 남은 코인의 개수와 사용자의 점수가 표시됩니다.
• 게임 도중 일시정지: Esc 키를 누르면 세 가지 메뉴 창이 나옵니다. 게임을 재개하거나 재시작하거나 게임 선택 화면으로 돌아갈 수 있습니다.
• 코인: 게임 시작할 때마다 코인을 1개씩 사용합니다. 코인을 모두 사용하면 카운트 다운 화면이 표시되고, insert 키를 눌러 코인을 사용하여 게임을 재시작할 수 있습니다.

첫 화면	실행 화면	이름 입력	랭킹 화면	일시정지 화면
아무 키 입력하고 게임 시작	게임 실행 화면	게임 오버 후 닉네임 입력받기	현재 1등-3등까지 랭킹 화면	게임 재개, 게임 재시작, 게임 선택 화면으로 돌아가기 버튼 선택 화면

첫 화면	실행 화면	이름 입력	랭킹 화면	카운트 다운 화면
게임 캐릭터 선택	게임 실행 화면	게임 오버 후 닉네임 입력받기	현재 1등-3등까지 랭킹 화면	코인 전부 사용 시, insert coin 화면

김해린	성창민	송지원	최승환

• 프로젝트 기간: 2024.04.22 - 2024.04.30