[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트 용지류 맞추기 게임 구현 방법

29 Nov 2023

javascript

이번 게시물에서는 드래그 앤 드롭 효과를 활용하여 웹사이트 용지류 맞추기 게임을 구현하는 방법을 알아보겠습니다.

게임 개요

게임 방법: 주어진 용지를 드래그해서 올바른 위치에 놓는다.
게임 목표: 모든 용지를 올바른 위치에 맞추면 게임이 완료된다.
게임 조건: 용지를 잘못된 위치에 놓으면 다시 처음부터 시작해야 한다.

구현 단계

HTML 구조 작성
CSS 스타일링
JavaScript 코드 작성

1. HTML 구조 작성

<!DOCTYPE html>
<html>
<head>
	<title>용지류 맞추기 게임</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="game-container">
		<div class="paper" id="paper-1">용지 1</div>
		<div class="paper" id="paper-2">용지 2</div>
		<div class="paper" id="paper-3">용지 3</div>
		<div class="paper" id="paper-4">용지 4</div>
		<div class="target" id="target-1">목표 1</div>
		<div class="target" id="target-2">목표 2</div>
		<div class="target" id="target-3">목표 3</div>
		<div class="target" id="target-4">목표 4</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

2. CSS 스타일링

#game-container {
	width: 500px;
	height: 300px;
	border: 1px solid black;
	position: relative;
}

.paper {
	width: 80px;
	height: 80px;
	background-color: #F9ED69;
	border: 1px solid black;
	border-radius: 5px;
	position: absolute;
	cursor: move;
}

.target {
	width: 80px;
	height: 80px;
	background-color: #8AC18C;
	border: 1px dashed black;
	border-radius: 5px;
	position: absolute;
}

3. JavaScript 코드 작성

// 용지 요소 선택하기
const papers = document.querySelectorAll('.paper');

// 목표 요소 선택하기
const targets = document.querySelectorAll('.target');

// 드래그 앤 드롭 이벤트 핸들러 등록하기
papers.forEach(paper => {
	paper.addEventListener('dragstart', dragStart);
	paper.addEventListener('dragend', dragEnd);
});

targets.forEach(target => {
	target.addEventListener('dragover', dragOver);
	target.addEventListener('dragenter', dragEnter);
	target.addEventListener('dragleave', dragLeave);
	target.addEventListener('drop', drop);
});

// 드래그 앤 드롭 이벤트 핸들러 함수들
function dragStart() {
	this.className += ' hold';
	setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
	this.className = 'paper';
}

function dragOver(e) {
	e.preventDefault();
}

function dragEnter(e) {
	e.preventDefault();
	this.className += ' hovered';
}

function dragLeave() {
	this.className = 'target';
}

function drop() {
	this.className = 'target';
	this.appendChild(paper);
}

위의 코드를 참고하여 HTML, CSS 및 JavaScript 파일을 작성한 후 웹 브라우저에서 실행하면 드래그 앤 드롭 효과를 이용한 용지류 맞추기 게임을 만들 수 있습니다.

결론

드래그 앤 드롭 효과를 활용한 웹사이트 용지류 맞추기 게임을 구현하는 방법을 살펴보았습니다. 이를 활용하여 다양한 게임을 개발하거나 유용한 웹 기능을 구현하는데 활용할 수 있습니다. 게임을 구현할 때에는 HTML, CSS 및 JavaScript를 적절하게 조합하여 원하는 결과물을 만들어 내는 것이 중요합니다.