jQuery를 사용하여 만든 간단한 경마 게임입니다. 키보드 입력으로 내 말을 조작하여 다른 말들과 경주하는 게임입니다.
- 난이도를 선택합니다 (EASY, NORMAL, HARD)
- START 버튼을 클릭하여 게임을 시작합니다
- 키보드의 아무 키나 눌러서 4번 레인(내 말)을 움직입니다
- 먼저 결승선에 도달하는 말이 승리합니다
- 게임이 끝나면 순위가 표시됩니다
- 4개의 레인: 1~3번 레인은 자동으로 움직이고, 4번 레인은 플레이어가 조작
- 3가지 난이도:
- EASY: 느린 속도 (1400ms 간격)
- NORMAL: 보통 속도 (800ms 간격)
- HARD: 빠른 속도 (500ms 간격)
- 실시간 순위: 게임 종료 시 1위부터 4위까지 순위 표시
- 리셋 기능: RESET 버튼으로 게임 초기화
- HTML5: 게임 구조
- CSS3: 스타일링 및 레이아웃
- JavaScript (jQuery): 게임 로직 및 상호작용
- jQuery 3.7.1: DOM 조작 및 이벤트 처리
project_0605/
├── project_0605.html # 메인 HTML 파일
├── project_0605.css # 스타일시트
├── project_0605.js # 게임 로직
├── assets/
│ ├── background.jpg # 배경 이미지
│ └── hourse.gif # 말 애니메이션 이미지
└── README.md
- 프로젝트를 다운로드하거나 클론합니다
git clone [repository-url]-
assets폴더에 필요한 이미지 파일들을 추가합니다:background.jpg: 배경 이미지hourse.gif: 말 애니메이션 이미지
-
project_0605.html파일을 웹 브라우저에서 열어 게임을 실행합니다
- 헤더: 게임 제목 (주황색 배경)
- 트랙: 4개의 갈색 레인과 말들
- 순위 표시: 게임 결과 및 안내 메시지
- 컨트롤: 리셋 버튼, 난이도 선택, 시작 버튼
gameStart(level): 선택한 난이도로 게임 시작stopGame(): 게임 종료 및 순위 계산initFunc(): 게임 상태 초기화
myHorseMoveFunc(): 키 입력으로 플레이어 말 움직임moveRaceFunc(level): 자동으로 1~3번 레인 말들 움직임
- 각 말의 위치를 실시간으로 추적
- 게임 종료 시 위치 기반으로 순위 결정
- 중복 실행 방지:
raceStart,isGameOver변수로 게임 상태 관리 - 랜덤 움직임:
Math.random()을 사용한 AI 말들의 자연스러운 움직임 - 이벤트 관리: 게임 종료 시 이벤트 리스너 정리로 메모리 누수 방지
- 게임 중 새로고침 시 상태 초기화 필요
- 빠른 키 입력 시 말이 과도하게 빨라질 수 있음
이 프로젝트는 개인 학습 목적으로 제작되었습니다.
즐거운 경마 게임을 즐겨보세요! 🏆