pinball machine game's game

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

No:51

353

←

Prev Next

→

pinball machine game
Developer anonymous｜Date and time 23/5/7 0:46:14
Build time 82.012 sec｜Game capacity 4.216KB｜

Script

←

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 {
			font-size: 2.5em;
			background-color: #F8E4E4;
			text-align: center;
			margin-top: 10%;
		}
		
		#start-button, #reset-button {
			padding: 10px 30px;
			margin: 20px;
			border: none;
			border-radius: 10px;
			background-color: #F8C9C9;
			color: white;
			font-weight: bold;
			cursor: pointer;
		}
		
		#timer {
			font-size: 5em;
			font-weight: bold;
			color: #F66E6E;
			margin-top: 50px;
		}
		
		#question {
			font-size: 4em;
			margin-top: 50px;
		}
		
		.answer-button {
			display: inline-block;
			padding: 15px 45px;
			margin: 10px;
			border: none;
			border-radius: 10px;
			background-color: #F8C9C9;
			color: white;
			font-weight: bold;
			cursor: pointer;
		}
		
		.correct {
			background-color: #6ECF8C;
		}
		
		.incorrect {
			background-color: #F66E6E;
		}
	</style>
</head>
<body>
	<div id="timer">10</div>
	<div id="question"></div>
	<button id="start-button">スタート</button>
	<button id="reset-button" style="display: none;">リセット</button>
	<script>
		const emojis = ["😀", "😂", "😍", "🤪", "🥳", "😎"];
		const questions = ["日本の首都は？", "何語？「bonjour」", "世界最大の湖は？", "次のうち野菜ではないものは？　にんじん　キャベツ　きゅうり", "アメリカの首都は？", "1+1は？"];
		const answers = ["東京", "フランス語", "カスピ海", "キャベツ", "ワシントンD.C.", "2"];
		let timer;
		let currentQuestion = 0;
		
		function startGame() {
			document.getElementById("start-button").style.display = "none";
			document.getElementById("reset-button").style.display = "inline-block";
			showQuestion();
			timer = setInterval(countDown, 1000);
		}
		
		function showQuestion() {
			document.getElementById("question").innerHTML = questions[currentQuestion];
			const answerButtons = document.getElementsByClassName("answer-button");
			for (let i = 0; i < answerButtons.length; i++) {
				answerButtons[i].innerHTML = emojis[i] + " " + answers[currentQuestion].split(" ")[i];
				answerButtons[i].classList.remove("correct");
				answerButtons[i].classList.remove("incorrect");
				answerButtons[i].addEventListener("click", checkAnswer);
			}
		}
		
		function countDown() {
			const timerDiv = document.getElementById("timer");
			let time = parseInt(timerDiv.innerHTML);
			time--;
			timerDiv.innerHTML = time < 10 ? "0" + time : time;
			if (time == 0) {
				clearInterval(timer);
				document.getElementById("question").innerHTML = "タイムアップ！";
				disableButtons();
			}
		}
		
		function checkAnswer() {
			clearInterval(timer);
			const answer = this.innerHTML.split(" ")[1];
			const answerButtons = document.getElementsByClassName("answer-button");
			for (let i = 0; i < answerButtons.length; i++) {
				if (answerButtons[i].innerHTML.includes(answer)) {
					answerButtons[i].classList.add("correct");
				} else {
					answerButtons[i].classList.add("incorrect");
				}
				answerButtons[i].removeEventListener("click", checkAnswer);
			}
			if (currentQuestion == 5) {
				document.getElementById("question").innerHTML = "ゲーム終了！";
				disableButtons();
			} else {
				currentQuestion++;
				setTimeout(() => {
					showQuestion();
					document.getElementById("timer").innerHTML = "10";
					timer = setInterval(countDown, 1000);
				}, 2000);
			}
		}
		
		function disableButtons() {
			const answerButtons = document.getElementsByClassName("answer-button");
			for (let i = 0; i < answerButtons.length; i++) {
				answerButtons[i].classList.add("disabled");
				answerButtons[i].removeEventListener("click", checkAnswer);
			}
			document.getElementById("start-button").style.display = "inline-block";
			document.getElementById("reset-button").style.display = "none";
		}
		
		document.getElementById("start-button").addEventListener("click", startGame);
		document.getElementById("reset-button").addEventListener("click", () => {
			location.reload();
		});
	</script>
	<div>
		<button class="answer-button"></button>
		<button class="answer-button"></button>
		<button class="answer-button"></button>
	</div>
</body>
</html>