From f64c9562249599c6ef262602028638bff9f388c4 Mon Sep 17 00:00:00 2001 From: simon Date: Wed, 8 Jul 2026 22:00:23 -0500 Subject: [PATCH] normal fully playable w/ high score + menu gloss --- quickdraw-game.html | 106 +++++++++++++++++++++++++++++++++----------- 1 file changed, 79 insertions(+), 27 deletions(-) diff --git a/quickdraw-game.html b/quickdraw-game.html index 53d9ebf..0d456bd 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -35,6 +35,7 @@ width: 20px; background-color: red; position: absolute; + border-radius: 50%; } .target { @@ -103,9 +104,10 @@ @@ -157,6 +159,8 @@ let roundTimeEnd = 0; let roundSeconds = 0.0; + let bestNormalTime = "none"; + // text elements let intro1 = document.getElementById("intro1"); let intro2 = document.getElementById("intro2"); @@ -198,7 +202,7 @@ center.id = "center"; document.body.insertAdjacentElement("afterbegin", center); - await drawTargetsInCircle(false); + await drawTargetsInCircle(2); // insert intro elements into document flow intro1.style.display = "inline"; @@ -226,9 +230,13 @@ document.getElementById("game-modes").style.display = "inline"; await sleep(500); document.getElementById("game-modes").style.opacity = "100"; + + if (localStorage.getItem("bestNormalTime") != null) { + bestNormalTime = localStorage.getItem("bestNormalTime"); + } } - function handleNormalMode(e) { + async function handleNormalMode(e) { gamemode = "normal"; console.log("game mode: " + gamemode); @@ -238,17 +246,33 @@ center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseleave", handleHoverEnd); + document.getElementById("game-modes").style.opacity = "0"; + await sleep(500); document.getElementById("game-modes").style.display = "none"; intro1.style.display = "none"; intro2.style.display = "none"; - gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start."; + gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start."; + gameText.style.opacity = "0"; gameText.style.display = "inline"; + await sleep(500); gameText.style.opacity = "100"; } + async function handleReset(e) { + currentRound = 0; + center.style.backgroundColor = "red"; + center.removeEventListener("mouseover", handleReset); + gameText.style.display = "none"; + gameText.style.opacity = "0"; + await drawTargetsInCircle(); + document.getElementById("game-modes").style.display = "inline"; + await sleep(500); + document.getElementById("game-modes").style.opacity = "100"; + } + async function handleHoverStart(e) { e.target.style.backgroundColor = "green"; @@ -265,10 +289,6 @@ gameText.style.display = "none"; if (gamemode == "normal") { - if (currentRound > 3) { - console.log("hover attempt after round 3"); - return; - } await startNormalRound(currentRound); } // if (infinityMode) @@ -276,17 +296,18 @@ } async function startNormalRound(roundNumber) { + if (roundNumber > 3) { + handleReset(0); + return; + } + if (!await startCountdown(hoverCount)) { // if user canceled hover, don't continue round console.log("player canceled coundown"); return; } - - console.log("starting round " + roundNumber); - targetsClickedThisRound = 0; let numTargets = 0; - if (roundNumber == 1) { numTargets = 1; } @@ -296,9 +317,11 @@ else if (roundNumber == 3) { numTargets = 5; } - else { alert("max number of rounds hit. should not be seeing this"); } // effectively begin the round + console.log("starting round " + roundNumber); + document.getElementById("center").remove(); + targetsClickedThisRound = 0; roundTimeStart = Date.now(); placeTarget(numTargets); while (targetsClickedThisRound < numTargets) { @@ -311,8 +334,33 @@ currentRound++; - console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\nhover on bullseye to start round " + currentRound); - gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound; + // bring bullseye back to screen + center = generateTarget(xFrameAdjustment, yFrameAdjustment); + center.id = "center"; + document.body.insertAdjacentElement("afterbegin", center); + + if (roundNumber == 3) { + // GAME OVER STUFF + if (totalTime < bestNormalTime || bestNormalTime == "none") { + alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime + "s. congratulations cowboy."); + bestNormalTime = totalTime; + localStorage.setItem("bestNormalTime", bestNormalTime); + } + gameText.innerText = "ROUND: " + roundSeconds + + "s\nTOTAL: " + totalTime + + "s\nBEST SCORE: " + bestNormalTime + + "s\nhover on circle to go back to main menu.."; + center.addEventListener("mouseover", handleReset); + } + else { + console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\nhover on circle to start round " + currentRound); + gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on circle to start round " + currentRound; + + center.addEventListener("mouseover", handleHoverStart); + center.addEventListener("mouseleave", handleHoverEnd); + } + + gameText.style.display = "inline"; gameText.style.opacity = "100"; @@ -383,11 +431,12 @@ draw.style.opacity = "0"; - if (currentRound == 1) { - gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start."; + if (currentRound <= 1) { + drawTargetsInCircle(); + gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start."; } else { - gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound; + gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on circle to start round " + currentRound; } gameText.style.display = "inline"; countingDown = false; @@ -407,18 +456,21 @@ center = generateTarget(xFrameAdjustment, yFrameAdjustment); center.id = "center"; document.body.insertAdjacentElement("afterbegin", center); - center.addEventListener("mouseover", handleHoverStart); - center.addEventListener("mouseleave", handleHoverEnd); - - if (currentRound == 0) { - drawTargetsInCircle(false); + + if (currentRound == 0 || (gamemode == "normal" && currentRound == 1)) { + drawTargetsInCircle(); + } + + if (currentRound >= 1) { + center.addEventListener("mouseover", handleHoverStart); + center.addEventListener("mouseleave", handleHoverEnd); } console.log('page: ' + pageWidth + ' x ' + pageHeight); console.log('frame: ' + frameWidth + ' x ' + frameHeight); } - async function drawTargetsInCircle(animate) { + async function drawTargetsInCircle(drawDurationSeconds) { let r, x, y; let radians; let target; @@ -431,7 +483,7 @@ target = generateTarget(x, y); document.getElementById("frame").insertAdjacentElement("afterbegin", target); - if (animate) await sleep(15); + if (drawDurationSeconds) await sleep((drawDurationSeconds * 1000) / 180); } }