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

No:2904

1060

←

Prev Next

→

Random Puzzles
Developer User3494｜Date and time 23/6/23 2:07:59
Build time 48.494 sec｜Game capacity 4.001KB｜

Script

ランダムパズル

Moves: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>ランダムパズル</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #fafafa;
			font-family: 'Helvetica Neue', sans-serif;
		}

h1 {
			text-align: center;
		}

#container {
			margin: 1rem auto;
			display: flex;
			flex-wrap: wrap;
			max-width: 90vw;
			border: 5px solid #333;
			border-radius: 10px;
			padding: 0.5rem;
			box-sizing: border-box;
		}

.tile {
			background-color: #fff;
			border: 2px solid #333;
			text-align: center;
			font-size: 2rem;
			padding: 1rem;
			box-sizing: border-box;
			width: calc(25% - 0.5rem);
			height: calc(25% - 0.5rem);
			margin: 0.25rem;
			cursor: pointer;
			user-select: none;
			transition: all 0.2s ease-in-out;
		}

.tile:hover {
			background-color: #f2f2f2;
		}

.tile.clicked {
			background-color: #999;
			color: #fff;
			border-color: #999;
		}

@media (max-width: 600px) {
			#container {
				max-width: 100vw;
			}

.tile {
				font-size: 1.5rem;
				padding: 0.5rem;
				width: calc(33.33% - 0.5rem);
				height: calc(33.33% - 0.5rem);
			}
		}
	</style>
	<script>
	window.onload = function() {
		// パズルの大きさを設定
		const SIZE = 4;
		
		let tiles = [];
		let clickedTile = null;
		let moves = 0;
		
		// タイルがクリックされた時に呼ばれる関数
		function handleClick(event) {
			let tile = event.target;
			if (clickedTile) {
				// 2つ目のタイルがすでにクリックされている場合
				// タイルの入れ替えを行う
				let temp = {text: clickedTile.textContent, clicked: false};
				clickedTile.textContent = tile.textContent;
				clickedTile.classList.remove("clicked");
				tiles[clickedTile.dataset.index] = temp;
				tile.textContent = "";
				tile.classList.add("clicked");
				tiles[tile.dataset.index] = {text: "", clicked: true};
				clickedTile = null;
				moves++;
				document.getElementById("moves").textContent = "Moves: " + moves;
				if (checkWin()) {
					alert("Congratulations! You won in " + moves + " moves.");
				}
			} else if (tile.textContent != "") {
				// 1つ目のタイルがクリックされた場合
				tile.classList.add("clicked");
				clickedTile = tile;
			}
		}
		
		// パズルのタイルをシャッフルする関数
		function shuffleTiles() {
			for (let i = tiles.length - 1; i > 0; i--) {
				let j = Math.floor(Math.random() * (i + 1));
				let temp = {text: tiles[i].text, clicked: tiles[i].clicked};
				tiles[i].text = tiles[j].text;
				tiles[i].clicked = tiles[j].clicked;
				tiles[j].text = temp.text;
				tiles[j].clicked = temp.clicked;
			}
			updateTiles();
			moves = 0;
			document.getElementById("moves").textContent = "Moves: " + moves;
		}
		
		// パズルが完成しているかどうかを判断する関数
		function checkWin() {
			for (let i = 0; i < tiles.length; i++) {
				if (tiles[i].text != i + 1 && i != tiles.length - 1) {
					return false;
				}
			}
			return true;
		}
		
		// パズルのタイルを更新する関数
		function updateTiles() {
			let container = document.getElementById("container");
			container.innerHTML = "";
			for (let i = 0; i < tiles.length; i++) {
				let tile = document.createElement("div");
				tile.classList.add("tile");
				tile.addEventListener("click", handleClick);
				tile.dataset.index = i;
				tile.textContent = tiles[i].text;
				if (tiles[i].clicked) {
					tile.classList.add("clicked");
					clickedTile = tile;
				}
				container.appendChild(tile);
			}
		}
		
		// パズルを初期化する関数
		function initPuzzle() {
			tiles = [];
			for (let i = 1; i < SIZE * SIZE; i++) {
				tiles.push({text: i, clicked: false});
			}
			tiles.push({text: "", clicked: true});
			shuffleTiles();
		}
		
		// 初期化
		initPuzzle();
	};
	</script>
</head>
<body>
	<h1>ランダムパズル</h1>
	<div id="container"></div>
	<p id="moves">Moves: 0</p>
	<button onclick="shuffleTiles();">Shuffle</button>
</body>
</html>