96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
// todo: add cross-hair
|
|
// todo: continuous reaction speed reading
|
|
// todo: better font
|
|
// todo: average reaction speed
|
|
// todo: reaction speed graph
|
|
// todo: put mouse over to restart
|
|
// todo: click order
|
|
// todo: sound effect
|
|
// todo: X if miss
|
|
// todo: settings
|
|
// todo: remaining clickers
|
|
|
|
const gameArea = document.getElementsByClassName("gameArea")[0]
|
|
const primer = document.getElementById("primer")
|
|
const timerText = document.getElementById("timer")
|
|
|
|
let clickerSize = 1.3
|
|
let initClickerCount = 10
|
|
let clickerCount = initClickerCount
|
|
let timer, startTime, clickable
|
|
|
|
primer.addEventListener("mousedown", () => {prime()})
|
|
document.addEventListener("keydown", (event) => {
|
|
if ("zq".includes(event.key.toLowerCase())) {
|
|
removeClicker()
|
|
}
|
|
|
|
if (event.key.toLowerCase() === "a") {
|
|
// todo: pause
|
|
}
|
|
else if (event.key.toLowerCase() === "q") {
|
|
// todo: end measurement
|
|
}
|
|
})
|
|
|
|
function prime() {
|
|
primer.style.display = "none"
|
|
clearInterval(timer)
|
|
clearClicker()
|
|
initializeTimer()
|
|
addClicker()
|
|
}
|
|
|
|
function addClicker() {
|
|
let newClicker = document.createElement("div")
|
|
newClicker.addEventListener("mousedown", removeClicker, {once: true})
|
|
newClicker.addEventListener("mouseenter", () => {clickable = newClicker})
|
|
newClicker.addEventListener("mouseleave", clearClickable)
|
|
|
|
newClicker.classList.add("clicker")
|
|
|
|
newClicker.style.width = `${clickerSize}in`
|
|
newClicker.style.height = `${clickerSize}in`
|
|
|
|
let x = Math.random() * 100, y = Math.random() * 100
|
|
// todo: always make clicker appear in the screen
|
|
newClicker.style.top = `${x}%`
|
|
newClicker.style.left = `${y}%`
|
|
|
|
gameArea.appendChild(newClicker)
|
|
}
|
|
|
|
function removeClicker() {
|
|
if (clickable === undefined) return
|
|
clickerCount -= 1
|
|
|
|
if (clickerCount > 0) {
|
|
addClicker()
|
|
}
|
|
else if (clickerCount === 0) {
|
|
primer.style.display = "block"
|
|
clearInterval(timer)
|
|
clearClicker()
|
|
clickerCount = initClickerCount
|
|
clearClickable()
|
|
return
|
|
}
|
|
clickable.remove()
|
|
clearClickable()
|
|
}
|
|
|
|
function clearClicker() {
|
|
gameArea.textContent = "";
|
|
clearClickable()
|
|
}
|
|
|
|
function clearClickable() {
|
|
clickable = undefined
|
|
}
|
|
|
|
function initializeTimer() {
|
|
startTime = Date.now()
|
|
timer = setInterval(() => {
|
|
timerText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2)
|
|
}, 10)
|
|
}
|