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

No:2650

613

←

Prev Next

→

A game where you vote for Marcy to be Person of th..ALL
Developer User1006｜Date and time 23/6/22 7:32:21
Build time 50.012 sec｜Game capacity 2.853KB｜

Script

マーシーに投票してパーソンオブザイヤーにするゲーム

マーシーを選んで投票してみよう！

遊ぶ

誰がパーソンオブザイヤーになるでしょうか？

🦁 🐼 🐯 🐰

投票

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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: #f5f5f5;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		h1{
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			color: #222;
		}
		.container{
			margin: auto;
			width: 90%;
			max-width: 500px;
			padding: 20px;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 0px #00000040;
			text-align: center;
		}
		.btn{
			background-color: #007bff;
			color: #fff;
			border-radius: 5px;
			padding: 10px 20px;
			text-decoration: none;
			margin: 10px;
			cursor: pointer;
		}
		.btn:hover{
			background-color: #0056b3;
		}
		.game{
			display: none;
			margin-top: 50px;
		}
		.game-box{
			background-color: #fff;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0px 0px 10px 0px #00000040;
			text-align: left;
			margin: auto;
			max-width: 500px;
		}
		.result{
			font-size: 40px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>マーシーに投票してパーソンオブザイヤーにするゲーム</h1>
		<p>マーシーを選んで投票してみよう！</p>
		<a href="#" class="btn" onclick="showGame()">遊ぶ</a>
		<div class="game">
			<div class="game-box">
				<h2>誰がパーソンオブザイヤーになるでしょうか？</h2>
				<div>
					<label>
						<input type="radio" name="vote" value="1">🦁
					</label>
					<label>
						<input type="radio" name="vote" value="2">🐼
					</label>
					<label>
						<input type="radio" name="vote" value="3">🐯
					</label>
					<label>
						<input type="radio" name="vote" value="4">🐰
					</label>
				</div>
				<a href="#" class="btn" onclick="vote()">投票</a>
			</div>
		</div>
		<div class="result"></div>
	</div>

function showGame(){
			game.style.display = 'block';
		}

function vote(){
			let selectedVote = document.querySelector('input[name="vote"]:checked');
			if(selectedVote){
				voteCount[selectedVote.value - 1]++;
				showResult();
			}
		}

function showResult(){
			game.style.display = 'none';
			let maxVote = Math.max(...voteCount);
			let winningEmoji = '';
			if(maxVote == voteCount[0]) winningEmoji = '🦁';
			else if(maxVote == voteCount[1]) winningEmoji = '🐼';
			else if(maxVote == voteCount[2]) winningEmoji = '🐯';
			else if(maxVote == voteCount[3]) winningEmoji = '🐰';
			result.innerHTML = 'パーソンオブザイヤーは' + winningEmoji + 'です！<br>' + 'マーシーたちに' + maxVote + '票入りました！';
			result.style.display = 'block';
		}
	</script>
</body>
</html>