var text = document.getElementById("text"); var error = document.getElementById("error"); var count = document.getElementById("count"); var pic = document.getElementById("pic"); var textLists = [ "kinmokusei", "aberia", "tubaki", "kanamemoti", "yamaboushi", "metasekoia" ]; var picLists = [ "img/kinmokusei.jpg", "img/aberia.jpg", "img/tubaki.jpg", "img/kanamemoti.jpg", "img/yamaboushi.jpg", "img/metasekoia.jpg" ]; var checkTexts = []; var rnd; var num = 1; function createText(){ rnd = Math.floor(Math.random()*textLists.length); if(num > 5){ text.textContent = "終了"; text.style.fontSize = "15px"; return false; } else { text.textContent = ""; } checkTexts = textLists[rnd].split("").map(function(value){ var span = document.createElement("span"); span.textContent = value; text.appendChild(span); return span; }); pic.src = picLists[rnd]; count.innerText = num + "/5"; } document.addEventListener("keydown", keyDown); function keyDown(e){ if(e.key === checkTexts[0].textContent){ checkTexts[0].className = "add-blue"; checkTexts.shift(); if(!checkTexts.length){ textLists.splice(rnd, 1); picLists.splice(rnd, 1); num++; createText(); } } else { error.innerText = "押したのは" + e.key + "だよ"; } } var startTime = new Date(); var time = document.getElementById("time"); var timer; var startBtn = document.getElementById("startBtn"); function timeFunc(){ timer = setTimeout(function(){ var t = new Date() - startTime; time.innerHTML = (t/1000).toFixed(2); timeFunc(); },10); startBtn.style.display = "none"; if(num > 5){ clearTimeout(timer); error.textContent = ""; time.style.fontSize = "25px"; time.innerText += "秒"; } } startBtn.addEventListener("click", createText); startBtn.addEventListener("click", timeFunc);