Games for laying down. Be sure to explain about laying down in the description!'s game

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

No:1692

1383

←

Prev Next

→

Games for laying down. Be sure to explain about la..ALL
Developer User3390｜Date and time 23/6/18 22:02:20
Build time 40.993 sec｜Game capacity 3.506KB｜

Script

以下は、寝かせて使うゲームの実装例です。

寝かせてください

このゲームは、スマホを寝かせた状態で起動すると、画面に「寝かせてください」というメッセージが表示されます。スマホを起こすと、「ゲームを始めます！\nスマホを揺らして遊んでください」というメッセージが表示されます。その後、スマホを揺らして敵を倒し、クリアすると、ランダムな絵文字が表示されます。

←

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>
		#message {
			font-size: 24px;
			text-align: center;
			margin-top: 30%;
		}
	</style>
</head>
<body>
	<div id="message">寝かせてください</div>
	<script>
		window.addEventListener('devicemotion', onDeviceMotion);

let x, y, z;
		let timerId = null;

/**
		 * デバイスのモーションが検出されたときに呼び出される関数。
		 * @param {DeviceMotionEvent} event - デバイスモーションイベント。
		 */
		function onDeviceMotion(event) {
			const { accelerationIncludingGravity } = event;
			if (accelerationIncludingGravity) {
				const { x: newX, y: newY, z: newZ } = accelerationIncludingGravity;
				if (x === newX && y === newY && z === newZ) {
					// モーションが停止した場合
					if (timerId) {
						clearTimeout(timerId);
						timerId = null;
					}
					displaySleepMessage();
				} else {
					// モーションが再開した場合
					if (!timerId) {
						timerId = setTimeout(displayWakeUpMessage, 5000);
					}
				}
				x = newX;
				y = newY;
				z = newZ;
			}
		}

/**
		 * 寝ているときに表示するメッセージを表示する関数。
		 */
		function displaySleepMessage() {
			document.getElementById('message').textContent = 'ゲームをプレイするには\nスマホを起こしてください';
		}

/**
		 * 起きているときに表示するメッセージを表示する関数。
		 */
		function displayWakeUpMessage() {
			document.getElementById('message').textContent = 'ゲームを始めます！\nスマホを揺らして遊んでください';
			document.removeEventListener('devicemotion', onDeviceMotion);
			document.body.addEventListener('click', startGame);
		}

/**
		 * ゲームを開始する関数。
		 */
		function startGame() {
			document.body.removeEventListener('click', startGame);
			document.getElementById('message').textContent = 'ゲーム中！\nスマホを揺らして敵を倒そう！';
			document.addEventListener('devicemotion', onShake);
		}

/**
		 * スマホを揺らしたときに呼び出される関数。
		 * 敵を倒して、クリアすると結果を表示する。
		 */
		function onShake(event) {
			const { accelerationIncludingGravity } = event;
			if (accelerationIncludingGravity) {
				const { x, y, z } = accelerationIncludingGravity;
				const acceleration = Math.abs(x) + Math.abs(y) + Math.abs(z);
				if (acceleration > 30) {
					document.removeEventListener('devicemotion', onShake);
					document.getElementById('message').textContent = `クリア！\n${getRandomEmoji()}${getRandomEmoji()}${getRandomEmoji()}`;
				}
			}
		}

/**
		 * ランダムな絵文字を返す関数。
		 */
		function getRandomEmoji() {
			const emojis = ['😀', '😂', '🤩', '😎', '🥳', '🎉', '🎊', '🎁'];
			const index = Math.floor(Math.random() * emojis.length);
			return emojis[index];
		}
	</script>
</body>
</html>