아케이드 게임은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 테트리스와 횡스크롤 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다.
레트로 게임 콘솔 웹은 클래식 비디오 게임을 브라우저에서 즐길 수 있게 하는 웹 애플리케이션입니다. 이 프로젝트는 순수 HTML, CSS, JavaScript로 구현되어 있으며, 간단한 게임을 재현하여 레트로 감성을 느낄 수 있도록 만들어졌습니다. 횡스크롤 게임과 테트리스 게임을 즐길 수 있습니다.
| 김해린 | 성창민 | 송지원 | 최승환 |
|---|---|---|---|
 |
 |
 |
 |
- HTML: 웹 페이지 마크업
- CSS: 스타일링 및 레이아웃 구성
- JavaScript: 게임 로직 및 상호작용 구현
- 게임 선택: 다양한 레트로 게임 중 선택 가능
- 게임 플레이: 키보드 입력을 이용한 게임 컨트롤
- 스코어 보드: 게임 스코어 저장 및 랭킹 표시
- 사운드 효과: 게임 플레이 중 다양한 사운드 효과 제공
- 애니메이션 효과: 코인 애니메이션, 조이스틱 상하좌우로 움직이는 애니메이션, 버튼 눌리는 애니메이션, 최상위 점수 갱신 시 축하 애니메이션, 게임기 줌인 애니메이션
2024.04.22-2024.04.30
웹 브라우저에서 index.html 파일을 열면, Insert키로 코인을 넣고, 사용 가능한 게임 목록이 표시됩니다. 원하는 게임을 Enter키로 선택하고, 키보드의 방향키 및 지정된 액션 키를 사용하여 게임을 시작하세요.
| 상(위) | 좌(왼쪽) | 우(오른쪽) | 하(아래) | 점프 | 선택 |
|---|---|---|---|---|---|
| ⬆️ | ⬅️ | ➡️ | ⬇️ | Space |
Enter |
- 메인 화면:
insert키를 눌러 코인을 삽입합니다. - 게임 선택 화면: 키보드의 좌우키⬅️➡️를 사용하여 게임을 선택하고,
Enter키로 선택합니다. - 테트리스 게임:
- 첫 화면: 아무 키나 입력하여 게임을 시작합니다.
- 게임 실행 화면: 테트리스 블록이 내려오고, 점수가 자동으로 계산됩니다.
- 이미지 참조
- 좌측 화면: 로컬 스토리지에 저장된 점수와 닉네임이 내림차순으로 정렬되어 표시됩니다. 현재 남은 코인의 개수도 표시됩니다.
- 중간 화면: 테트리스 게임 화면이 표시됩니다. 게임 일시정지 및 게임 오버 시에도 화면에 표시됩니다.
- 우측 화면:
- 상단: 점수가 자동으로 계산되며, 레벨 별 깨진 줄 수와 현재 사용자의 레벨이 표시됩니다.
- 하단: 다음에 나올 테트리스 블록이 표시되고, 소리를 켜거나 끌 수 있으며, 게임을 재개할 수 있는 버튼이 있습니다.
- 횡스크롤 게임:
- 게임 선택 화면: 키보드의 좌우키⬅️➡️를 사용하여 게임 캐릭터를 선택하고,
Enter키로 선택합니다. - 게임 실행 화면: 게임 캐릭터가 점프하고 장애물을 피합니다.
- 게임 오버 화면: 게임 종료 후 닉네임을 입력하고, 현재 1등부터 3등까지의 랭킹 화면을 표시합니다.
- 이미지 참조
- 상단: 현재 남은 코인의 개수와 사용자의 점수가 표시됩니다.
- 게임 선택 화면: 키보드의 좌우키⬅️➡️를 사용하여 게임 캐릭터를 선택하고,
- 게임 도중 일시정지:
Esc키를 누르면 세 가지 메뉴 창이 나옵니다. 게임을 재개하거나 재시작하거나 게임 선택 화면으로 돌아갈 수 있습니다. - 코인: 게임 시작할 때마다 코인을 1개씩 사용합니다. 코인을 모두 사용하면 카운트 다운 화면이 표시되고,
insert키를 눌러 코인을 사용하여 게임을 재시작할 수 있습니다.
| 첫 화면 | 실행 화면 | 이름 입력 | 랭킹 화면 | 일시정지 화면 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 아무 키 입력하고 게임 시작 | 게임 실행 화면 | 게임 오버 후 닉네임 입력받기 | 현재 1등-3등까지 랭킹 화면 | 게임 재개, 게임 재시작, 게임 선택 화면으로 돌아가기 버튼 선택 화면 |
| 첫 화면 | 실행 화면 | 이름 입력 | 랭킹 화면 | 카운트 다운 화면 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| 게임 캐릭터 선택 | 게임 실행 화면 | 게임 오버 후 닉네임 입력받기 | 현재 1등-3등까지 랭킹 화면 | 코인 전부 사용 시, insert coin 화면 |