[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트 용지류 조각 모음 게임 구현 방법

29 Nov 2023

javascript

웹사이트에는 다양한 인터랙티브한 요소들이 존재하는데, 그 중 하나가 드래그 앤 드롭 효과입니다. 이 효과를 활용하여 용지류 조각 모음 게임을 구현하는 방법을 알아보겠습니다.

게임 구상

이 게임은 사용자에게 주어진 용지 조각들을 드래그하여 원하는 위치에 놓아 조각들을 모으는 게임입니다. 목표는 모든 조각들을 올바른 위치에 놓는 것입니다.

HTML 구조 생성

먼저, HTML 구조를 생성합니다. 각 조각은 div 태그로 구성되고, draggable 속성을 추가하여 드래그 가능하도록 설정합니다.

<div class="puzzle-piece" draggable="true"></div>
<div class="puzzle-piece" draggable="true"></div>
<!-- 필요한 만큼 조각들을 추가합니다 -->

드래그 앤 드롭 이벤트 핸들링

각 조각들을 드래그 앤 드롭할 수 있도록 이벤트 핸들링을 구현해야 합니다. 해당 이벤트 핸들러 함수에서는 드래그 시작, 드래그 중, 드롭 완료에 대한 동작을 구현합니다.

const puzzlePieces = document.querySelectorAll('.puzzle-piece');

// 드래그 시작 시
function handleDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
  event.target.classList.add('dragging');
}

// 드래그 중
function handleDragOver(event) {
  if (event.preventDefault) {
    event.preventDefault();
  }
  return false;
}

// 드롭 완료 시
function handleDrop(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  }

  const droppedPieceId = event.dataTransfer.getData('text/plain');
  const droppedPiece = document.getElementById(droppedPieceId);
  
  event.target.appendChild(droppedPiece);
}

// 이벤트 핸들러 등록
puzzlePieces.forEach((piece) => {
  piece.addEventListener('dragstart', handleDragStart);
  piece.addEventListener('dragover', handleDragOver);
  piece.addEventListener('drop', handleDrop);
});

스타일링

게임을 시각적으로 보기 좋게 만들기 위해 CSS 스타일링을 추가합니다. dragging 클래스를 추가하여 드래그 중인 조각을 시각적으로 표시할 수도 있습니다.

.puzzle-piece {
  width: 100px;
  height: 100px;
  background-color: #eaeaea;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}

.dragging {
  opacity: 0.5;
}

결론

이제 드래그 앤 드롭 효과를 활용하여 용지류 조각 모음 게임을 구현할 수 있는 기본적인 방법을 알아보았습니다. 게임을 보다 복잡하게 만들거나 추가적인 기능을 구현하려면 더 많은 코드와 로직이 필요할 수 있습니다. 하지만 이 가이드를 출발점으로 활용하여 창의적인 게임을 만들어보세요!

게임 구상

HTML 구조 생성

드래그 앤 드롭 이벤트 핸들링

스타일링

결론

참고 자료