From 86743f8a69310d4f511bb23f87a250f5b4d773f7 Mon Sep 17 00:00:00 2001 From: simon Date: Sun, 2 Aug 2026 22:39:20 -0500 Subject: [PATCH] high scores now based on submode --- quickdraw-game.html | 106 +++++++++++++++++++++++++++++--------------- 1 file changed, 71 insertions(+), 35 deletions(-) diff --git a/quickdraw-game.html b/quickdraw-game.html index 3aa4d21..01f4ce6 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -136,11 +136,12 @@ } button:hover { cursor: pointer; - font-style: italic; + text-decoration: underline; } button:active { background-color: red; color: var(--bg); + font-style: italic; } @media screen and (max-width: 1024px) { @@ -187,12 +188,20 @@ + + + + @@ -236,12 +245,14 @@ let needsResizeAdjustment = false; // GAME STATE VARIABLES - let gamemode = ""; // can be: "normal", "countdown", "infinite" + let gamemode = ""; // can be: "normal" or "countdown" + let submode = ""; let countingDown = false; let hovering = false; let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling // GAMEPLAY VARIABLES + let highScore = 0; let targetsClicked = 0; let numTargets = 0; @@ -252,13 +263,13 @@ let roundSeconds = 0.0; let roundTimeStart = 0; let roundTimeEnd = 0; - let bestNormalTime = 0; + let normalBestTimes = {}; let normalBullseyeNeeded = false; // "COUNTDOWN" MODE ONLY VARIABLES let countdownBullseyeNeeded = false; let countdownTime = 0; - let bestCountdownScore = 0; + let countdownHighScores = {}; // menu / text elements @@ -299,11 +310,11 @@ await fadeMainMenuIn(); - if (localStorage.getItem("bestNormalTime") != null) { - bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime")); + if (localStorage.getItem("normalBestTimes") != null) { + normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes")); } - if (localStorage.getItem("bestCountdownScore") != null) { - bestCountdownScore = Number.parseInt(localStorage.getItem("bestCountdownScore")); + if (localStorage.getItem("countdownHighScores") != null) { + countdownHighScores = JSON.parse(localStorage.getItem("countdownHighScores")); } } @@ -339,7 +350,7 @@ normalSubModes.style.opacity = "100"; } - function setupNormalMode(numRounds) { + async function setupNormalMode(numRounds) { // fade buttons out normalSubModes.style.opacity = "0"; sleep(500); @@ -350,10 +361,14 @@ maxNormalRounds = numRounds; totalTime = 0; - beginNormalMode(); - } + submode = numRounds; + if (Object.keys(normalBestTimes).indexOf(submode.toString()) == -1) { + highScore = 0; + } + else { + highScore = normalBestTimes[submode]; + } - async function beginNormalMode() { // set game instruction text + fade it in gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!"; gameText.style.opacity = "0"; @@ -415,20 +430,21 @@ // GAME OVER STUFF if (roundNumber == maxNormalRounds) { - if (totalTime < bestNormalTime || bestNormalTime == 0) { - if (bestNormalTime == 0) { - alert("NEW FASTEST TIME!!! congratulations cowboy."); + if (totalTime < highScore || highScore == 0) { + if (highScore == 0) { + alert("high score set!"); } else { - alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime.toFixed(3) + "s. congratulations cowboy."); + alert("NEW FASTEST TIME!!! previous best: " + highScore.toFixed(3) + "s. congratulations cowboy."); } - bestNormalTime = totalTime; - localStorage.setItem("bestNormalTime", bestNormalTime); + highScore = totalTime; + normalBestTimes[submode] = highScore; + localStorage.setItem("normalBestTimes", JSON.stringify(normalBestTimes)); } gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + - "s\nBEST SCORE: " + bestNormalTime.toFixed(3); + "s\nBEST " + submode.toString() + "-ROUND TIME: " + highScore.toFixed(3) + "s"; numTargets = 0; targetsClicked =0; @@ -459,11 +475,25 @@ return; } - async function handleCountdownMode(e) { - gamemode = "countdown"; - countdownBullseyeNeeded = true; + async function setupCountdownMode(gameDuration) { + // fade buttons out + countdownSubModes.style.opacity = "0"; + sleep(500); + countdownSubModes.style.display = "none"; + + // [re]set game parameters + targetsClicked = 0; + numTargets = 0; + countdownTime = gameDuration; + + submode = gameDuration; + if (Object.keys(countdownHighScores).indexOf(submode.toString()) == -1) { + highScore = 0; + } + else { + highScore = countdownHighScores[submode]; + } - await fadeMainMenuOut(); // set game instruction text + fade it in gameText.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!"; gameText.style.opacity = "0"; @@ -474,7 +504,17 @@ // enable player to start game center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseleave", handleHoverEnd); - center.addEventListener("touchend", handleHoverEnd); + center.addEventListener("touchend", handleHoverEnd); + } + + async function handleCountdownMode(e) { + gamemode = "countdown"; + countdownBullseyeNeeded = true; + + await fadeMainMenuOut(); + + countdownSubModes.style.display = "flex"; + countdownSubModes.style.opacity = "100"; } async function handleHoverStart(e) { @@ -505,11 +545,6 @@ return; } - // setup mode parameters - targetsClicked = 0; - numTargets = 0; - countdownTime = 15.0; - // clear screen + render countdown / score center.remove(); gameText.innerText = countdownTime.toFixed(3) + "s\ntargets clicked: " + targetsClicked; @@ -542,18 +577,19 @@ frameElement.replaceChildren(); // show end of round text. if high score, alert player and save - if (targetsClicked > bestCountdownScore || bestCountdownScore == 0) { - if (bestCountdownScore == 0) { + if (targetsClicked > highScore || highScore == 0) { + if (targetsClicked == 0) { alert("NEW HIGHEST SCORE!!! congratulations cowboy."); } else { - alert("NEW HIGHEST SCORE!!! previous best: " + bestCountdownScore + " targets. congratulations cowboy."); + alert("NEW HIGHEST SCORE!!! previous best: " + highScore + " targets. congratulations cowboy."); } - bestCountdownScore = targetsClicked; - localStorage.setItem("bestCountdownScore", bestCountdownScore); + highScore = targetsClicked; + countdownHighScores[submode] = highScore; + localStorage.setItem("countdownHighScores", JSON.stringify(countdownHighScores)); } gameText.innerText = "TARGETS CLICKED: " + targetsClicked + - "\nHIGH SCORE: " + bestCountdownScore; + "\n" + submode.toString() + "-SECOND HIGH SCORE: " + highScore; numTargets = 0; targetsClicked =0;