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

No:2959

3294

←

Prev Next

→

A space puzzle game
Developer User3647｜Date and time 23/6/23 7:29:52
Build time 19.922 sec｜Game capacity 2.161KB｜

Script

🚀 Space Puzzle Game 🌌

Drag the planets to their respective orbits and solve the puzzle!

Sun ☀️

Earth 🌎

Mars 🪐

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Space Puzzle Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
		<h1>🚀 Space Puzzle Game 🌌</h1>
		<p>Drag the planets to their respective orbits and solve the puzzle!</p>
		<div class="row">
			<div class="col-sm-4">
				<h3>Sun ☀️</h3>
				<div id="orbit1" class="orbit"></div>
				<div class="planet" id="planet1" draggable="true" ondragstart="startDrag(event)"></div>
			</div>
			<div class="col-sm-4">
				<h3>Earth 🌎</h3>
				<div id="orbit2" class="orbit"></div>
				<div class="planet" id="planet2" draggable="true" ondragstart="startDrag(event)"></div>
			</div>
			<div class="col-sm-4">
				<h3>Mars 🪐</h3>
				<div id="orbit3" class="orbit"></div>
				<div class="planet" id="planet3" draggable="true" ondragstart="startDrag(event)"></div>
			</div>
		</div>
		<button onclick="checkSolution()">Check Solution</button>
	</div>

function startDrag(e) {
			dragItem = e.target;
		}

document.addEventListener("dragover", function(e) {
			e.preventDefault();
		});

document.addEventListener("drop", function(e) {
			e.preventDefault();
			if (e.target.classList.contains("orbit")) {
				e.target.appendChild(dragItem);
			}
		});

function checkSolution() {
			var orbit1 = document.getElementById("orbit1");
			var orbit2 = document.getElementById("orbit2");
			var orbit3 = document.getElementById("orbit3");
			var planet1 = document.getElementById("planet1");
			var planet2 = document.getElementById("planet2");
			var planet3 = document.getElementById("planet3");

if (orbit1.contains(planet1) && orbit2.contains(planet2) && orbit3.contains(planet3)) {
				alert("Congratulations! You solved the puzzle!");
			} else {
				alert("Uh oh! Try again!");
			}
		}
	</script>

</body>
</html>