728x90
안녕하세요,
오늘은 도형을 드래그하여 같은 크기의 테두리에 정확히 맞추면 테두리의 색이 변경되는 예시를 만들어보도록 하겠습니다.
html 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
cursor: grab;
}
#target {
width: 100px;
height: 100px;
border: 2px solid black;
position: absolute;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div id="draggable"></div>
<div id="target"></div>
<script src="script.js"></script>
</body>
</html>
javascript 코드입니다.
const draggable = document.getElementById('draggable');
const target = document.getElementById('target');
let isDragging = false;
let offsetX, offsetY;
function onMouseDown(e) {
if (!draggable.dataset.locked) {
isDragging = true;
offsetX = e.clientX - draggable.getBoundingClientRect().left;
offsetY = e.clientY - draggable.getBoundingClientRect().top;
draggable.style.cursor = 'grabbing';
draggable.style.zIndex = 1000; // 드래그 하 도형을 최상위로 올리기
}
}
function onMouseMove(e) {
if (isDragging) {
draggable.style.left = `${e.clientX - offsetX}px`;
draggable.style.top = `${e.clientY - offsetY}px`;
}
}
function onMouseUp() {
if (isDragging) {
isDragging = false;
draggable.style.cursor = 'grab';
if (checkSnap()) {
draggable.style.zIndex = 1; // 도형이 테두리에 맞춰지면 zIndex를 원래대로
draggable.dataset.locked = true; // 도형을 잠금 상태로 설정하여 드래그 비활성화
draggable.removeEventListener('mousedown', onMouseDown); // mousedown 이벤트 제거
}
}
}
function checkSnap() {
const draggableRect = draggable.getBoundingClientRect();
const targetRect = target.getBoundingClientRect();
const borderWidth = parseInt(getComputedStyle(target).borderWidth); // 테두리 두께 가져오기
// 도형을 테두리 안쪽으로 배치하기 위한 조정
const insideLeft = targetRect.left + borderWidth;
const insideTop = targetRect.top + borderWidth;
const insideRight = targetRect.right - borderWidth;
const insideBottom = targetRect.bottom - borderWidth;
if (Math.abs(draggableRect.left - insideLeft) < 5 &&
Math.abs(draggableRect.top - insideTop) < 5 &&
Math.abs(draggableRect.right - insideRight) < 5 &&
Math.abs(draggableRect.bottom - insideBottom) < 5) {
target.style.borderColor = 'red';
draggable.style.left = `${insideLeft}px`;
draggable.style.top = `${insideTop}px`;
return true;
} else {
target.style.borderColor = 'black';
return false;
}
}
// 이벤트 리스너 등록
draggable.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
시연 영상입니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 간단한 테트리스 게임 만들기 (3) - 일시정지 (0) | 2024.09.14 |
|---|---|
| [JavaScript] 틱택토(Tic-Tac-Toe) 게임 만들기 (2) | 2024.09.09 |
| [JavaScript] 간단한 테트리스 게임 만들기 (2) - 레벨업 하기 (4) | 2024.09.04 |
| [JavaScript] 벽돌깨기 게임 발전시키기 - 가속도와 마찰력 추가하기 (2) | 2024.09.03 |
| [JavaScript] 벽돌깨기 게임 발전시키기 - 목숨 기능 추가하기 (0) | 2024.08.28 |