안녕하세요, 김선진입니다.
주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요,
코딩하는 동안 스크린샷찍는 걸 까먹어서...
1탄에서는 input과 canvas를 이용해서 입력받은 이미지를 4*4로 쪼개서 퍼즐 박스에 넣는 것입니다.
const numColsToCut = 4;
const numRowsToCut = 4;
function allowDrop(ev) {
ev.preventDefault();
}
function updateImageDisplay() {
const preview = document.querySelector('.preview');
const input = document.querySelector('input');
while(preview.firstChild) {
preview.removeChild(preview.firstChild);
}
const curFiles = input.files;
for(const file of curFiles) {
const para = document.createElement('p');
const imageItem = document.createElement('div');
const img = new Image();
img.onload = function() {
const widthOfOnePiece = this.width/numColsToCut;
const heightOfOnePiece = this.height/numRowsToCut;
para.innerHTML = `${numColsToCut}X${numRowsToCut}로 생성된 퍼즐입니다.`;
const box = document.getElementById('puzzle-box');
while(board.firstChild) {
board.removeChild(board.firstChild);
}
for(var x = 0; x < numColsToCut; ++x) {
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(img, y * widthOfOnePiece, x * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
let pieceImage = new Image();
pieceImage.src = canvas.toDataURL();
pieceImage.id = canvas.toDataURL();
pieceImage.draggable = true;
pieceImage.ondragstart = drag;
box.appendChild(pieceImage);
}
}
}
img.src = URL.createObjectURL(file);
imageItem.appendChild(img);
imageItem.appendChild(para);
preview.appendChild(imageItem);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="puzzle.js"></script>
<title>PUZZLE GAME</title>
</head>
<body>
<div class="puzzle-container">
<div>
퍼즐게임
</div>
<label for="puzzle-input">
이미지 선택
<input onchange="updateImageDisplay()" name="puzzle-input" id="puzzle-input" type="file" accept="image/*">
</label>
<div class="preview">
<p>선택한 이미지로 퍼즐을 만듭니다.</p>
</div>
<div id="puzzle-box">
</div>
</div>
</body>
</html>
<style>
input {
opacity: 0;
}
</style>
'뚱땅뚱땅' 카테고리의 다른 글
| [CSS3] pure CSS로 parallax scrolling 구현하기 (0) | 2020.11.22 |
|---|---|
| [HTML5/JavaScript] 직소퍼즐 만들기 4(完) : 퍼즐 게임으로 만들기 (0) | 2020.10.26 |
| [HTML5/Javascript] 직소퍼즐 만들기 3: 퍼즐 조각 무작위로 섞기 (0) | 2020.10.24 |
| [HTML5/JavaScript] 직소퍼즐 만들기 - 2: 드래그드롭으로 퍼즐넣기 (0) | 2020.09.28 |
