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

No:2059

2529

←

Prev Next

→

Multiplication games
Developer User3476｜Date and time 23/6/19 23:26:35
Build time 55.45 sec｜Game capacity 4.167KB｜

Script

multiplication game

Solve the problem.、Please enter the correct answer.

Try to see how many questions you can answer correctly before the timer reaches zero seconds!

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>かけ算ゲーム</title>
		<style>
			body {
				font-size: 2rem;
				text-align: center;
			}
			button {
				font-size: 1.5rem;
				padding: 1rem;
				margin: 1rem;
				background-color: #48d1cc;
				border-radius: 1rem;
				color: white;
				border: none;
				cursor: pointer;
			}
			input[type="number"] {
				font-size: 1.5rem;
				padding: 0.5rem;
				margin: 1rem;
			}
			h1 {
				font-size: 3rem;
				margin-bottom: 1rem;
			}
			#question {
				font-size: 2.5rem;
				margin-bottom: 1rem;
			}
			#result {
				font-size: 2rem;
				margin-bottom: 1rem;
			}
			#timer {
				font-size: 2rem;
				margin-bottom: 1rem;
			}
		</style>
	</head>
	<body>
		<h1>かけ算ゲーム</h1>
		<p>問題を解いて、正解を入力してください。</p>
		<p>タイマーが0秒になるまでに何問正解することができるか挑戦してみよう！</p>
		<div id="question"></div>
		<div>
			<input type="number" id="input-answer" placeholder="こたえ" autofocus>
			<button id="submit">送信</button>
		</div>
		<div id="result"></div>
		<div id="timer"></div>
		<script>
			const MIN_NUM = 1;
			const MAX_NUM = 9;
			const QUESTION_COUNT = 10;
			const QUESTION_TIME = 10;
			const TIMER_INTERVAL = 1000;
			let count = 0;
			let correct = 0;
			let timer = QUESTION_TIME;
			let intervalId = null;
			const generateQuestion = () => {
				const a = Math.floor(Math.random() * (MAX_NUM - MIN_NUM + 1)) + MIN_NUM;
				const b = Math.floor(Math.random() * (MAX_NUM - MIN_NUM + 1)) + MIN_NUM;
				return {
					a: a,
					b: b,
					answer: a * b,
				};
			};
			const displayQuestion = question => {
				const qElem = document.getElementById("question");
				qElem.textContent = `${question.a} × ${question.b} = `;
			};
			const displayResult = (isCorrect, actualAnswer) => {
				const rElem = document.getElementById("result");
				rElem.textContent = isCorrect ? "せいかい！" : `まちがい。こたえは${actualAnswer}です。`;
			};
			const submitAnswer = () => {
				const input = document.getElementById("input-answer");
				const answer = parseInt(input.value);
				if (isNaN(answer)) {
					return;
				}
				const question = generateQuestion();
				displayQuestion(question);
				input.value = "";
				displayResult(answer === question.answer, question.answer);
				if (++count === QUESTION_COUNT) {
					clearInterval(intervalId);
					const submitBtn = document.getElementById("submit");
					submitBtn.disabled = true;
					alert(`時間内に${correct}問正解しました！`);
				}
			};
			const displayTimer = time => {
				const tElem = document.getElementById("timer");
				const sec = Math.max(0, time);
				const min = Math.floor(sec / 60);
				const remainingSec = sec - min * 60;
				tElem.textContent = `${min}:${remainingSec.toString().padStart(2, "0")}`;
			};
			const countDown = () => {
				timer--;
				if (timer === 0) {
					clearInterval(intervalId);
					const submitBtn = document.getElementById("submit");
					submitBtn.disabled = true;
					alert(`時間内に${correct}問正解しました！`);
				}
				displayTimer(timer);
			};
			const startGame = () => {
				const startBtn = document.getElementById("start");
				startBtn.style.display = "none";
				const submitBtn = document.getElementById("submit");
				submitBtn.style.display = "inline-block";
				const input = document.getElementById("input-answer");
				input.style.display = "inline-block";
				input.focus();
				const question = generateQuestion();
				displayQuestion(question);
				intervalId = setInterval(countDown, TIMER_INTERVAL);
			};
			const startBtn = document.createElement("button");
			startBtn.id = "start";
			startBtn.textContent = "スタート";
			startBtn.addEventListener("click", startGame);
			document.body.appendChild(startBtn);
			const submitBtn = document.getElementById("submit");
			submitBtn.addEventListener("click", submitAnswer);
			document.addEventListener("keydown", event => {
				if (event.key === "Enter" && event.target.id === "input-answer") {
					submitAnswer();
				}
			});
		</script>
	</body>
</html>