サイコロゲーム

2つのサイコロ🎲をタップして同じ目を揃えよう！
<!DOCTYPE html>
<html>
<head>
	<title>サイコロゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #e6e6e6;
			font-family: sans-serif;
			text-align: center;
		}

		h1 {
			color: #333333;
			font-size: 2rem;
		}

		.dice {
			font-size: 10vw;
			margin: 10vw;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>サイコロゲーム</h1>
	<p>2つのサイコロ🎲をタップして同じ目を揃えよう！</p>
	<p id="result"></p>
	<div class="dice" id="dice1" onclick="roll()"></div>
	<div class="dice" id="dice2" onclick="roll()"></div>

	<script type="text/javascript">
		let timer = null;
		let rollCount = 0;
		let dice1 = document.getElementById('dice1');
		let dice2 = document.getElementById('dice2');
		let result = document.getElementById('result');

		function roll() {
			// タイマーが動いていたら無視
			if (timer !== null) {
				return;
			}

			// アニメーション開始
			timer = setInterval(function() {
				dice1.innerHTML = getRandomDice();
				dice2.innerHTML = getRandomDice();
				rollCount++;
			}, 100);

			// 最大5回ループするように
			setTimeout(function() {
				clearInterval(timer);
				timer = null;
				rollCount = 0;
				checkResult();
			}, 500);
		}

		function getRandomDice() {
			let min = Math.ceil(9856);
			let max = Math.floor(9861);
			return String.fromCodePoint(Math.floor(Math.random() * (max - min + 1)) + min);
		}

		function checkResult() {
			if (dice1.innerHTML === dice2.innerHTML) {
				result.innerHTML = '🎉 おめでとうございます！サイコロを揃えることができました！ 🎉';
			} else {
				result.innerHTML = '残念！もう一度挑戦してみましょう！';
			}
		}
	</script>
</body>
</html>