5 Centimeters per second's game

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

No:2570

2151

←

Prev Next

→

5 Centimeters per second
Developer User3586｜Date and time 23/6/22 0:31:34
Build time 35.592 sec｜Game capacity 2.857KB｜

Script

「秒速5センチメートル」のテーマで、空を飛ぶヒコーキのアプリを作ってみました。

このアプリでは、スマホを傾けることで飛行機を操作します。飛行機は画面中央に表示され、スマホの傾きに合わせて左右、前後に移動します。また、背景には空に浮かぶ雲のアニメーションが表示されています。このアプリを遊ぶと、まるで自分が飛行機を操縦しているかのような感覚を味わえます。スマホがリアルなハンドルになったかのように、飛行機をコントロールして、空の旅を楽しんでみてください！

←

Prev　Next

→ 　

Back　

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

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

「秒速5センチメートル」のテーマで、空を飛ぶヒコーキのアプリを作ってみました。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>空を飛ぶヒコーキ - 秒速5センチメートル</title>
	<style>
		body {
			background-color: #87CEEB;
		}
		
		#plane {
			width: 60px;
			height: 60px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: top 1.5s linear, left 1.5s linear;
		}
		
		#clouds {
			position: absolute;
			top: 20%;
			left: 0;
			overflow: hidden;
			width: 100%;
			height: 150px;
			z-index: -1;
		}
		
		#clouds img {
			position: absolute;
			left: 0;
			top: 0;
			animation: moveClouds 30s linear infinite;
		}
		
		@keyframes moveClouds {
			from {left: 0;}
			to {left: -600px;}
		}
	</style>
	<script>
		window.addEventListener("deviceorientation", handleOrientation, true);
		
		var maxTilt = 30;
		
		function handleOrientation(event) {
			var gamma = event.gamma; // 左右の傾き (度)
			var beta = event.beta;   // 前後の傾き (度)
			
			// 傾きの値を画面の幅に変換（+-1）
			var x = gamma / maxTilt;
			var y = beta / maxTilt;
			
			// 幅と高さを取得
			var screenWidth = window.innerWidth;
			var screenHeight = window.innerHeight;
			
			// 飛行機の位置を計算
			var plane = document.getElementById("plane");
			var planeWidth = plane.offsetWidth;
			var planeHeight = plane.offsetHeight;
			var planeX = (screenWidth - planeWidth) / 2 + x * (screenWidth - planeWidth) / 2;
			var planeY = (screenHeight - planeHeight) / 2 + y * (screenHeight - planeHeight) / 2;
			
			// 飛行機を移動
			plane.style.left = planeX + "px";
			plane.style.top = planeY + "px";
		}
	</script>
</head>
<body>
	<div id="clouds">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/cloud_2601.png" alt="cloud" width="150" height="100">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/cloud_2601.png" alt="cloud" width="150" height="100">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/cloud_2601.png" alt="cloud" width="150" height="100">
	</div>
	<div id="plane" class="emoji-1f6e9"></div>
</body>
</html>

このアプリでは、スマホを傾けることで飛行機を操作します。飛行機は画面中央に表示され、スマホの傾きに合わせて左右、前後に移動します。また、背景には空に浮かぶ雲のアニメーションが表示されています。

このアプリを遊ぶと、まるで自分が飛行機を操縦しているかのような感覚を味わえます。スマホがリアルなハンドルになったかのように、飛行機をコントロールして、空の旅を楽しんでみてください！