프로젝트 의 JavaScript 스킬 트리

HTML, CSS, JavaScript 를 활용한 과일 매칭 게임

중급

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 간단한 '과일 매칭 게임'을 만드는 방법을 배웁니다. 이 게임은 게임 보드의 사각형을 클릭하여 과일 이미지 쌍을 맞추는 방식으로 진행됩니다.

javascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 간단한 "과일 맞추기 (Fruit for Fun)" 게임을 만드는 방법을 배웁니다. 이 게임은 게임 보드의 사각형을 클릭하여 과일 이미지 쌍을 맞추는 방식으로 진행됩니다.

👀 미리보기

Fruit matching game preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • 프로젝트 파일 및 디렉토리를 설정하는 방법
  • 시작 버튼의 기능을 구현하여 과일 이미지를 표시하고 숨기는 방법
  • 사각형을 클릭하여 과일 이미지를 표시하는 기능 구현 방법
  • 클릭된 두 이미지를 비교하고 점수를 적절하게 업데이트하는 기능 구현 방법
  • 실시간으로 점수 표시를 업데이트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • 웹 개발 프로젝트를 구조화하고 구성할 수 있습니다.
  • JavaScript 를 사용하여 DOM 을 조작하고 사용자 상호 작용을 처리할 수 있습니다.
  • jQuery 를 사용하여 JavaScript 코드와 애니메이션을 단순화할 수 있습니다.
  • 게임 로직에 따라 사용자 인터페이스를 실시간으로 업데이트할 수 있습니다.

강사

labby
Labby
Labby is the LabEx teacher.