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

No:2436

3477

Human Hand Spinner Sequel
Developer anonymous｜Date and time 70/1/1 9:49:19
Build time unknown sec｜Game capacity 2.959KB｜

人間ハンドスピナー続編は、前作と同じく指を回してスピナーのように回転させるゲームです。今回は、スピナーの回転速度に応じて得点が増えるようになっています。以下が、実際のプログラム例です。

人間ハンドスピナー続編

🕛

得点：0

これをスマートフォンで開くと、画面上にスピナーが表示されます。スピナーをタップし、指を動かすとスピナーが回転し始めます。指を離すと、回転が止まり、得点が表示されます。スピナーの回転速度が早いほど、得点が高くなります。次のような特徴があります。 - bodyタグにtext-align:centerを設定しているため、画面の中央に要素が表示されます。 - .spinnerクラスにfont-size:60pxを設定しているため、スピナーの文字が大きく表示されます。 - startSpinner関数では、スピナーをタップした時刻をstartTime変数に保存します。また、score変数を0に初期化し、得点表示を更新します。 - endSpinner関数では、スピナーを離した時刻をendTime変数に保存します。さらに、スピナーが回転した時間をduration変数に計算します。得点は、「1 + 2×回転時間÷π」で計算されます。Math.round関数を使って、得点を小数第3位まで丸めています。 - handleTouchStart関数では、スピナーをタップした時にstartSpinner関数を呼び出します。 - handleTouchEnd関数では、スピナーを離した時にendSpinner関数を呼び出します。以上のように、スマートフォンで遊べる人間ハンドスピナー続編の実装例を紹介しました。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

人間ハンドスピナー続編は、前作と同じく指を回してスピナーのように回転させるゲームです。今回は、スピナーの回転速度に応じて得点が増えるようになっています。

以下が、実際のプログラム例です。

```html
<!DOCTYPE html>
<html>
<head>
	<title>人間ハンドスピナー続編</title>
	<style>
		body {
			font-size: 24px;
			text-align: center;
		}
		
		.spinner {
			font-size: 60px;
		}
		
		.score {
			font-size: 36px;
			margin-top: 20px;
		}
	</style>
	<script>
		var startTime;
		var score = 0;
		
		function startSpinner() {
			var spinner = document.getElementById("spinner");
			spinner.innerHTML = "👆";
			startTime = new Date().getTime();
			score = 0;
			document.getElementById("score").innerHTML = "得点：0";
		}
		
		function endSpinner() {
			var spinner = document.getElementById("spinner");
			spinner.innerHTML = "🕛";
			var endTime = new Date().getTime();
			var duration = (endTime - startTime) / 1000;
			score = Math.round(1000 * (1 + 2 * duration / Math.PI)) / 1000;
			document.getElementById("score").innerHTML = "得点：" + score;
		}
		
		function handleTouchStart() {
			startSpinner();
		}
		
		function handleTouchEnd() {
			endSpinner();
		}
	</script>
</head>
<body>
	<h1>人間ハンドスピナー続編</h1>
	<div class="spinner" ontouchstart="handleTouchStart()" ontouchend="handleTouchEnd()" id="spinner">🕛</div>
	<div class="score" id="score">得点：0</div>
</body>
</html>
```

これをスマートフォンで開くと、画面上にスピナーが表示されます。スピナーをタップし、指を動かすとスピナーが回転し始めます。指を離すと、回転が止まり、得点が表示されます。スピナーの回転速度が早いほど、得点が高くなります。

次のような特徴があります。

- bodyタグにtext-align:centerを設定しているため、画面の中央に要素が表示されます。
- .spinnerクラスにfont-size:60pxを設定しているため、スピナーの文字が大きく表示されます。
- startSpinner関数では、スピナーをタップした時刻をstartTime変数に保存します。また、score変数を0に初期化し、得点表示を更新します。
- endSpinner関数では、スピナーを離した時刻をendTime変数に保存します。さらに、スピナーが回転した時間をduration変数に計算します。得点は、「1 + 2×回転時間÷π」で計算されます。Math.round関数を使って、得点を小数第3位まで丸めています。
- handleTouchStart関数では、スピナーをタップした時にstartSpinner関数を呼び出します。
- handleTouchEnd関数では、スピナーを離した時にendSpinner関数を呼び出します。

以上のように、スマートフォンで遊べる人間ハンドスピナー続編の実装例を紹介しました。