人間ハンドスピナー続編

スマホを傾けて、人間ハンドスピナーを回しましょう！

スピード: 0

【ゲーム概要】スマホを傾けて人間ハンドスピナーを回すゲームです。スタートボタンをクリックすると、加速度センサーを使用してスマホの傾きに応じて回転します。ストップボタンをクリックすると停止します。回転速度は画面下部に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>人間ハンドスピナー続編</title>
</head>
<body>
	<h1 style="text-align:center;">人間ハンドスピナー続編</h1>
	<div style="text-align:center;">
		<img src="spinner.png" height="200px" width="200px">
	</div>
	<p style="text-align:center;">スマホを傾けて、人間ハンドスピナーを回しましょう！</p>
	<div style="text-align:center;">
		<button onclick="startGame()">スタート</button>
		<button onclick="stopGame()">ストップ</button>
	</div>
	<p style="text-align:center;">スピード: <span id="speed">0</span></p>
	<script>
		var speed = 0;
		function startGame() {
			window.addEventListener("deviceorientation", handleOrientation, true);
		}

function handleOrientation(event) {
			var beta = event.beta;
			var gamma = event.gamma;
			speed = (Math.abs(beta) + Math.abs(gamma)) * 0.1;
			document.getElementById("speed").textContent = speed.toFixed(2);
			document.body.style.transform = "rotate(" + beta + "deg) rotate3d(1,0,0," + -gamma + "deg)";
		}

function stopGame() {
			window.removeEventListener("deviceorientation", handleOrientation, true);
			speed = 0;
			document.getElementById("speed").textContent = speed.toFixed(2);
			document.body.style.transform = "none";
		}
	</script>
</body>
</html>

【ゲーム概要】
スマホを傾けて人間ハンドスピナーを回すゲームです。スタートボタンをクリックすると、加速度センサーを使用してスマホの傾きに応じて回転します。ストップボタンをクリックすると停止します。回転速度は画面下部に表示されます。