document.addEventListener("DOMContentLoaded", function () {
let digit = 1;
let count = 5;
let speed = 1000;
let numbers = [];
let sum = 0;
let currentIndex = 0;
let interval;
const canvas = document.getElementById("flash-canvas");
const ctx = canvas.getContext("2d");
function updateDisplay() {
document.getElementById("digit-display").textContent = digit;
document.getElementById("count-display").textContent = count;
document.getElementById("speed-display").textContent = speed + "ms";
}
document.getElementById("digit-slider").addEventListener("input", function () {
digit = parseInt(this.value);
updateDisplay();
});
document.getElementById("count-slider").addEventListener("input", function () {
count = parseInt(this.value);
updateDisplay();
});
document.getElementById("speed-slider").addEventListener("input", function () {
speed = parseInt(this.value);
updateDisplay();
});
function drawNumber(number) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = "50px Arial";
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(number, canvas.width / 2, canvas.height / 2);
}
document.getElementById("start-button").addEventListener("click", function () {
numbers = [];
sum = 0;
currentIndex = 0;
document.getElementById("result-message").textContent = "";
document.getElementById("answer-input").value = "";
for (let i = 0; i < count; i++) {
let num = Math.floor(Math.random() * (10 ** digit));
numbers.push(num);
sum += num;
}
function showNextNumber() {
if (currentIndex < numbers.length) {
drawNumber(numbers[currentIndex]);
currentIndex++;
interval = setTimeout(showNextNumber, speed);
} else {
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById("question-area").textContent = "答えを入力してください";
}
}
showNextNumber();
});
document.getElementById("check-answer").addEventListener("click", function () {
let userAnswer = parseInt(document.getElementById("answer-input").value, 10);
if (userAnswer === sum) {
document.getElementById("result-message").textContent = "正解！🎉";
document.getElementById("result-message").style.color = "green";
} else {
document.getElementById("result-message").textContent = "不正解 😢 正解は " + sum;
document.getElementById("result-message").style.color = "red";
}
});
updateDisplay();
});
#flash-canvas {
background-color: black;
border-radius: 10px;
display: block;
margin: 10px auto;
}
input[type="range"] {
width: 100%;
}
button {
background-color: #008CBA;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005f73;
}
