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

No:2894

2709

←

Prev Next

→

La Gioconda
Developer User3494｜Date and time 23/6/23 1:36:53
Build time 61.407 sec｜Game capacity 4.874KB｜

Script

を題材にしたアプリを例として実装してみました。

モナリザのパズル

完成させよう！

このアプリは、モナリザの画像を9つのパズルに分割し、シャッフルしてからそれらを元に戻すゲームです。スマートフォンで操作できるように、タッチイベントを利用しています。完成した際には「完成！おめでとう！」とメッセージが表示されます。絵文字は使用していませんが、モナリザを題材にしているので、表情豊かなセリフを考えると楽しいかもしれません。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

を題材にしたアプリを例として実装してみました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>モナリザのパズル</title>
	<style>
		/* スタイルシート */
		body {
			margin: 0;
			padding: 0;
			background-color: #f0f0f0;
			text-align: center;
		}
		canvas {
			border: 1px solid #ccc;
			background-color: #fff;
		}
		#message {
			color: #333;
			font-size: 24px;
			margin-top: 20px;
			margin-bottom: 40px;
		}
	</style>
</head>
<body>
	<h1>モナリザのパズル</h1>
	<p>完成させよう！</p>
	<canvas id="canvas"></canvas>
	<div id="message"></div>

// 画像の読み込み
		var img = new Image();
		img.src = "monalisa.jpg";
		img.onload = function() {
			// 画像の描画
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// パズルの設定
			var puzzles = [
				{ x: 0, y: 0, width: 100, height: 100 },
				{ x: 100, y: 0, width: 100, height: 100 },
				{ x: 200, y: 0, width: 100, height: 100 },
				{ x: 0, y: 100, width: 100, height: 100 },
				{ x: 100, y: 100, width: 100, height: 100 },
				{ x: 200, y: 100, width: 100, height: 100 },
				{ x: 0, y: 200, width: 100, height: 100 },
				{ x: 100, y: 200, width: 100, height: 100 },
				{ x: 200, y: 200, width: 100, height: 100 }
			];

// シャッフル
			puzzles = shuffle(puzzles);

// パズルの描画
			for (var i = 0; i < puzzles.length; i++) {
				ctx.strokeRect(puzzles[i].x, puzzles[i].y, puzzles[i].width, puzzles[i].height);
			}

// タッチイベントの設定
			canvas.addEventListener("touchstart", function(e) {
				var rect = canvas.getBoundingClientRect();
				var touchX = e.changedTouches[0].pageX - rect.left;
				var touchY = e.changedTouches[0].pageY - rect.top;
				var index = checkTouch(puzzles, touchX, touchY);
				if (index !== -1) {
					movePuzzle(puzzles, index, touchX, touchY);
				}
			});

// パズルが完成したかどうかのチェック
			setInterval(function() {
				if (isComplete(puzzles)) {
					document.getElementById("message").textContent = "完成！おめでとう！";
				}
			}, 1000 / 60);
		};

// 配列をシャッフルする関数
		function shuffle(arr) {
			for (var i = arr.length - 1; i >= 0; i--) {
				var rand = Math.floor(Math.random() * (i + 1));
				var temp = arr[i];
				arr[i] = arr[rand];
				arr[rand] = temp;
			}
			return arr;
		}

// タッチされたパズルのインデックスを取得する関数
		function checkTouch(arr, x, y) {
			for (var i = 0; i < arr.length; i++) {
				if (arr[i].x < x && x < arr[i].x + arr[i].width && arr[i].y < y && y < arr[i].y + arr[i].height) {
					return i;
				}
			}
			return -1;
		}

// パズルを移動する関数
		function movePuzzle(arr, index, x, y) {
			var startX = arr[index].x;
			var startY = arr[index].y;
			canvas.addEventListener("touchmove", touchmoveHandler);
			canvas.addEventListener("touchend", touchendHandler);

function touchmoveHandler(e) {
				var rect = canvas.getBoundingClientRect();
				var touchX = e.changedTouches[0].pageX - rect.left;
				var touchY = e.changedTouches[0].pageY - rect.top;
				var dx = touchX - x;
				var dy = touchY - y;
				arr[index].x = startX + dx;
				arr[index].y = startY + dy;
				drawPuzzle(arr);
			}

function touchendHandler(e) {
				canvas.removeEventListener("touchmove", touchmoveHandler);
				canvas.removeEventListener("touchend", touchendHandler);
			}
		}

// パズルを描画する関数
		function drawPuzzle(arr) {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
			for (var i = 0; i < arr.length; i++) {
				ctx.strokeRect(arr[i].x, arr[i].y, arr[i].width, arr[i].height);
			}
		}

// パズルが完成したかどうかを判定する関数
		function isComplete(arr) {
			var correctPuzzles = [
				{ x: 0, y: 0 },
				{ x: 100, y: 0 },
				{ x: 200, y: 0 },
				{ x: 0, y: 100 },
				{ x: 100, y: 100 },
				{ x: 200, y: 100 },
				{ x: 0, y: 200 },
				{ x: 100, y: 200 },
				{ x: 200, y: 200 }
			];
			for (var i = 0; i < arr.length; i++) {
				if (arr[i].x !== correctPuzzles[i].x || arr[i].y !== correctPuzzles[i].y) {
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>