オンライン・ジグソーパズル作成

遊び方1：
16×11＝176ピースのジグソーパズルとなっています。このページ読込時に画面中央にピースの山が出来ますので、マウスホイール回転またはスクロールバーの上下操作でスクロールさせるとそれに応じてピースが正位置に配置されていきます。
ピースが全て配置されることを見て楽しむ事が目的となっていますので自分でピースを配置することはできませんが、最後のピースが填まる瞬間に快感を覚える方は多いのではないでしょうか??
その昔、無限プチプチというエアークッション材をプチプチする感覚を楽しめるおもちゃが有りましたがそれに近いものと思っていただけるといいのではないかと思います。。。

遊び方2：
お手持ちの写真(画像)を指定することでオリジナルのジグソーパズルが完成し、同じように遊べます。
完成時の画像サイズは960×702ピクセルとなりますので、このサイズか、それに近いサイズの画像を指定します。縦横比960×702とは異なる画像を指定した場合は短辺を基準に拡大縮小され、はみ出た部分はカットされます。
JPG、PNG、GIFフォーマットを受け付け可能です。
作成したオリジナルジグソーパズルは他の方に公開されることは有りませんのでどんな写真でも遠慮なくどうぞ。
「ジグソーパズルパターンの濃さ」は各ピースの境界線の濃さとなります。数字が多いほど濃く6や5が標準値ですが、淡い画像の場合は数値を低く、濃い画像の場合は数値を高くした方が出来栄えがいいでしょう。

遊び方3：
作成されたピースの画像データはダウンロード可能です。データの使い方は自由です。
自己ウェブサイトのアクセント画像として使用してもいいでしょう。

遊び方4：
作成されたピースの画像データをダウンロードして、下記JavaScriptコードを参考にオリジナルプログラムを作成してはいかがでしょうか?
以下に主なJavaScriptソースコードを記します。
ご使用は自由ですが著作権は放棄しておりませんのでご了承お願い致します。

