宮園ゲーム

<!DOCTYPE html>
<html>
<head>
	<title>宮園ゲーム</title>
</head>
<body>
	<h1>宮園ゲーム</h1>
	<p>表示される文字が「宮園」の場合は「○」ボタンを、それ以外の場合は「✕」ボタンを押してください。</p>
	<p>間違えた場合、大きく「GAME OVER」の文字が出てゲーム終了です。</p>
	<br>
	<p id="word"></p>
	<button id="correct">○</button>
	<button id="wrong">✕</button>
	<script>
		var words = ["宮園", "宮田", "宮内", "宮村", "菅園", "呂園", "宮菌"];
		var ratio = 9;
		var correctButton = document.getElementById("correct");
		var wrongButton = document.getElementById("wrong");
		var word = document.getElementById("word");
		var intervalId = setInterval(newWord, 2000);

		function newWord() {
			var random = Math.floor(Math.random() * words.length);
			if (words[random] === "宮園") {
				word.innerHTML = "宮園";
			} else {
				word.innerHTML = words[random];
			}
		}

		function gameOver() {
			clearInterval(intervalId);
			word.innerHTML = "<strong>GAME OVER</strong>";
			correctButton.disabled = true;
			wrongButton.disabled = true;
		}

		correctButton.addEventListener("click", function() {
			if (word.innerHTML === "宮園") {
				newWord();
			} else {
				gameOver();
			}
		});

		wrongButton.addEventListener("click", function() {
			if (word.innerHTML !== "宮園") {
				newWord();
			} else {
				gameOver();
			}
		});
	</script>
</body>
</html>