simon/quickdraw-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

high scores now based on submode

Browse Source
This commit is contained in:
simon
2026-08-02 22:39:20 -05:00
parent 44a8332e29
commit 86743f8a69
1 changed files with 71 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+70 -34
View File
@@ -136,11 +136,12 @@
} }
button:hover { button:hover {
cursor: pointer; cursor: pointer;
font-style: italic; text-decoration: underline;
} }
button:active { button:active {
background-color: red; background-color: red;
color: var(--bg); color: var(--bg);
font-style: italic;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
@@ -187,12 +188,20 @@
<!-- <button id="infinite">infinite</button> --> <!-- <button id="infinite">infinite</button> -->
</div> </div>
<!-- normal mode sub-modes -->
<div id="normal-sub-modes" class="button-container hidden fade"> <div id="normal-sub-modes" class="button-container hidden fade">
<button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button> <button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button>
<button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button> <button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button>
<button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button> <button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
</div> </div>
<!-- countdown mode sub-modes -->
<div id="countdown-sub-modes" class="button-container hidden fade">
<button id="countdown-15s" onclick="setupCountdownMode(15)">15 seconds</button>
<button id="countdown-30s" onclick="setupCountdownMode(30)">30 seconds</button>
<button id="countdown-60s" onclick="setupCountdownMode(60)">60 seconds</button>
</div>
<!-- pre-round text --> <!-- pre-round text -->
<span id="game-text" class="hidden fade"></span> <span id="game-text" class="hidden fade"></span>
@@ -236,12 +245,14 @@
let needsResizeAdjustment = false; let needsResizeAdjustment = false;
// GAME STATE VARIABLES // GAME STATE VARIABLES
let gamemode = ""; // can be: "normal", "countdown", "infinite" let gamemode = ""; // can be: "normal" or "countdown"
let submode = "";
let countingDown = false; let countingDown = false;
let hovering = false; let hovering = false;
let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling
// GAMEPLAY VARIABLES // GAMEPLAY VARIABLES
let highScore = 0;
let targetsClicked = 0; let targetsClicked = 0;
let numTargets = 0; let numTargets = 0;
@@ -252,13 +263,13 @@
let roundSeconds = 0.0; let roundSeconds = 0.0;
let roundTimeStart = 0; let roundTimeStart = 0;
let roundTimeEnd = 0; let roundTimeEnd = 0;
let bestNormalTime = 0; let normalBestTimes = {};
let normalBullseyeNeeded = false; let normalBullseyeNeeded = false;
// "COUNTDOWN" MODE ONLY VARIABLES // "COUNTDOWN" MODE ONLY VARIABLES
let countdownBullseyeNeeded = false; let countdownBullseyeNeeded = false;
let countdownTime = 0; let countdownTime = 0;
let bestCountdownScore = 0; let countdownHighScores = {};
// menu / text elements // menu / text elements
@@ -299,11 +310,11 @@
await fadeMainMenuIn(); await fadeMainMenuIn();
if (localStorage.getItem("bestNormalTime") != null) { if (localStorage.getItem("normalBestTimes") != null) {
bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime")); normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes"));
} }
if (localStorage.getItem("bestCountdownScore") != null) { if (localStorage.getItem("countdownHighScores") != null) {
bestCountdownScore = Number.parseInt(localStorage.getItem("bestCountdownScore")); countdownHighScores = JSON.parse(localStorage.getItem("countdownHighScores"));
} }
} }
@@ -339,7 +350,7 @@
normalSubModes.style.opacity = "100"; normalSubModes.style.opacity = "100";
} }
function setupNormalMode(numRounds) { async function setupNormalMode(numRounds) {
// fade buttons out // fade buttons out
normalSubModes.style.opacity = "0"; normalSubModes.style.opacity = "0";
sleep(500); sleep(500);
@@ -350,10 +361,14 @@
maxNormalRounds = numRounds; maxNormalRounds = numRounds;
totalTime = 0; 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 // 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.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
gameText.style.opacity = "0"; gameText.style.opacity = "0";
@@ -415,20 +430,21 @@
// GAME OVER STUFF // GAME OVER STUFF
if (roundNumber == maxNormalRounds) { if (roundNumber == maxNormalRounds) {
if (totalTime < bestNormalTime || bestNormalTime == 0) { if (totalTime < highScore || highScore == 0) {
if (bestNormalTime == 0) { if (highScore == 0) {
alert("NEW FASTEST TIME!!! congratulations cowboy."); alert("high score set!");
} }
else { 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; highScore = totalTime;
localStorage.setItem("bestNormalTime", bestNormalTime); normalBestTimes[submode] = highScore;
localStorage.setItem("normalBestTimes", JSON.stringify(normalBestTimes));
} }
gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) +
"s\nTOTAL: " + totalTime.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; numTargets = 0;
targetsClicked =0; targetsClicked =0;
@@ -459,11 +475,25 @@
return; return;
} }
async function handleCountdownMode(e) { async function setupCountdownMode(gameDuration) {
gamemode = "countdown"; // fade buttons out
countdownBullseyeNeeded = true; 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 // 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.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!";
gameText.style.opacity = "0"; gameText.style.opacity = "0";
@@ -477,6 +507,16 @@
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) { async function handleHoverStart(e) {
hovering = true; hovering = true;
hoverCount++; hoverCount++;
@@ -505,11 +545,6 @@
return; return;
} }
// setup mode parameters
targetsClicked = 0;
numTargets = 0;
countdownTime = 15.0;
// clear screen + render countdown / score // clear screen + render countdown / score
center.remove(); center.remove();
gameText.innerText = countdownTime.toFixed(3) + "s\ntargets clicked: " + targetsClicked; gameText.innerText = countdownTime.toFixed(3) + "s\ntargets clicked: " + targetsClicked;
@@ -542,18 +577,19 @@
frameElement.replaceChildren(); frameElement.replaceChildren();
// show end of round text. if high score, alert player and save // show end of round text. if high score, alert player and save
if (targetsClicked > bestCountdownScore || bestCountdownScore == 0) { if (targetsClicked > highScore || highScore == 0) {
if (bestCountdownScore == 0) { if (targetsClicked == 0) {
alert("NEW HIGHEST SCORE!!! congratulations cowboy."); alert("NEW HIGHEST SCORE!!! congratulations cowboy.");
} }
else { else {
alert("NEW HIGHEST SCORE!!! previous best: " + bestCountdownScore + " targets. congratulations cowboy."); alert("NEW HIGHEST SCORE!!! previous best: " + highScore + " targets. congratulations cowboy.");
} }
bestCountdownScore = targetsClicked; highScore = targetsClicked;
localStorage.setItem("bestCountdownScore", bestCountdownScore); countdownHighScores[submode] = highScore;
localStorage.setItem("countdownHighScores", JSON.stringify(countdownHighScores));
} }
gameText.innerText = "TARGETS CLICKED: " + targetsClicked + gameText.innerText = "TARGETS CLICKED: " + targetsClicked +
"\nHIGH SCORE: " + bestCountdownScore; "\n" + submode.toString() + "-SECOND HIGH SCORE: " + highScore;
numTargets = 0; numTargets = 0;
targetsClicked =0; targetsClicked =0;