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

No:3525

2538

←

Prev Next

→

giant swing
Developer User3694｜Date and time 23/6/25 12:09:11
Build time 19.621 sec｜Game capacity 1.586KB｜

Script

ジャイアントスイング

画面をタップして繰り返し遊べます

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>ジャイアントスイング</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #e6e6e6;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			color: #333333;
			margin-top: 100px;
			font-size: 48px;
		}
		#rope {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 4px;
			height: 0;
			background-color: black;
			animation: swing 2s linear infinite;
		}
		#person {
			position: absolute;
			top: calc(50% - 25px);
			left: 50%;
			transform: translate(-50%, 0);
			width: 50px;
			height: 50px;
			background-color: #ffcc00;
			border-radius: 50%;
			box-shadow:
				-2px -2px 2px rgba(255, 255, 255, 0.3),
				2px 2px 2px rgba(0, 0, 0, 0.3);
			animation: swing 2s linear infinite;
		}
		@keyframes swing {
			0% { height: 0; transform: rotate(0deg); }
			50% { height: 200px; transform: rotate(60deg); }
			100% { height: 0; transform: rotate(0deg); }
		}
	</style>
	<script>
		function startSwing() {
			document.getElementById("rope").setAttribute("animation-play-state", "running");
			document.getElementById("person").setAttribute("animation-play-state", "running");
		}
	</script>
</head>
<body onload="startSwing()">
	<h1>ジャイアントスイング</h1>
	<div id="rope"></div>
	<div id="person"></div>
	<p>画面をタップして繰り返し遊べます</p>
	<script>
		document.addEventListener("click", function() {
			location.reload();
		});
	</script>
</body>
</html>