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

No:184

262

←

Prev Next

→

Balancing game with a stick
Developer User2908｜Date and time 23/6/5 2:16:13
Build time 54.29 sec｜Game capacity 2.306KB｜

Script

Balance game with a stick

遊び方：スマホを左右に傾けて、Balance the ball on the stick!

Youll get a high score if you do it often! Good luck! 😊👍

←

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 {
			font-family: Arial, sans-serif;
			background-color: #f0f0f0;
			margin: 0;
			padding: 0;
		}
		
		h1 {
			text-align: center;
			margin-top: 20px;
			margin-bottom: 10px;
		}
		
		#stick {
			position: relative;
			margin-top: 50px;
			margin-bottom: 50px;
			width: 10px;
			height: 200px;
			background-color: black;
			margin-left: auto;
			margin-right: auto;
			animation: swing 3s infinite;
			transform-origin: bottom center;
		}
		
		#ball {
			position: relative;
			top: -200px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: yellow;
			margin-left: auto;
			margin-right: auto;
			animation: fall 3s infinite;
			animation-play-state: paused;
		}
		
		@keyframes swing {
			0% { transform: rotate(0deg); }
			25% { transform: rotate(15deg); }
			75% { transform: rotate(-15deg); }
			100% { transform: rotate(0deg); }
		}
		
		@keyframes fall {
			0% { top: -200px; }
			100% { top: 200px; }
		}
		
		@media screen and (max-width: 767px) {
			#stick {
				width: 5px;
				height: 100px;
			}
			
			#ball {
				width: 25px;
				height: 25px;
			}
		}
	</style>
</head>
<body>
	<h1>棒でバランスゲーム</h1>
	<div id="stick"></div>
	<div id="ball"></div>
	
	<script>
		var stick = document.getElementById("stick");
		var ball = document.getElementById("ball");
		var speed = 1.5;
		var angle = 0;
		var isPlaying = false;
		
		window.addEventListener("deviceorientation", function(event) {
			angle = event.gamma;
			
			if (!isPlaying) {
				isPlaying = true;
				ball.style.animationPlayState = "running";
			}
		});
		
		function update() {
			var rotation = angle * Math.PI / 180;
			var dx = Math.sin(rotation) * speed;
			
			stick.style.transform = "rotate(" + angle + "deg)";
			ball.style.left = (stick.offsetLeft + stick.offsetWidth / 2 - ball.offsetWidth / 2) + dx + "px";
			
			requestAnimationFrame(update);
		}
		
		requestAnimationFrame(update);
	</script>
	
	<p><strong>遊び方：</strong>スマホを左右に傾けて、棒の上に乗った玉をバランスさせよう！</p>
	<p>よくやると高得点が出るぞ！頑張ってね！ 😊👍</p>
</body>
</html>