var piecePosition = {
	1:{x:0,y:0}
	,2:{x:55,y:0}
	,3:{x:98,y:0}
	,4:{x:177,y:0}
	,5:{x:220,y:0}
	,6:{x:298,y:0}
	,7:{x:341,y:0}
	,8:{x:419,y:0}
	,9:{x:462,y:0}
	,10:{x:540,y:0}
	,11:{x:583,y:0}
	,12:{x:662,y:0}
	,13:{x:705,y:0}
	,14:{x:783,y:0}
	,15:{x:826,y:0}
	,16:{x:904,y:0}
	,17:{x:0,y:43}
	,18:{x:40,y:59}
	,19:{x:114,y:43}
	,20:{x:161,y:59}
	,21:{x:235,y:43}
	,22:{x:282,y:59}
	,23:{x:356,y:43}
	,24:{x:403,y:59}
	,25:{x:477,y:43}
	,26:{x:525,y:59}
	,27:{x:599,y:43}
	,28:{x:646,y:59}
	,29:{x:720,y:43}
	,30:{x:767,y:59}
	,31:{x:841,y:43}
	,32:{x:889,y:59}
	,33:{x:0,y:125}
	,34:{x:55,y:106}
	,35:{x:98,y:125}
	,36:{x:177,y:106}
	,37:{x:220,y:125}
	,38:{x:298,y:106}
	,39:{x:341,y:125}
	,40:{x:402,y:106}
	,41:{x:462,y:125}
	,42:{x:540,y:106}
	,43:{x:583,y:125}
	,44:{x:662,y:106}
	,45:{x:705,y:125}
	,46:{x:766,y:106}
	,47:{x:826,y:125}
	,48:{x:904,y:106}
	,49:{x:0,y:172}
	,50:{x:40,y:188}
	,51:{x:113,y:172}
	,52:{x:161,y:188}
	,53:{x:235,y:172}
	,54:{x:282,y:188}
	,55:{x:356,y:172}
	,56:{x:403,y:188}
	,57:{x:477,y:172}
	,58:{x:525,y:188}
	,59:{x:599,y:172}
	,60:{x:646,y:188}
	,61:{x:720,y:172}
	,62:{x:767,y:188}
	,63:{x:841,y:172}
	,64:{x:889,y:188}
	,65:{x:0,y:254}
	,66:{x:55,y:234}
	,67:{x:98,y:254}
	,68:{x:160,y:234}
	,69:{x:220,y:254}
	,70:{x:298,y:234}
	,71:{x:341,y:254}
	,72:{x:419,y:234}
	,73:{x:462,y:254}
	,74:{x:540,y:234}
	,75:{x:583,y:254}
	,76:{x:662,y:234}
	,77:{x:705,y:254}
	,78:{x:783,y:234}
	,79:{x:826,y:254}
	,80:{x:904,y:234}
	,81:{x:0,y:301}
	,82:{x:40,y:317}
	,83:{x:114,y:301}
	,84:{x:161,y:317}
	,85:{x:235,y:301}
	,86:{x:282,y:317}
	,87:{x:355,y:318}
	,88:{x:403,y:317}
	,89:{x:477,y:301}
	,90:{x:525,y:317}
	,91:{x:599,y:301}
	,92:{x:646,y:317}
	,93:{x:718,y:318}
	,94:{x:767,y:317}
	,95:{x:841,y:301}
	,96:{x:889,y:317}
	,97:{x:0,y:383}
	,98:{x:55,y:363}
	,99:{x:98,y:383}
	,100:{x:177,y:363}
	,101:{x:220,y:383}
	,102:{x:298,y:363}
	,103:{x:341,y:367}
	,104:{x:419,y:363}
	,105:{x:462,y:383}
	,106:{x:540,y:363}
	,107:{x:583,y:383}
	,108:{x:662,y:363}
	,109:{x:705,y:367}
	,110:{x:783,y:363}
	,111:{x:826,y:383}
	,112:{x:904,y:363}
	,113:{x:0,y:429}
	,114:{x:40,y:445}
	,115:{x:114,y:429}
	,116:{x:161,y:445}
	,117:{x:235,y:429}
	,118:{x:282,y:445}
	,119:{x:356,y:429}
	,120:{x:403,y:445}
	,121:{x:477,y:429}
	,122:{x:525,y:445}
	,123:{x:599,y:429}
	,124:{x:646,y:445}
	,125:{x:720,y:429}
	,126:{x:767,y:445}
	,127:{x:841,y:429}
	,128:{x:889,y:445}
	,129:{x:0,y:511}
	,130:{x:55,y:492}
	,131:{x:98,y:511}
	,132:{x:177,y:492}
	,133:{x:220,y:511}
	,134:{x:298,y:492}
	,135:{x:341,y:511}
	,136:{x:419,y:492}
	,137:{x:462,y:511}
	,138:{x:524,y:492}
	,139:{x:583,y:511}
	,140:{x:662,y:492}
	,141:{x:705,y:511}
	,142:{x:783,y:492}
	,143:{x:826,y:511}
	,144:{x:904,y:492}
	,145:{x:0,y:558}
	,146:{x:40,y:574}
	,147:{x:114,y:558}
	,148:{x:161,y:574}
	,149:{x:235,y:558}
	,150:{x:282,y:574}
	,151:{x:356,y:558}
	,152:{x:403,y:574}
	,153:{x:477,y:558}
	,154:{x:525,y:574}
	,155:{x:599,y:558}
	,156:{x:646,y:574}
	,157:{x:720,y:558}
	,158:{x:767,y:574}
	,159:{x:841,y:558}
	,160:{x:889,y:574}
	,161:{x:0,y:640}
	,162:{x:55,y:620}
	,163:{x:98,y:640}
	,164:{x:177,y:620}
	,165:{x:220,y:640}
	,166:{x:298,y:620}
	,167:{x:341,y:640}
	,168:{x:419,y:620}
	,169:{x:462,y:640}
	,170:{x:540,y:620}
	,171:{x:583,y:640}
	,172:{x:662,y:620}
	,173:{x:705,y:640}
	,174:{x:783,y:620}
	,175:{x:826,y:640}
	,176:{x:904,y:620}
}

