Colin's Blog
[javascript] 자바스크립트와 GreenSock을 이용한 드래그 앤 드롭 퍼즐 게임 구현 방법

드래그 앤 드롭 퍼즐 게임은 사용자가 이미지 또는 요소를 드래그하여 다른 위치로 이동시키는 게임입니다. 이번 블로그 게시물에서는 자바스크립트와 GreenSock 라이브러리를 사용하여 간단한 드래그 앤 드롭 퍼즐 게임을 구현하는 방법을 알아보겠습니다.

게임 구현 준비하기

먼저, 게임을 구현하기 위해 HTML, CSS 및 JavaScript로 구성된 파일을 작성해야 합니다. 다음은 게임을 위한 기본 파일 구조입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="puzzle-container">
    <div class="puzzle-piece"></div>
    <div class="puzzle-piece"></div>
    <div class="puzzle-piece"></div>
    <!-- 추가적인 퍼즐 조각들... -->
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

위의 코드에서는 puzzle-container라는 id를 가진 div 내에 puzzle-piece라는 class를 가진 여러 개의 퍼즐 조각 요소들을 생성합니다. GreenSock 라이브러리도 HTML 파일에 불러옵니다.

JavaScript로 게임 구현하기

이제 JavaScript 파일을 생성하여 게임을 구현해보겠습니다. 먼저, 퍼즐 조각을 드래그할 수 있도록 설정해야 합니다.

// script.js

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

puzzlePieces.forEach(piece => {
  piece.addEventListener('mousedown', startDrag);
  piece.addEventListener('touchstart', startDrag);
});

function startDrag(e) {
  this.classList.add('dragging');

  const puzzleContainer = document.getElementById('puzzle-container');
  puzzleContainer.addEventListener('mousemove', dragPiece);
  puzzleContainer.addEventListener('touchmove', dragPiece);

  puzzleContainer.addEventListener('mouseup', stopDrag);
  puzzleContainer.addEventListener('touchend', stopDrag);
}

function dragPiece(e) {
  const piece = document.querySelector('.dragging');
  if (!piece) return;

  e.preventDefault();

  const touch = e.touches ? e.touches[0] : e;
  const newX = touch.clientX - (piece.offsetWidth / 2);
  const newY = touch.clientY - (piece.offsetHeight / 2);

  gsap.to(piece, { x: newX, y: newY, duration: 0.2, ease: 'none' });
}

function stopDrag() {
  const piece = document.querySelector('.dragging');
  if (!piece) return;

  piece.classList.remove('dragging');

  const puzzleContainer = document.getElementById('puzzle-container');
  puzzleContainer.removeEventListener('mousemove', dragPiece);
  puzzleContainer.removeEventListener('touchmove', dragPiece);
}

위의 코드는 puzzle-piece 클래스를 가진 퍼즐 조각들을 선택하고, 각각의 조각에 마우스 및 터치 이벤트를 추가하여 드래그 기능을 구현합니다.

startDrag 함수는 마우스 버튼 누를 때 또는 터치 시작 시 호출되며, 퍼즐 조각에 dragging 클래스를 추가하여 드래그 중임을 표시합니다. 또한 mousemove 및 touchmove 이벤트 리스너를 추가하여 조각을 드래그할 때마다 dragPiece 함수를 호출합니다.

dragPiece 함수는 마우스 또는 터치 좌표를 계산하여 퍼즐 조각을 해당 좌표로 이동시킵니다.

stopDrag 함수는 마우스 버튼을 놓았을 때 또는 터치 종료 시 호출되며, dragging 클래스를 제거하고 mousemove 및 touchmove 이벤트 리스너를 제거합니다.

CSS로 스타일링하기

마지막으로, 스타일을 적용하기 위해 CSS 파일을 생성하여 내용을 추가합니다.

/* styles.css */

#puzzle-container {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
}

.puzzle-piece {
  width: 100px;
  height: 100px;
  background-color: #f2f2f2;
  border: 1px solid #999;
  margin: 5px;
  cursor: grab;
}

.dragging {
  cursor: grabbing;
}

위의 코드에서는 puzzle-container 클래스를 가진 요소를 가로세로 400px 크기로 설정하고, 내부의 puzzle-piece 클래스를 가진 퍼즐 조각들을 100px 크기로 정의했습니다. 퍼즐 조각의 드래그 상태를 표시하기 위해 dragging 클래스를 추가하고, CSS 속성을 조정하여 드래그 중일 때의 스타일을 변경했습니다.

모든 준비가 완료되었다면, 웹 브라우저에서 HTML 파일을 열어 게임을 즐길 수 있습니다.

결론

이 블로그 게시물에서는 자바스크립트와 GreenSock 라이브러리를 활용하여 간단한 드래그 앤 드롭 퍼즐 게임을 구현하는 방법을 알아보았습니다. 이를 통해 사용자가 이미지나 요소를 드래그하여 이동시킬 수 있는 인터랙티브한 경험을 구현하는 기술적인 요소에 대해 알아볼 수 있었습니다.

더 많은 기능을 추가하여 퍼즐 게임을 발전시킬 수도 있고, 다른 웹 애플리케이션에 드래그 앤 드롭 기능을 적용시킬 수도 있습니다. GreenSock 라이브러리는 애니메이션 및 인터랙티브한 웹 요소 구현에 매우 유용한 도구입니다.

참고 자료:

© 2018 Colin. All rights reserved.