프로젝트 의 JavaScript 스킬 트리

HTML, CSS, JavaScript 를 활용한 과일 쌓기 게임

중급

이 프로젝트에서는 HTML, CSS, JavaScript 를 사용하여 간단한 과일 쌓기 게임을 만드는 방법을 배웁니다. 목표는 페이지 상단에서 떨어지는 과일 아이템을 하단의 상자에 쌓는 것입니다. 상자에 동일한 과일 3 개가 있으면 자동으로 제거됩니다.

javascriptweb-development

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

소개

이 프로젝트에서는 HTML, CSS, 그리고 JavaScript 를 사용하여 간단한 과일 쌓기 게임을 만드는 방법을 배웁니다. 목표는 페이지 상단에서 떨어지는 과일 아이템들을 하단의 상자에 쌓는 것입니다. 상자에 동일한 과일이 세 개 있으면 자동으로 제거됩니다.

👀 미리보기

제거 효과는 다음과 같습니다:

Fruit elimination game demo

제거되지 않는 효과는 다음과 같습니다:

Non removable fruit stacking effect

🎯 과제

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

  • 제공된 파일을 에디터에서 열어 프로젝트를 설정하는 방법
  • 페이지 상단의 과일 아이템에 클릭 이벤트 핸들러를 추가하는 방법
  • 과일 아이템을 추가, 제거 및 제거하는 게임 로직을 구현하는 방법
  • 프로젝트를 마무리하고 기능을 테스트하는 방법

🏆 성과

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

  • jQuery 를 사용하여 DOM 을 조작하고 이벤트를 처리합니다.
  • JavaScript 를 사용하여 기본적인 게임 로직을 구현합니다.
  • 간단하고 상호 작용적인 사용자 인터페이스를 만듭니다.
  • 원하는 기능을 보장하기 위해 코드를 테스트하고 디버깅합니다.

강사

labby
Labby
Labby is the LabEx teacher.