var imgs = [];	//全ピース画像を保管

dropPiece(1);

function dropPiece(key) {	//全ピースを読み込みながら中央付近にランダムに配置
	imgs[key] = document.createElement('img');
	imgs[key].src = 'path/to/' + key + '.png';		//ピース画像のパスとファイル名
	imgs[key].onload = function(){
		imgs[key].style.position = 'absolute';
		imgs[key].style.transitionProperty = 'transform,margin-left,margin-top';
		imgs[key].style.transitionDuration = (5 + Math.floor(Math.random() * 5)) + 's';		//ピースのドロップポイントから完了位置への移動時間
		imgs[key].style.transformOrigin = '50% 50%';
		imgs[key].style.transform = 'rotate(' + (Math.floor(Math.random() * 360) - 180) + 'deg)';	//ランダムに回転させておく
		imgs[key].style.marginLeft = (960 / 2 + (Math.floor(Math.random() * 200) - 100)) + 'px';	//中央付近にばらまく
		imgs[key].style.marginTop = (702 / 2 + (Math.floor(Math.random() * 200) - 100)) + 'px';		//中央付近にばらまく
		document.getElementById('origin').appendChild(imgs[key]);
		if (key < 176) {		//すべて終了するまで繰り返す
			setTimeout(function(){dropPiece(key+1);},0);
		}
	}
}

//四隅または外枠から結合可能なピースを選び動かすことで、人間らしさを演出しています。

var candidate = [	//あらかじめ四隅のピースを動かす対象にセットしておく
	1,16,161,176
];
var completes = [];	//最終位置に配置済みが入る

function setCandidate() {
	for (var key = 1; key <= 176; key++) {
		if (in_array(key,candidate)) {	//既に動作候補に入っている場合
			continue;
		}
		if (in_array(key,completes)) {	//既に最終位置へ動作完了している場合
			continue;
		}
		var keyTop = key - 16;		//上
		var keyBottom = key + 16;	//下
		var keyLeft = key - 1;		//左
		var keyRight = key + 1;		//右
		for (var p in completes) {	//既に最終位置へ動作完了しているピースに隣接しているか否かを順に調べる
			if (completes[p] == keyTop || completes[p] == keyBottom || completes[p] == keyLeft || completes[p] == keyRight) {
				candidate.push(key);	//次の動作候補に加える
				break;
			}
		}
	}
}

function nextPiece() {
	if (candidate.length == 0) {
		//次に動かす候補が無くなったら終了
		return;
	}
	var p = Math.floor(Math.random() * candidate.length);	//次に動かすピースを選出
	var key = candidate[p];			//keyは次に動かすピース
	candidate.some(function(v,i){	//動かす候補から、今選んだものを削除
		if (v == key){
			candidate.splice(i,1);
		}
	});
	completes.push(key);			//動かす候補を完了済みに入れる
	//実際に動かす
	imgs[key].style.transform = '';
	imgs[key].style.marginLeft = piecePosition[key].x + 'px';
	imgs[key].style.marginTop = piecePosition[key].y + 'px';
}

最終的にはピースの影効果を付加して、ピースの重なり具合(z-index)も考慮して、レスポンシブ対応にしたものが以下の通りです。 (その他HTMLの適切な記述や画像等も必要ですのでこのままコピー＆ペーストでは動作しません)

/**
 * jigsaw puzzle demo
 *
 * @auther ao-system 2015.10.29
 */
