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

No:63

2042

←

Prev Next

→

The game of turning stars
Developer anonymous｜Date and time 70/1/1 9:29:11
Build time unknown sec｜Game capacity 1.751KB｜

Script

game in which one spins a star

Tap a star to turn it.、
The constellation will be complete!

⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐

←

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: #f7e7ff;
			font-family: Arial, sans-serif;
			text-align: center;
		}

h1 {
			color: #1c3cd2;
			font-size: 2.5em;
			margin-top: 1em;
			margin-bottom: 0.5em;
		}

.star {
			display: inline-block;
			font-size: 3em;
			margin: 0.5em;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>星回しゲーム</h1>
	<p>星をタップして回すと、<br>星座が完成するよ！</p>
	<div>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
		<span class="star">⭐</span>
	</div>
	<script>
		// 初期化
		let stars = document.querySelectorAll('.star');
		let numClicked = 0;
		let completed = false;

// タップされた時の処理
		function handleTap() {
			if (completed) {
				return;
			}
			numClicked++;
			this.classList.add('spin');
			if (numClicked === 8) {
				completed = true;
				setTimeout(showCompletionMessage, 1500);
			}
		}

// 星回転アニメーション終了後の処理
		function handleAnimationEnd() {
			this.classList.remove('spin');
		}

// 完成メッセージの表示
		function showCompletionMessage() {
			alert('星座が完成したよ！');
		}

// イベントリスナーの設定
		for (let i = 0; i < stars.length; i++) {
			stars[i].addEventListener('click', handleTap);
			stars[i].addEventListener('animationend', handleAnimationEnd);
		}
	</script>
</body>
</html>