Click here for free DL of the app version that can save data.

No:154

271

←

Prev Next

→

jigsaw puzzle
Developer User2609｜Date and time 23/5/29 16:33:28
Build time 94.581 sec｜Game capacity 3.357KB｜

Script

Jigsaw Puzzle

絵を完成させよう！

このゲームは、与えられた3x3の画像をパズルピースに分け、再び完成させるゲームです。画像はカラフルな水玉模様をしています。各ピースはドラッグ可能で、落とす場所に置くと視覚的に正しければ自動的に配置されます。このゲームは、スマートフォンでの操作に最適化されています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Jigsaw Puzzle</title>
	<style type="text/css">
		body {
			background-color: #F7B2AB;
			text-align: center;
		}
		h1 {
			font-size: 3rem;
			margin: 1rem;
		}
		p {
			font-size: 1.5rem;
			margin-bottom: 2rem;
		}
		#puzzle-container {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			margin: 0 auto;
			padding: 1rem;
			background-color: white;
			box-shadow: 3px 3px 3px gray;
		}
		.piece {
			width: calc(300px / 3);
			height: calc(300px / 3);
			background-size: 100%;
			background-position: center;
			cursor: pointer;
		}
		.piece:hover {
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<h1>Jigsaw Puzzle</h1>
	<p>絵を完成させよう！</p>
	<div id="puzzle-container">
		<div class="piece" id="piece1"></div>
		<div class="piece" id="piece2"></div>
		<div class="piece" id="piece3"></div>
		<div class="piece" id="piece4"></div>
		<div class="piece" id="piece5"></div>
		<div class="piece" id="piece6"></div>
		<div class="piece" id="piece7"></div>
		<div class="piece" id="piece8"></div>
		<div class="piece" id="piece9"></div>
	</div>

var imgSrc = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGUi4EdwHvW2Chs1qbM2FB6TYFJELBDyFcKg&usqp=CAU";

for (var i = 0; i < puzzle.length; i++) {
			var piece = document.getElementById(puzzle[i]);
			piece.style.backgroundImage = "url('" + imgSrc + "')";
			var xPos = (i % 3) * (300 / 3);
			var yPos = Math.floor(i / 3) * (300 / 3);
			piece.style.backgroundPosition = xPos + "px " + yPos + "px";
			piece.draggable = true;
			piece.addEventListener("dragstart", dragStart);
			piece.addEventListener("dragover", dragOver);
			piece.addEventListener("drop", drop);
		}

function dragStart(e) {
			e.dataTransfer.effectAllowed = "move";
			e.dataTransfer.setData("text", e.target.id);
		}

function dragOver(e) {
			e.preventDefault();
			e.dataTransfer.dropEffect = "move";
		}

function drop(e) {
			e.preventDefault();
			var id = e.dataTransfer.getData("text");
			var src = document.getElementById(id);
			var dst = e.target;
			var temp = src.style.backgroundPosition;
			src.style.backgroundPosition = dst.style.backgroundPosition;
			dst.style.backgroundPosition = temp;
			checkWin();
		}