지금은 웹 개발 분야에서 매우 인기 있는 canvas 기반 그래픽 라이브러리인 Paper.js를 사용하여 웹 기반 퍼즐 게임을 만들어 보겠습니다. Paper.js는 HTML5의 canvas 엘리먼트를 사용하여 강력한 그래픽 기능을 제공합니다.
Paper.js란?
Paper.js는 웹 애플리케이션에서 벡터 그래픽을 다루는 데 사용되는 자바스크립트 라이브러리입니다. Paper.js는 HTML5 canvas 엘리먼트와 함께 사용되며, 벡터 도형을 만들고 조작하는 데 도움을 줍니다. Paper.js는 간편한 API와 다양한 기능을 제공하여 그래픽 애니메이션에서 데이터 시각화까지 다양한 용도로 사용할 수 있습니다.
퍼즐 게임 개요
우리의 퍼즐 게임은 주어진 이미지를 잘라 조각으로 나누고, 플레이어가 해당 조각들을 정확한 위치에 맞추는 게임입니다. 퍼즐 조각들은 드래그하여 다른 위치로 이동할 수 있어야 하며, 올바른 위치에 위치하면 자동으로 위치가 고정됩니다.
구현 단계
- HTML 파일 생성 및 Paper.js 라이브러리 추가하기
- 이미지 로드 및 조각 나누기
- 조각 드래그 앤 드롭 구현하기
- 조각의 올바른 위치 파악하기
- 게임 완료 조건 확인하기
1. HTML 파일 생성 및 Paper.js 라이브러리 추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Puzzle Game</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="puzzleCanvas" resize></canvas>
</body>
</html>
위의 코드는 기본적인 HTML 파일 구조를 보여줍니다. paper.js 라이브러리를 <head> 태그 안에 추가하고, <canvas> 엘리먼트를 <body> 태그 안에 추가했습니다.
2. 이미지 로드 및 조각 나누기
Paper.js를 사용하여 이미지를 로드하고 조각으로 나누는 코드를 작성하겠습니다.
<script type="text/paperscript" canvas="puzzleCanvas">
var img = new Raster('path/to/image.jpg');
var gridSize = new Size(4, 4); // 퍼즐 조각 수
var tileSize = img.size.divide(gridSize);
var puzzleTiles = [];
for (var i = 0; i < gridSize.width; i++) {
for (var j = 0; j < gridSize.height; j++) {
var from = new Point(i * tileSize.width, j * tileSize.height);
var to = from.add(tileSize);
var tile = new Path.Rectangle(from, to);
tile.fillColor = 'white';
tile.strokeColor = 'black';
var tileImg = img.getSubRaster(from, to);
tileImg.position = tile.position;
puzzleTiles.push(tile);
}
}
</script>
위의 코드는 Paper.js 코드를 작성하기 위한 <script> 태그 내부에 작성하는 부분입니다. Raster 클래스를 사용하여 이미지를 로드하고, Size 클래스를 사용하여 조각의 크기를 계산합니다. 각 조각에 해당하는 사각형을 Path.Rectangle 클래스로 만들고, 이미지의 조각을 getSubRaster 메서드를 이용해 잘라서 해당 사각형에 배치합니다. 각 조각을 puzzleTiles 배열에 추가합니다.
3. 조각 드래그 앤 드롭 구현하기
이번에는 조각을 드래그 앤 드롭할 수 있도록 구현해 보겠습니다.
<script type="text/paperscript" canvas="puzzleCanvas">
// 이전 코드 생략
var lastSelectedTile = null;
function onMouseDown(event) {
lastSelectedTile = null;
for (var i = 0; i < puzzleTiles.length; i++) {
var tile = puzzleTiles[i];
if (tile.contains(event.point)) {
lastSelectedTile = tile;
break;
}
}
}
function onMouseDrag(event) {
if (lastSelectedTile) {
lastSelectedTile.position += event.delta;
}
}
function onMouseUp(event) {
lastSelectedTile = null;
}
</script>
위의 코드는 Paper.js 코드에 추가로 작성하는 부분입니다. onMouseDown, onMouseDrag, onMouseUp 이벤트 핸들러를 정의하여 조각을 드래그 앤 드롭할 수 있도록 합니다. onMouseDown 핸들러에서는 클릭한 위치에 조각이 있는지 확인하고, lastSelectedTile 변수에 선택된 조각을 저장합니다. onMouseDrag 핸들러에서는 드래그 이벤트가 발생한 경우 선택된 조각을 이동시킵니다. onMouseUp 핸들러에서는 마우스 버튼이 떼어진 경우 lastSelectedTile을 초기화합니다.
4. 조각의 올바른 위치 파악하기
각 조각이 올바른 위치에 위치했는지 확인하기 위해 hitTest 메서드를 사용합니다.
<script type="text/paperscript" canvas="puzzleCanvas">
// 이전 코드 생략
function checkPuzzleComplete() {
for (var i = 0; i < puzzleTiles.length; i++) {
var tile = puzzleTiles[i];
var hitResult = tile.hitTest(tile.position);
if (!hitResult || hitResult.item !== tile) {
return false; // 올바른 위치에 조각이 아닌 경우 false 반환
}
}
return true; // 모든 조각이 올바른 위치에 있는 경우 true 반환
}
</script>
위의 코드는 checkPuzzleComplete 함수를 정의하여 각 조각의 위치를 확인합니다. hitTest 메서드를 사용하여 조각의 현재 위치에서 충돌이 있는지 확인하고, 조각의 현재 위치에 해당 조각이 있는지 확인합니다. 올바른 위치에 조각이 아닌 경우 false를 반환하고, 모든 조각이 올바른 위치에 있는 경우 true를 반환합니다.
5. 게임 완료 조건 확인하기
마지막으로 게임 완료 조건을 확인하는 코드를 작성해 보겠습니다.
<script type="text/paperscript" canvas="puzzleCanvas">
// 이전 코드 생략
function onFrame(event) {
if (checkPuzzleComplete()) {
alert('Congratulations! You completed the puzzle!');
// 게임 완료 시 처리할 로직 작성
}
}
</script>
위의 코드는 onFrame 핸들러를 정의하여 매 프레임마다 게임 완료 조건을 확인합니다. checkPuzzleComplete 함수를 호출하여 모든 조각이 올바른 위치에 있는지 확인하고, 완료되었을 경우에는 알림창을 띄우고 게임 완료 처리를 추가할 수 있습니다.
마무리
이제 Paper.js를 사용하여 웹 기반 퍼즐 게임을 만들어 보았습니다. Paper.js를 사용하면 강력한 그래픽 기능을 이용하여 다양한 종류의 게임을 만들 수 있습니다. Paper.js의 다양한 기능과 API를 참고하여 자신만의 게임을 만들어 보세요!