人間ハンドスピナー続編

【ゲームの概要】人間ハンドスピナー続編は、指で回すだけのハンドスピナーに飽きたあなたに贈るスマホゲームです。画面上の人間の形をしたハンドスピナーを指で動かし、画面外に出ないように移動させましょう。画面をタップすると、一定時間内にスピーディに動くことができます。スマホの加速度センサーを使っても遊べるので、ぜひ試してみてください！

←

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: #f8f9fa;
			color: #343a40;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1 {
			margin-top: 30px;
		}
		#spinner {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #6c757d;
			display: inline-block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(0deg);
			animation-name: spin;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
			touch-action: none;
		}
		@keyframes spin {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}
			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<h1>人間ハンドスピナー続編</h1>
	<div id="spinner"></div>
	<script>
		// 変数
		var startX, startY;
		var moveX, moveY;
		var endX, endY;

// タッチイベントの処理
		document.getElementById("spinner").addEventListener("touchstart", function(evt) {
			startX = evt.touches[0].clientX;
			startY = evt.touches[0].clientY;
			this.style.animationPlayState = "paused";
		});

document.getElementById("spinner").addEventListener("touchmove", function(evt) {
			evt.preventDefault();
			moveX = evt.touches[0].clientX;
			moveY = evt.touches[0].clientY;
			this.style.left = (this.offsetLeft + moveX - startX) + "px";
			this.style.top = (this.offsetTop + moveY - startY) + "px";
			startX = moveX;
			startY = moveY;
		});

document.getElementById("spinner").addEventListener("touchend", function(evt) {
			endX = evt.changedTouches[0].clientX;
			endY = evt.changedTouches[0].clientY;
			var dx = endX - startX;
			var dy = endY - startY;
			var speed = Math.sqrt(dx * dx + dy * dy) / 50;
			var direction = Math.atan2(dy, dx);
			var vx = speed * Math.cos(direction);
			var vy = speed * Math.sin(direction);
			move(vx, vy);
			this.style.animationPlayState = "running";
		});

// 移動処理
		function move(vx, vy) {
			var spinner = document.getElementById("spinner");
			var x = spinner.offsetLeft;
			var y = spinner.offsetTop;
			var maxX = window.innerWidth - spinner.offsetWidth;
			var maxY = window.innerHeight - spinner.offsetHeight;
			var timer = setInterval(frame, 10);
			function frame() {
				if (x >= maxX || x <= 0) {
					vx = -vx;
				}
				if (y >= maxY || y <= 0) {
					vy = -vy;
				}
				x += vx;
				y += vy;
				spinner.style.left = x + "px";
				spinner.style.top = y + "px";
			}
		}
	</script>
</body>
</html>

【ゲームの概要】
人間ハンドスピナー続編は、指で回すだけのハンドスピナーに飽きたあなたに贈るスマホゲームです。画面上の人間の形をしたハンドスピナーを指で動かし、画面外に出ないように移動させましょう。画面をタップすると、一定時間内にスピーディに動くことができます。スマホの加速度センサーを使っても遊べるので、ぜひ試してみてください！