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

No:1408

297

←

Prev Next

→

A game where you run a horse and get money
Developer ゲーミングパンダ｜Date and time 23/6/18 14:12:07
Build time 42.296 sec｜Game capacity 3.445KB｜

Script

馬レースゲーム

🐎

🦄

🐴

🐄

【ゲーム概要】 4頭の馬がレースを行い、同じ距離を走らせた場合、誰が先にゴールに到着するかを予測する予想ゲームです。スマートフォンでも遊べます。絵文字をたくさん使い、かわいらしいデザインになっています。

←

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: #e6f9ff;
			font-family: sans-serif;
			text-align: center;
		}
		h1 {
			color: #ff8c1a;
			font-size: 36px;
			margin-top: 20px;
		}
		button {
			background-color: #ff8c1a;
			border: none;
			color: white;
			font-size: 24px;
			padding: 10px 20px;
			border-radius: 10px;
			margin-top: 20px;
			cursor: pointer;
		}
		#race-track {
			width: 80%;
			margin: auto;
			background-color: white;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
		}
		.horse {
			width: 80px;
			height: 80px;
			background-color: #e6ffb3;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
			transition: left 5s;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36px;
		}
		#horse-1 {
			top: 40px;
		}
		#horse-2 {
			top: 140px;
		}
		#horse-3 {
			top: 240px;
		}
		#horse-4 {
			top: 340px;
		}
	</style>
</head>
<body>
	<h1>馬レースゲーム</h1>
	<button onclick="startRace()">スタート！</button>
	<div id="race-track">
		<div class="horse" id="horse-1">🐎</div>
		<div class="horse" id="horse-2">🦄</div>
		<div class="horse" id="horse-3">🐴</div>
		<div class="horse" id="horse-4">🐄</div>
	</div>

function startRace() {
			// 馬を走らせる
			document.getElementById("horse-1").style.left = "80%";
			document.getElementById("horse-2").style.left = "80%";
			document.getElementById("horse-3").style.left = "80%";
			document.getElementById("horse-4").style.left = "80%";

// ランダムに進む距離を決定する
			const horse1Distance = Math.floor(Math.random() * 51) + 50;
			const horse2Distance = Math.floor(Math.random() * 51) + 50;
			const horse3Distance = Math.floor(Math.random() * 51) + 50;
			const horse4Distance = Math.floor(Math.random() * 51) + 50;

// 馬の進む距離に応じて左に移動する
			setTimeout(() => {
				horse1Left = 80 - (horse1Distance * 0.8) + "%";
				document.getElementById("horse-1").style.left = horse1Left;

horse2Left = 80 - (horse2Distance * 0.8) + "%";
				document.getElementById("horse-2").style.left = horse2Left;

horse3Left = 80 - (horse3Distance * 0.8) + "%";
				document.getElementById("horse-3").style.left = horse3Left;

horse4Left = 80 - (horse4Distance * 0.8) + "%";
				document.getElementById("horse-4").style.left = horse4Left;

// 勝者を表示する
				const distanceArray = [
					{horse: "🐎", distance: horse1Distance},
					{horse: "🦄", distance: horse2Distance},
					{horse: "🐴", distance: horse3Distance},
					{horse: "🐄", distance: horse4Distance}
				];

// 距離でソートする
				distanceArray.sort((a, b) => {
					return b.distance - a.distance;
				});

const winner = distanceArray[0].horse;
				alert(winner + " が勝ちました！おめでとうございます！");

}, 5000); // 5秒後に進む
		}
	</script>
</body>
</html>

【ゲーム概要】
4頭の馬がレースを行い、同じ距離を走らせた場合、誰が先にゴールに到着するかを予測する予想ゲームです。スマートフォンでも遊べます。絵文字をたくさん使い、かわいらしいデザインになっています。