Fruit for Fun | HTML, CSS, JavaScript 게임 개발

소개

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

👀 미리보기

Fruit matching game preview

🎯 과제

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

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

🏆 성과

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

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

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다. 시작 버튼을 클릭하면 다음과 같이 게임이 제대로 실행되지 않습니다:

unfinished game interface

비교 기능 구현

이 단계에서는 클릭된 두 이미지를 비교하는 기능을 구현합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

js/index.js 파일의 하단에 다음 compare() 함수를 추가합니다:

// Compare two images with each other to see if they are the same
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Hide
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

이 함수는 클릭된 두 이미지의 소스를 비교합니다. 동일한 경우 점수가 2 점 증가하고 사각형이 숨겨집니다. 동일하지 않은 경우 점수가 2 점 감소하고 이미지가 숨겨집니다. $("#score").text(score)는 html 파일의 <p>The current number of points is <span id="score">0</span></p> 섹션에서 실시간으로 점수 표시를 업데이트합니다.

시작 버튼 기능 구현

이 단계에서는 시작 버튼의 기능을 구현합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

js/index.js 파일을 엽니다.
startGame() 함수에 다음 코드를 추가하여 시작 버튼을 클릭했을 때 사각형의 이미지를 표시한 다음 숨깁니다:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

startGame() 함수에서 이전 코드 다음에 다음 코드를 추가하여 "Start" 버튼을 숨깁니다:

// Hide Start button
$("#start").css("visibility", "hidden");

클릭 기능 구현

이 단계에서는 사각형을 클릭하는 기능을 구현합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

js/index.js 파일을 엽니다.
startGame() 함수에 다음 코드를 추가하여 사각형에 대한 클릭 이벤트를 처리합니다:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Hide Start button
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Get the id of the clicked image
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

이 코드는 클릭된 이미지의 ID 를 images 배열에 추가합니다. 이미지가 숨겨져 있으면 표시됩니다. 이미지가 이미 표시되어 있으면 images 배열에서 제거됩니다. images 배열에 두 개의 이미지가 있으면 500ms 지연 후에 compare() 함수가 호출됩니다.

이 단계를 완료하면 "Fruit for Fun" 게임이 완전히 작동하며 완성된 결과는 다음과 같습니다:

Finished game demonstration