AI game creator

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

No:16072

←

Prev Next

→

Merge game
Developer User7114｜Date and time 23/9/15 22:46:54
Build time 41.107 sec｜Game capacity 3.031KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Puzzle Game</title>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		
		.container {
			width: 300px;
			height: 300px;
			border: 2px solid #333;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 1fr);
			grid-gap: 5px;
		}
		
		.box {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 5px;
		}
		
		.box img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		.empty {
			background-color: transparent;
			border: none;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box" onclick="move(0)"><img src="pictogram1.png" alt="Pictogram 1"></div>
		<div class="box" onclick="move(1)"><img src="pictogram2.png" alt="Pictogram 2"></div>
		<div class="box" onclick="move(2)"><img src="pictogram3.png" alt="Pictogram 3"></div>
		<div class="box" onclick="move(3)"><img src="pictogram4.png" alt="Pictogram 4"></div>
		<div class="empty"></div>
		<div class="box" onclick="move(4)"><img src="pictogram5.png" alt="Pictogram 5"></div>
		<div class="box" onclick="move(5)"><img src="pictogram6.png" alt="Pictogram 6"></div>
		<div class="box" onclick="move(6)"><img src="pictogram7.png" alt="Pictogram 7"></div>
		<div class="box" onclick="move(7)"><img src="pictogram8.png" alt="Pictogram 8"></div>
	</div>
	
	<script>
		let puzzle = [0, 1, 2, 3, 4, 5, 6, 7, 8]; // Initial puzzle arrangement
		let emptyIndex = 4; // Index of the empty box
		
		function move(index) {
			if (isAdjacent(index, emptyIndex)) {
				let temp = puzzle[index]; // Swap values
				puzzle[index] = puzzle[emptyIndex];
				puzzle[emptyIndex] = temp;
				emptyIndex = index;
				updatePuzzle();
				if (isSolved()) {
					alert('Congratulations! You solved the puzzle.');
				}
			}
		}
		
		function isAdjacent(index1, index2) {
			// Check if two boxes are adjacent to each other
			let row1 = Math.floor(index1 / 3);
			let col1 = index1 % 3;
			let row2 = Math.floor(index2 / 3);
			let col2 = index2 % 3;
			
			return (Math.abs(row1 - row2) + Math.abs(col1 - col2) === 1);
		}
		
		function isSolved() {
			// Check if the puzzle is solved (in ascending order)
			for (let i = 0; i < puzzle.length; i++) {
				if (puzzle[i] !== i) {
					return false;
				}
			}
			return true;
		}
		
		function updatePuzzle() {
			// Update the puzzle arrangement on the webpage
			let boxes = document.getElementsByClassName('box');
			for (let i = 0; i < boxes.length; i++) {
				if (puzzle[i] === 8) {
					boxes[i].classList.add('empty');
					boxes[i].innerHTML = '';
				} else {
					boxes[i].classList.remove('empty');
					boxes[i].innerHTML = '<img src="pictogram' + (puzzle[i] + 1) + '.png" alt="Pictogram ' + (puzzle[i] + 1) + '">';
				}
			}
		}
		
		// Game initialization
		window.onload = function() {
			updatePuzzle();
		}
	</script>
</body>
</html>