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

No:1509

159

←

Prev Next

→

Cab and skateboarding competition
Developer sayaensm｜Date and time 23/6/18 17:50:42
Build time 27.985 sec｜Game capacity 2.402KB｜

Script

タクシーとスケボーの競争

スマホで左右に傾けるとタクシーとスケボーが動きます。

ゴールまでの時間を競ってください！

←

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: #cceeff;
			font-size: 2em;
			text-align: center;
		}
		#game {
			margin: auto;
			width: 300px;
			height: 200px;
			background-color: #ffffff;
			border: 2px solid #000000;
			position: relative;
		}
		#taxi {
			width: 50px;
			height: 50px;
			background-color: #ff0000;
			position: absolute;
			left: 0;
			top: 75px;
			border-radius: 50%;
		}
		#skateboard {
			width: 50px;
			height: 50px;
			background-color: #3333ff;
			position: absolute;
			right: 0;
			top: 75px;
			border-radius: 50%;
		}
		#button {
			padding: 20px;
			font-size: 1em;
			background-color: #3399ff;
			border: none;
			color: #ffffff;
			border-radius: 10px;
			cursor: pointer;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>タクシーとスケボーの競争</h1>
	<div id="game">
		<div id="taxi"></div>
		<div id="skateboard"></div>
	</div>
	<button id="button">スタート</button>
	<p>スマホで左右に傾けるとタクシーとスケボーが動きます。</p>
	<p>ゴールまでの時間を競ってください！</p>
	<script>
		var taxi = document.getElementById('taxi');
		var skateboard = document.getElementById('skateboard');
		var button = document.getElementById('button');
		var game = document.getElementById('game');
		var started = false;
		var startTime;

button.addEventListener('click', function() {
			started = true;
			startTime = new Date().getTime();
			button.style.display = 'none';
		});

function update() {
			if (started) {
				var endTime = new Date().getTime();
				var timeElapsed = (endTime - startTime) / 1000; // 経過時間（秒）

// ゲーム終了判定
				if (taxi.offsetLeft >= game.offsetWidth - taxi.offsetWidth ||
					skateboard.offsetLeft <= 0) {
					alert('ゲーム終了！\nタクシーの記録：' + timeElapsed + '秒');
					window.location.reload(); // リロードして再スタート
				}

// スマホで傾けたときの処理
				window.addEventListener('deviceorientation', function(e) {
					taxi.style.left = taxi.offsetLeft + e.gamma / 5 + 'px'; // gammaは左右の傾き
					skateboard.style.left = skateboard.offsetLeft - e.gamma / 5 + 'px';
				});
			}

requestAnimationFrame(update); // 継続的に更新
		}

update();
	</script>
</body>
</html>