(function(window,document,jigsawPuzzlePiecePath) {
	var marginHeight = 240;
	var jigsawPuzzleShadowPath = './shadow';
	var piecePos = {
		1:{x:0,y:0}
		,2:{x:55,y:0}
		,3:{x:98,y:0}
		,4:{x:177,y:0}
		,5:{x:220,y:0}
		,6:{x:298,y:0}
		,7:{x:341,y:0}
		,8:{x:419,y:0}
		,9:{x:462,y:0}
		,10:{x:540,y:0}
		,11:{x:583,y:0}
		,12:{x:662,y:0}
		,13:{x:705,y:0}
		,14:{x:783,y:0}
		,15:{x:826,y:0}
		,16:{x:904,y:0}
		,17:{x:0,y:43}
		,18:{x:40,y:59}
		,19:{x:114,y:43}
		,20:{x:161,y:59}
		,21:{x:235,y:43}
		,22:{x:282,y:59}
		,23:{x:356,y:43}
		,24:{x:403,y:59}
		,25:{x:477,y:43}
		,26:{x:525,y:59}
		,27:{x:599,y:43}
		,28:{x:646,y:59}
		,29:{x:720,y:43}
		,30:{x:767,y:59}
		,31:{x:841,y:43}
		,32:{x:889,y:59}
		,33:{x:0,y:125}
		,34:{x:55,y:106}
		,35:{x:98,y:125}
		,36:{x:177,y:106}
		,37:{x:220,y:125}
		,38:{x:298,y:106}
		,39:{x:341,y:125}
		,40:{x:402,y:106}
		,41:{x:462,y:125}
		,42:{x:540,y:106}
		,43:{x:583,y:125}
		,44:{x:662,y:106}
		,45:{x:705,y:125}
		,46:{x:766,y:106}
		,47:{x:826,y:125}
		,48:{x:904,y:106}
		,49:{x:0,y:172}
		,50:{x:40,y:188}
		,51:{x:113,y:172}
		,52:{x:161,y:188}
		,53:{x:235,y:172}
		,54:{x:282,y:188}
		,55:{x:356,y:172}
		,56:{x:403,y:188}
		,57:{x:477,y:172}
		,58:{x:525,y:188}
		,59:{x:599,y:172}
		,60:{x:646,y:188}
		,61:{x:720,y:172}
		,62:{x:767,y:188}
		,63:{x:841,y:172}
		,64:{x:889,y:188}
		,65:{x:0,y:254}
		,66:{x:55,y:234}
		,67:{x:98,y:254}
		,68:{x:160,y:234}
		,69:{x:220,y:254}
		,70:{x:298,y:234}
		,71:{x:341,y:254}
		,72:{x:419,y:234}
		,73:{x:462,y:254}
		,74:{x:540,y:234}
		,75:{x:583,y:254}
		,76:{x:662,y:234}
		,77:{x:705,y:254}
		,78:{x:783,y:234}
		,79:{x:826,y:254}
		,80:{x:904,y:234}
		,81:{x:0,y:301}
		,82:{x:40,y:317}
		,83:{x:114,y:301}
		,84:{x:161,y:317}
		,85:{x:235,y:301}
		,86:{x:282,y:317}
		,87:{x:355,y:318}
		,88:{x:403,y:317}
		,89:{x:477,y:301}
		,90:{x:525,y:317}
		,91:{x:599,y:301}
		,92:{x:646,y:317}
		,93:{x:718,y:318}
		,94:{x:767,y:317}
		,95:{x:841,y:301}
		,96:{x:889,y:317}
		,97:{x:0,y:383}
		,98:{x:55,y:363}
		,99:{x:98,y:383}
		,100:{x:177,y:363}
		,101:{x:220,y:383}
		,102:{x:298,y:363}
		,103:{x:341,y:367}
		,104:{x:419,y:363}
		,105:{x:462,y:383}
		,106:{x:540,y:363}
		,107:{x:583,y:383}
		,108:{x:662,y:363}
		,109:{x:705,y:367}
		,110:{x:783,y:363}
		,111:{x:826,y:383}
		,112:{x:904,y:363}
		,113:{x:0,y:429}
		,114:{x:40,y:445}
		,115:{x:114,y:429}
		,116:{x:161,y:445}
		,117:{x:235,y:429}
		,118:{x:282,y:445}
		,119:{x:356,y:429}
		,120:{x:403,y:445}
		,121:{x:477,y:429}
		,122:{x:525,y:445}
		,123:{x:599,y:429}
		,124:{x:646,y:445}
		,125:{x:720,y:429}
		,126:{x:767,y:445}
		,127:{x:841,y:429}
		,128:{x:889,y:445}
		,129:{x:0,y:511}
		,130:{x:55,y:492}
		,131:{x:98,y:511}
		,132:{x:177,y:492}
		,133:{x:220,y:511}
		,134:{x:298,y:492}
		,135:{x:341,y:511}
		,136:{x:419,y:492}
		,137:{x:462,y:511}
		,138:{x:524,y:492}
		,139:{x:583,y:511}
		,140:{x:662,y:492}
		,141:{x:705,y:511}
		,142:{x:783,y:492}
		,143:{x:826,y:511}
		,144:{x:904,y:492}
		,145:{x:0,y:558}
		,146:{x:40,y:574}
		,147:{x:114,y:558}
		,148:{x:161,y:574}
		,149:{x:235,y:558}
		,150:{x:282,y:574}
		,151:{x:356,y:558}
		,152:{x:403,y:574}
		,153:{x:477,y:558}
		,154:{x:525,y:574}
		,155:{x:599,y:558}
		,156:{x:646,y:574}
		,157:{x:720,y:558}
		,158:{x:767,y:574}
		,159:{x:841,y:558}
		,160:{x:889,y:574}
		,161:{x:0,y:640}
		,162:{x:55,y:620}
		,163:{x:98,y:640}
		,164:{x:177,y:620}
		,165:{x:220,y:640}
		,166:{x:298,y:620}
		,167:{x:341,y:640}
		,168:{x:419,y:620}
		,169:{x:462,y:640}
		,170:{x:540,y:620}
		,171:{x:583,y:640}
		,172:{x:662,y:620}
		,173:{x:705,y:640}
		,174:{x:783,y:620}
		,175:{x:826,y:640}
		,176:{x:904,y:620}
	}
	var candidate = [
		1,16,161,176
	];
	var imgs = [];
	var shadows = [];
	var completes = [];
	var busyFlag = true;
	var lastY;
	var ratioNum;
	addEvt(window,'load',init);

	function addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}
	function removeEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.removeEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.detachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = '';
		}
	}
	function scrolltop() {
		var bdy = document.body;
	    var d = document.documentElement;
	    if (bdy && bdy.scrollTop) {
			return bdy.scrollTop;
		}
	    if (d && d.scrollTop) {
			return d.scrollTop;
		}
	    if (window.pageYOffset) {
			return window.pageYOffset;
		}
	    return 0;
	}
	function in_array(needle,haystack) {
		for (var p in haystack) {
			if (haystack[p] == needle) {
				return true;
			}
		}
		return false;
	}
	function init() {
		var clientW = document.body.clientWidth;
		ratioNum = clientW / 960;
		if (ratioNum > 1) {
			ratioNum = 1;
		}
		dropPiece(1);
	}
	function ratio(num) {
		return Math.floor(num * ratioNum);
	}
	function dropPiece(key) {
		var speedNum = 5 + Math.floor(Math.random() * 5);
		imgs[key] = document.createElement('img');
		imgs[key].src = jigsawPuzzlePiecePath + '/' + key + '.png';
		imgs[key].onload = function(){
			var rndR = (Math.floor(Math.random() * 360) - 180);
			var rndL = (ratio(960) / 2 + (Math.floor(Math.random() * 200) - 100));
			var rndT = (ratio(702) / 2 + (Math.floor(Math.random() * 200) - 100));
			imgs[key].style.position = 'absolute';
			imgs[key].style.transitionProperty = 'transform,margin-left,margin-top';
			imgs[key].style.transitionDuration = speedNum + 's';
			imgs[key].style.transformOrigin = '50% 50%';
			imgs[key].style.transform = 'rotate(' + rndR + 'deg)';
			imgs[key].style.marginLeft = rndL + 'px';
			imgs[key].style.marginTop = (rndT + marginHeight) + 'px';
			imgs[key].style.width = ratio(imgs[key].width) + 'px';
			imgs[key].style.height = 'auto';
			imgs[key].style.zIndex = 3;
			document.getElementById('origin').appendChild(imgs[key]);
			shadows[key] = document.createElement('img');
			shadows[key].src = jigsawPuzzleShadowPath + '/' + key + '.png';
			shadows[key].onload = function(){
				shadows[key].style.position = 'absolute';
				shadows[key].style.transitionProperty = 'transform,margin-left,margin-top';
				shadows[key].style.transitionDuration = speedNum + 's';
				shadows[key].style.transformOrigin = '50% 50%';
				shadows[key].style.transform = 'rotate(' + rndR + 'deg)';
				shadows[key].style.marginLeft = rndL + 'px';
				shadows[key].style.marginTop = (rndT + 120 + marginHeight) + 'px';
				shadows[key].style.width = ratio(shadows[key].width) + 'px';
				shadows[key].style.height = 'auto';
				shadows[key].style.zIndex = 2;
				shadows[key].style.opacity = 0;
				document.getElementById('origin').appendChild(shadows[key]);
				if (key < 176) {
					setTimeout(function(){dropPiece(key+1);},1);
				} else {
					busyFlag = false;
					addEvt(window, 'scroll', scrollChange);
				}
			}
		}
	}
	function setCandidate() {
		for (var key = 1; key <= 176; key++) {
			if (in_array(key,candidate)) {
				continue;
			}
			if (in_array(key,completes)) {
				continue;
			}
			var keyTop = key - 16;
			var keyBottom = key + 16;
			var keyLeft = key - 1;
			var keyRight = key + 1;
			for (var p in completes) {
				if (completes[p] == keyTop || completes[p] == keyBottom || completes[p] == keyLeft || completes[p] == keyRight) {
					candidate.push(key);
					break;
				}
			}
		}
	}
	function nextPiece() {
		setCandidate();
		if (candidate.length == 0) {
			removeEvt(window, 'scroll', scrollChange);	//finish
			return;
		}
		var p = Math.floor(Math.random() * candidate.length);
		var key = candidate[p];
		candidate.some(function(v,i){	//delete candidate[p];
			if (v == key){
				candidate.splice(i,1);
			}
		});
		completes.push(key);
		imgs[key].style.zIndex = 4;
		imgs[key].style.transform = '';
		imgs[key].style.marginLeft = ratio(piecePos[key].x) + 'px';
		imgs[key].style.marginTop = ratio(piecePos[key].y) + marginHeight + 'px';
		shadows[key].style.zIndex = 3;
		shadows[key].style.opacity = 0.6;
		shadows[key].style.transform = '';
		shadows[key].style.marginLeft = ratio(piecePos[key].x - 6) + 'px';
		shadows[key].style.marginTop = ratio(piecePos[key].y - 6) + marginHeight + 'px';
		shadows[key].style.transitionProperty = 'transform,margin-left,margin-top,opacity';
		setTimeout(function(){
			imgs[key].style.zIndex = 1;
			shadows[key].style.zIndex = 0;
			shadows[key].style.transitionDuration = '1.5s';
			setTimeout(function(){
				shadows[key].style.opacity = 0;
			},20);
			setTimeout(function(){
				document.getElementById('origin').removeChild(shadows[key]);
			},1600);
		},parseInt(imgs[key].style.transitionDuration) * 1000);
	}
	function scrollChange() {
		var yPos = Math.floor(scrolltop() / 95) * 95 + (95 * 1) + 1;
		if (lastY == yPos) {
			return;
		}
		lastY = yPos;
		if (busyFlag) {
			return;
		}
		busyFlag = true;
		nextPiece();
		busyFlag = false;
	}
})(window,document,jigsawPuzzlePiecePath);
//end

この記事は2015年当時の物です。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。