간단한 퍼즐 게임은 퍼즐 조각을 이동하여 이미지를 완성하는 게임입니다.
개념설명:
퍼즐 게임은 주어진 이미지를 여러 조각으로 나누고, 플레이어는 이 조각들을 이동하여 원본 이미지를 완성하는 게임입니다.
예제 코드:
<!DOCTYPE html>
<html>
<head>
<title>간단한 퍼즐 게임</title>
<style>
.puzzle-container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.puzzle-piece {
width: 100px;
height: 100px;
background-size: 300px 300px;
cursor: pointer;
transition: background 0.3s ease-in-out;
user-drag: none;
}
.puzzle-piece:hover {
background: url('original-image.jpg') no-repeat;
}
</style>
</head>
<body>
<div class="puzzle-container">
<div class="puzzle-piece" style="background: url('piece1.jpg') no-repeat;"></div>
<div class="puzzle-piece" style="background: url('piece2.jpg') no-repeat;"></div>
<div class="puzzle-piece" style="background: url('piece3.jpg') no-repeat;"></div>
<!-- 추가 퍼즐 조각들 -->
</div>
<script>
let selectedPiece = null;
document.querySelectorAll('.puzzle-piece').forEach(piece => {
piece.addEventListener('mousedown', (e) => {
selectedPiece = piece;
piece.style.zIndex = '1';
piece.style.cursor = 'grabbing';
piece.style.position = 'absolute'; // 추가: 조각을 절대 위치로 변경
});
piece.addEventListener('mouseup', () => {
selectedPiece = null;
piece.style.zIndex = '0';
piece.style.cursor = 'pointer';
});
});
document.addEventListener('mousemove', (e) => {
if (!selectedPiece) return;
selectedPiece.style.left = e.pageX - selectedPiece.clientWidth / 2 + 'px';
selectedPiece.style.top = e.pageY - selectedPiece.clientHeight / 2 + 'px';
});
</script>
</body>
</html>
전문용어 상세하게 설명:
퍼즐 게임: 이미지를 조각으로 나누어 이동시켜 원본 이미지를 재구성하는 게임.
퍼즐 조각: 원본 이미지를 나눈 작은 이미지 조각.
이동: 퍼즐 조각을 클릭하거나 드래그하여 다른 위치로 이동시키는 동작.
'자바스크립트' 카테고리의 다른 글
| 사용자 입력에 따른 반응: 사용자의 입력에 따라 다른 반응을 보이는 웹 페이지를 만듭니다. (0) | 2023.12.17 |
|---|---|
| 날씨 앱: 사용자의 위치에 따라 날씨 정보를 표시하는 웹 앱을 만듭니다. (0) | 2023.12.17 |
| 슬라이드 쇼: 이미지 슬라이드 쇼를 만들어 갤러리 형태로 이미지를 표시합니다. (0) | 2023.12.17 |
| 간단한 웹 페이지 타이머: 웹 페이지에서 특정 시간 간격으로 메시지를 변경하는 타이머를 만듭니다. (0) | 2023.12.17 |
| ToDo 리스트 관리 앱 만들기 (0) | 2023.12.17 |