[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트용 퍼즐 게임 구현 방법

29 Nov 2023

javascript

퍼즐 게임은 많은 사람들에게 즐거움을 주는 인기 있는 게임입니다. 이 게임은 퍼즐 조각을 이동하거나 교환하여 조각들을 맞추는 것을 목표로 합니다. 이번에는 웹사이트에서 드래그 앤 드롭 효과를 활용하여 퍼즐 게임을 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 생성

먼저, HTML 문서의 구조를 생성해야 합니다. 퍼즐 조각을 나타내기 위한 <div> 요소를 생성하고, 각 조각에 대한 고유한 식별자를 부여합니다. 이때, 드래그 앤 드롭 효과를 적용하기 위해 draggable 속성을 추가해야 합니다.

<div id="puzzle-container">
  <div id="piece1" draggable="true">조각 1</div>
  <div id="piece2" draggable="true">조각 2</div>
  <div id="piece3" draggable="true">조각 3</div>
  <!-- ... -->
</div>

CSS 스타일링

다음으로, 퍼즐 조각들을 스타일링해야 합니다. 각 조각의 크기와 배경색, 테두리 등의 스타일을 지정할 수 있습니다. 또한, 드래그 앤 드롭 효과를 위해 드래그될 때의 스타일을 추가하여 표시할 수 있습니다.

#puzzle-container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}

#puzzle-container div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border: 1px solid #000;
  margin: 5px;
  text-align: center;
  line-height: 100px;
}

#puzzle-container div:active {
  background-color: #ddd;
}

JavaScript 이벤트 처리

마지막으로, JavaScript를 사용하여 이벤트를 처리합니다. 퍼즐 조각이 드래그되거나 드롭될 때 발생하는 이벤트를 다룰 수 있습니다. 이를 위해 dragstart, dragover, drop 등의 이벤트 핸들러를 구현해야 합니다.

const pieces = document.querySelectorAll('#puzzle-container div');

// 각 조각에 대해 dragstart 이벤트 핸들러 등록
pieces.forEach(piece => {
  piece.addEventListener('dragstart', dragStart);
});

// 드래그 시작 시 호출되는 함수
function dragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}

// 드래그된 조각이 다른 조각 위로 드롭될 때 호출되는 함수
function allowDrop(event) {
  event.preventDefault();
}

// 드롭이 이루어질 때 호출되는 함수
function drop(event) {
  event.preventDefault();
  const draggedId = event.dataTransfer.getData('text/plain');
  const draggedPiece = document.getElementById(draggedId);
  const dropZone = event.target;

  // 드롭 시 위치 교환
  dropZone.parentNode.insertBefore(draggedPiece, dropZone);
}

위 JavaScript 코드는 각각의 퍼즐 조각에 대해 dragstart 이벤트 핸들러를 등록하고, 드래그 시작 시 조각의 ID를 데이터로 설정합니다. 또한, 조각이 다른 조각 위로 드롭될 때의 이벤트 핸들러인 allowDrop 함수와 드롭이 이루어질 때의 이벤트 핸들러인 drop 함수를 구현합니다. 드롭 시에는 위치를 교환하여 조각들의 순서가 바뀝니다.

이제 웹사이트에서 위와 같이 드래그 앤 드롭 효과를 활용한 퍼즐 게임을 구현할 수 있습니다. 이를 통해 사용자들은 조각들을 이동하거나 교환하여 퍼즐을 완성시킬 수 있습니다.

참고 자료: