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

소개

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

👀 미리보기

Interactive jigsaw puzzle demo

🎯 과제

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

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

🏆 성과

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

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 클래스를 추가하여 성공 메시지를 숨깁니다.

완성된 프로젝트 테스트

페이지를 새로 고쳐 퍼즐의 초기 상태를 확인합니다.
퍼즐 조각을 드래그 앤 드롭하여 재정렬해 봅니다.
퍼즐 완성 여부에 따라 성공 메시지가 나타나거나 사라지는 것을 관찰합니다.
퍼즐 조각이 올바르게 교체되었는지, 이미지의 src 및 data-id 속성이 적절하게 업데이트되었는지 확인합니다.

완료 후의 효과는 다음과 같습니다:

Completed Effect

축하합니다! 제공된 코드를 사용하여 직소 퍼즐 게임을 성공적으로 구현했습니다. 프로젝트를 더 탐색하고 추가 기능이나 개선 사항을 자유롭게 실험해 보세요.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

미래를 조립하다

소개