人間ハンドスピナー続編

SCORE: 0

※このプログラムは、クリックまたはタップすることで手回しハンドスピナーを回し、3秒後に止めるというゲームです。スコアは回転数として計算しており、回転数が1増えるごとにスコアも1上がります。また、ページ内には笑顔の絵文字が使われています。スマートフォンでも動作し、レスポンシブ対応しています。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>人間ハンドスピナー 続編</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #fffceb;
			font-size: 16px;
			font-family: Arial, sans-serif;
			color: #333;
			text-align: center;
		}
		h1 {
			margin-top: 24px;
			font-size: 28px;
			font-weight: bold;
		}
		#spinner {
			width: 200px;
			height: 200px;
			margin: 32px auto;
			border: 2px solid #333;
			border-radius: 50%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}
		#spinner:hover {
			box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
		}
		#spinner:before {
			content: "\1F44C";
			font-size: 72px;
		}
		#spinner.spinning:before {
			animation: spin 3s linear infinite;
		}
		@keyframes spin {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
		#score {
			margin-top: 24px;
			font-size: 24px;
			font-weight: bold;
			color: #f00;
		}
	</style>
	<script>
		var score = 0;

function spin() {
			var spinner = document.getElementById("spinner");
			spinner.classList.add("spinning");
			setTimeout(function() {
				spinner.classList.remove("spinning");
				score++;
				document.getElementById("score").innerText = "SCORE: " + score;
			}, 3000);
		}
	</script>
</head>
<body>
	<h1>人間ハンドスピナー 続編</h1>
	<div id="spinner" onclick="spin()"></div>
	<div id="score">SCORE: 0</div>
</body>
</html>

人間ハンドスピナー 続編

人間ハンドスピナー続編