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
+71 -35
View File
@@ -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 @@
<!-- <button id="infinite">infinite</button> -->
</div>
<!-- normal mode sub-modes -->
<div id="normal-sub-modes" class="button-container hidden fade">
<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-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
</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 -->
<span id="game-text" class="hidden fade"></span>
@@ -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;