人間ハンドスピナー続編

画面をタップするとスピナーが回ります。回転するスピナーを止めたときの角度に応じてポイントが加算されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>人間ハンドスピナー続編</title>
	<style>
		body {
			background-color: #EEEEEE;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		#spinner {
			margin: 50px auto;
			width: 100px;
			height: 100px;
			background-color: #FFC107;
			border-radius: 50%;
			animation: spin 2s linear infinite;
		}
		@keyframes spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		#score {
			font-size: 30px;
			margin-top: 20px;
		}
		button {
			font-size: 20px;
			background-color: #4CAF50;
			color: #FFFFFF;
			padding: 10px 20px;
			border-radius: 5px;
			border: none;
			cursor: pointer;
			margin: 10px;
		}
	</style>
</head>
<body>
	<h1>人間ハンドスピナー続編</h1>
	<p>画面をタップするとスピナーが回ります。回転するスピナーを止めたときの角度に応じてポイントが加算されます。</p>
	<div id="spinner"></div>
	<div id="score"></div>
	<button id="start">スタート</button>
	<button id="stop">ストップ</button>

spinner.addEventListener("click", spin);

startBtn.addEventListener("click", function() {
			if (!spinning) {
				spinning = true;
				startBtn.style.display = "none";
				stopBtn.style.display = "inline-block";
				score.innerHTML = "0";
			}
		});

stopBtn.addEventListener("click", function() {
			if (spinning) {
				spinner.style.animation = "none";
				spinner.style.transform = "rotate(" + currentAngle + "deg)";
				totalScore += calculateScore(currentAngle);
				score.innerHTML = totalScore;
				currentAngle = 0;
				spinning = false;
				stopBtn.style.display = "none";
				startBtn.style.display = "inline-block";
			}
		});

function spin() {
			if (spinning) {
				var angle = Math.floor(Math.random() * 360);
				spinner.style.transform = "rotate(" + angle + "deg)";
				currentAngle = angle;
			}
		}

function calculateScore(angle) {
			var score = Math.floor(angle / 10);
			if (score > 10) {
				score = 10;
			}
			return score;
		}
	</script>
</body>
</html>