Racing Game Create a game in which 5 cars race and aim for the finish line faster.'s game

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

No:1910

152

←

Prev Next

→

Racing Game Create a game in which 5 cars race and..ALL
Developer User3346｜Date and time 23/6/19 14:08:54
Build time 141.107 sec｜Game capacity 2.401KB｜

Script

🚗

🚙

🚚

🚕

🏎️

※概要: 5台の車がレースをし、より速くゴールを目指すゲーム。スマホで操作可能。ボタンをクリックするとレースがスタートし、ランダムな速度で車が前進する。どの車が先にゴールに到達するか競う。ゴールすると、勝った車がアラートで表示される。再度ボタンをクリックすると、次のレースがスタートする。

←

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: #f5d76e;
			font-size: 50px;
			text-align: center;
		}
		.car {
			position: absolute;
			top: 500px;
			width: 100px;
			height: 100px;
			background-color: #3498db;
			border-radius: 50%;
			transition: all 1s linear;
			overflow: hidden;
			text-align: center;
			color: #fff;
			font-size: 30px;
			line-height: 100px;
			font-family: 'Segoe UI Emoji', sans-serif;
		}
		#car1 {
			left: 50px;
		}
		#car2 {
			left: 200px;
		}
		#car3 {
			left: 350px;
		}
		#car4 {
			left: 500px;
		}
		#car5 {
			left: 650px;
		}
		.btn {
			margin-top: 50px;
			font-size: 40px;
			background-color: #e74c3c;
			color: #fff;
			border: none;
			padding: 15px 30px;
			border-radius: 10px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			font-family: 'Segoe UI Emoji', sans-serif;
		}
		.btn:hover {
			background-color: #c0392b;
		}
		.hidden {
			display: none;
		}
	</style>
	<script>
		function start() {
			document.getElementById('startBtn').classList.add('hidden');
			var cars = document.querySelectorAll('.car');
			var finish = false;
			var timer = setInterval(function() {
				for (var i = 0; i < cars.length; i++) {
					var car = cars[i];
					var random = Math.random() * 10;
					car.style.left = parseInt(car.style.left) + random + 'px';
					if (parseInt(car.style.left) > 1000) {
						finish = true;
						clearInterval(timer);
						alert('車' + (i+1) + 'が勝ちました！');
						document.getElementById('startBtn').classList.remove('hidden');
						break;
					}
				}
			}, 100);
		}
	</script>
</head>
<body>
	<div id="car1" class="car">🚗</div>
	<div id="car2" class="car">🚙</div>
	<div id="car3" class="car">🚚</div>
	<div id="car4" class="car">🚕</div>
	<div id="car5" class="car">🏎️</div>
	<button id="startBtn" class="btn" onclick="start()">レーススタート！</button>
</body>
</html>