메모리 게임 기능 구현

바닐라 JS로만 구현한 메모리 게임 프로젝트에서 맡은 게임 화면

게임 소개

라운드별 난이도가 점차 증가하는 카드 매칭 게임입니다. 제한 시간 내에 모든 카드 쌍을 맞추는 것이 목표입니다.

데모 링크

https://y0ngtang.github.io/FlipCardGame/

주요 기능

• 라운드별 난이도 설정 및 진행:
  • 라운드별 카드 개수(행, 열)와 제한 시간 변경을 통한 난이도 조절
  • 모든 카드 매칭 시 다음 라운드 진행, 제한 시간 초과 시 게임 오버
  • 마지막 라운드 클리어 시 게임 클리어 화면 전환
• 직관적인 카드 조작 및 매칭:
  • 마우스 드래그를 통한 카드 회전 및 앞면 확인
  • 두 장의 카드 매칭 여부 판별 및 결과에 따른 처리
  • 매칭 성공 시 점수 증가 및 효과음 재생, 실패 시 효과음 재생
• 전략적 아이템 시스템:
  • 라운드 클리어 시 아이템 획득 및 슬롯 저장
  • 아이템 종류:
    • 시간 추가: 제한 시간 연장
    • 랜덤 매칭: 카드 쌍 자동 매칭
    • 전체 보기: 숨겨진 카드 잠시 공개
  • 아이템 사용 시 슬롯 이미지 변경 및 효과 적용
• 풍부한 사용자 경험 및 게임 요소:
  • 라운드 클리어 시 아이템 획득 모달창 표시
  • 게임 몰입도 향상을 위한 효과음 제공
  • 타이머 남은 시간에 따른 색상 변화를 통한 긴장감 제공
  • 게임 시작 로딩 화면 추가

기술 스택

• JavaScript
• HTML
• CSS