대화형 직소 퍼즐 게임 만들기 - JavaScript 튜토리얼

소개

이 프로젝트에서는 JavaScript 를 사용하여 대화형 직소 퍼즐 게임을 만드는 방법을 배우게 됩니다. 이 게임은 퍼즐 조각을 재배열하여 완전한 이미지를 재구성하는 방식으로, 플레이어에게 흥미롭고 도전적인 경험을 제공합니다.

👀 미리보기

🎯 과제

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

프로젝트 환경을 설정하고 파일 구조를 이해하는 방법.
퍼즐 조각에 대한 드래그 앤 드롭 기능을 구현하는 방법.
퍼즐 완성 여부를 확인하고 성공 메시지를 표시하는 방법.
완성된 프로젝트를 테스트하고 게임의 올바른 기능을 보장하는 방법.

🏆 성과

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

JavaScript 를 사용하여 대화형 게임을 만들 수 있습니다.
웹 개발에서 드래그 앤 드롭 기능의 원리를 이해할 수 있습니다.
작업 완료 여부를 확인하고 사용자에게 피드백을 제공하는 로직을 구현할 수 있습니다.
Document Object Model (DOM) 을 사용하고 HTML 요소를 조작하는 경험을 얻을 수 있습니다.

프로젝트 환경 설정

이 단계에서는 프로젝트 환경을 설정하고 파일 구조를 이해합니다.

실험 환경을 열고 프로젝트 디렉토리 /home/labex/project로 이동합니다.
디렉토리 구조는 다음과 같습니다:
```
├── css
├── images
├── index.html
└── js
    └── index.js
```
- images는 프로젝트 이미지 폴더입니다.
- css는 프로젝트 스타일 폴더입니다.
- index.html은 메인 페이지입니다.
- js/index.js는 코드를 추가해야 하는 JavaScript 파일입니다.
WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.
VM 상단의 "Web 8080"을 열고 수동으로 새로 고침하여 페이지를 확인합니다.

✨ 솔루션 확인 및 연습

드래그 앤 드롭 기능 구현

이 단계에서는 퍼즐 조각에 대한 드래그 앤 드롭 기능을 구현합니다.

js/index.js 파일에서 drop 함수를 찾습니다.

drop 함수 내에서, 드래그된 퍼즐 조각과 대상 퍼즐 조각의 이미지를 교체하기 위해 다음 코드를 추가합니다:

// Check if the dragged puzzle piece is not the current target puzzle piece
if (draggedPiece !== this) {
  // TODO
  // Save the current state of the dragged and target puzzle pieces
  let saveArr = [
    [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
    [this.children[0].src, this.children[0].dataset.id]
  ];

  // Swap the src and data-id attributes of the images
  draggedPiece.children[0].src = saveArr[1][0];
  draggedPiece.children[0].dataset.id = saveArr[1][1];
  this.children[0].src = saveArr[0][0];
  this.children[0].dataset.id = saveArr[0][1];
}

// Reset the puzzle piece being dragged
draggedPiece = null;

이 코드는 먼저 드래그된 퍼즐 조각이 현재 대상 퍼즐 조각이 아닌지 확인합니다. 그렇다면, 드래그된 퍼즐 조각과 대상 퍼즐 조각의 현재 상태를 저장한 다음, 이미지의 src 및 data-id 속성을 교체합니다.

✨ 솔루션 확인 및 연습

퍼즐 완성 여부 확인

이 단계에서는 퍼즐이 성공적으로 완료되었는지 확인하고 성공 메시지를 표시하거나 숨기는 로직을 구현합니다.

js/index.js 파일에서 drop 함수를 찾습니다.

drop 함수에서, 이전 단계에서 추가한 코드 뒤에 다음 코드를 추가합니다:

if (draggedPiece !== this) {
  // TODO
  // ...
  // Get the data-id values of all the images in the puzzle container
  let imgDataIdList = [...container.getElementsByTagName("img")].map(
    (item) => item.dataset.id
  );

  // Check if the puzzle is completed
  if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
    // Show the success message
    successMessage.classList.remove("hide");
    successMessage.classList.add("show");
  } else {
    // Hide the success message
    successMessage.classList.remove("show");
    successMessage.classList.add("hide");
  }
}

이 코드는 먼저 퍼즐 컨테이너의 모든 이미지의 data-id 값을 가져와 올바른 순서 (1 부터 9 까지) 인지 확인합니다. 그렇다면, hide 클래스를 제거하고 show 클래스를 성공 메시지 요소에 추가하여 성공 메시지를 표시합니다. 그렇지 않으면, show 클래스를 제거하고 hide 클래스를 추가하여 성공 메시지를 숨깁니다.