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

No:2674

3068

←

Prev Next

→

Voting Game Choose your favorite ride! Choose one ..ALL
Developer anonymous｜Date and time 70/1/1 9:44:27
Build time unknown sec｜Game capacity 2.667KB｜

Script

好きな乗り物を選ぼう！

5種類の乗り物の中から1つ選んで優勝を目指そう！

優勝する乗り物は毎回変わるよ！

レース開始！

←

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>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		body {
			background-color: #dfe6e9;
			font-size: 32px;
			text-align: center;
		}
		.btn {
			margin: 10px;
			padding: 10px;
			background-color: #ffeaa7;
			border-radius: 20px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>好きな乗り物を選ぼう！</h1>
	<p>5種類の乗り物の中から1つ選んで優勝を目指そう！</p>
	<p>優勝する乗り物は毎回変わるよ！</p>
	<div id="btn-group">
		<button class="btn" id="btn-car">🚗</button>
		<button class="btn" id="btn-motorcycle">🏍️</button>
		<button class="btn" id="btn-bicycle">🚲</button>
		<button class="btn" id="btn-rocket">🚀</button>
		<button class="btn" id="btn-airplane">✈️</button>
	</div>
	<div id="race-area">
		<h2>レース開始！</h2>
	</div>
	<script>
		// 乗り物の配列
		var transports = [
			{name: "🚗", winner: false},
			{name: "🏍️", winner: false},
			{name: "🚲", winner: false},
			{name: "🚀", winner: false},
			{name: "✈️", winner: false}
		];

// ランダムに優勝する乗り物を決定
		function decideWinner() {
			var winner = Math.floor(Math.random() * 5);
			transports[winner].winner = true;
			return winner;
		}

// ボタンが押されたらレースを実行
		$(".btn").click(function() {
			// 選択された乗り物のIDを取得
			var transportID = $(this).attr("id");
			// 乗り物の絵文字を取得
			var transportEmoji = $(this).text();
			// レースエリアにアニメーションを表示
			$("#race-area").html('<p>' + transportEmoji.repeat(10) + '</p>');
			// 優勝乗り物を取得
			var winner = decideWinner();
			// 0.5秒後に結果を表示
			setTimeout(function() {
				if (transports[transportID.replace("btn-", "")].winner) {
					// 選択された乗り物が勝利した場合
					$("#race-area").html('<h2>優勝！</h2><p>' + transportEmoji.repeat(10) + '</p>');
				} else {
					// それ以外の場合
					$("#race-area").html('<h2>残念！</h2><p>' + transports[winner].name.repeat(10) + '</p>');
				}
			}, 500);
			// ボタンを無効化
			$(this).prop("disabled", true);
			// 優勝乗り物をリセット
			transports[winner].winner = false;
			// ボタンが全て無効化された場合はリセット
			if ($("#btn-group button:not(:disabled)").length == 0) {
				setTimeout(function() {
					$("#race-area").html('<h2>次のレースへ！</h2>');
					$("#btn-group button").prop("disabled", false);
				}, 1000);
			}
		});
	</script>
</body>
</html>