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

resizing / page reset is much cleaner and words fully with normal mode

Browse Source
This commit is contained in:
simon
2026-08-02 21:33:03 -05:00
parent 88c8dca057
commit 44a8332e29
1 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+25 -26
View File
@@ -188,9 +188,9 @@
</div> </div>
<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="setNormalRounds(3)">3 rounds</button> <button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button>
<button id="normal-6-rounds" onclick="setNormalRounds(6)">6 rounds</button> <button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button>
<button id="normal-10-rounds" onclick="setNormalRounds(10)">10 rounds</button> <button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
</div> </div>
<!-- pre-round text --> <!-- pre-round text -->
@@ -247,11 +247,13 @@
// "NORMAL" MODE ONLY VARIABLES // "NORMAL" MODE ONLY VARIABLES
let currentRound = 0; let currentRound = 0;
let maxNormalRounds = 0;
let totalTime = 0.0; let totalTime = 0.0;
let roundSeconds = 0.0; let roundSeconds = 0.0;
let roundTimeStart = 0; let roundTimeStart = 0;
let roundTimeEnd = 0; let roundTimeEnd = 0;
let bestNormalTime = 0; let bestNormalTime = 0;
let normalBullseyeNeeded = false;
// "COUNTDOWN" MODE ONLY VARIABLES // "COUNTDOWN" MODE ONLY VARIABLES
let countdownBullseyeNeeded = false; let countdownBullseyeNeeded = false;
@@ -329,10 +331,7 @@
async function handleNormalMode(e) { async function handleNormalMode(e) {
gamemode = "normal"; gamemode = "normal";
normalBullseyeNeeded = true;
// ensure mode parameters are reset
currentRound = 1;
totalTime = 0;
await fadeMainMenuOut(); await fadeMainMenuOut();
@@ -340,13 +339,17 @@
normalSubModes.style.opacity = "100"; normalSubModes.style.opacity = "100";
} }
function setNormalRounds(numRounds) { function setupNormalMode(numRounds) {
// fade buttons out // fade buttons out
normalSubModes.style.opacity = "0"; normalSubModes.style.opacity = "0";
sleep(500); sleep(500);
normalSubModes.style.display = "none"; normalSubModes.style.display = "none";
// ensure mode parameters are [re]set
currentRound = 1;
maxNormalRounds = numRounds; maxNormalRounds = numRounds;
totalTime = 0;
beginNormalMode(); beginNormalMode();
} }
@@ -376,6 +379,7 @@
return; return;
} }
targetsClicked = 0;
if (roundNumber == maxNormalRounds) { if (roundNumber == maxNormalRounds) {
numTargets = roundNumber * 2; numTargets = roundNumber * 2;
} }
@@ -386,8 +390,8 @@
// effectively begin the round // effectively begin the round
console.log("starting round " + roundNumber); console.log("starting round " + roundNumber);
center.remove(); center.remove();
normalBullseyeNeeded = false;
targetsClicked = 0;
roundTimeStart = Date.now(); roundTimeStart = Date.now();
randomTargetGenerator(numTargets); randomTargetGenerator(numTargets);
@@ -400,11 +404,9 @@
roundSeconds = (roundTimeEnd - roundTimeStart) / 1000; roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
totalTime += roundSeconds; totalTime += roundSeconds;
currentRound++;
// auto-reset bullseye if page gets resized at all // auto-reset bullseye if page gets resized at all
if (needsResizeAdjustment) { if (needsResizeAdjustment) {
handlePageResize(); setParameters();
} }
// ensure "DRAW" isn't still lingering on screen after round // ensure "DRAW" isn't still lingering on screen after round
@@ -446,6 +448,9 @@
center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd);
center.addEventListener("touchend", handleHoverEnd); center.addEventListener("touchend", handleHoverEnd);
normalBullseyeNeeded = true;
currentRound++;
} }
gameText.style.display = "inline"; gameText.style.display = "inline";
@@ -721,25 +726,18 @@ async function handlePlayAgain(e) {
frameElement.replaceChildren(); frameElement.replaceChildren();
setParameters(); setParameters();
// if at main menu, resize bullseye // if at main menu, move bullseye
if (gamemode == "") { if (gamemode == "") {
center.remove(); center.style.top = yFrameAdjustment + "px";
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center.style.left = xFrameAdjustment + "px";
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
drawCircle(0); drawCircle(0);
} }
// if inbetween gameplay rounds, move middle circle and add game event listener // if inbetween gameplay rounds, move bullseye w/ game event listener
else if ((gamemode == "normal" && currentRound < 4) || else if ((gamemode == "normal" && normalBullseyeNeeded) ||
(gamemode == "countdown" && countdownBullseyeNeeded) (gamemode == "countdown" && countdownBullseyeNeeded)
) { ) {
center.remove(); center.style.top = yFrameAdjustment + "px";
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center.style.left = xFrameAdjustment + "px";
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
center.addEventListener("touchend", handleHoverEnd);
} }
console.log('page: ' + pageWidth + ' x ' + pageHeight); console.log('page: ' + pageWidth + ' x ' + pageHeight);
@@ -806,6 +804,7 @@ async function handlePlayAgain(e) {
title2.style.opacity = "0"; title2.style.opacity = "0";
gameModes.style.opacity = "0"; gameModes.style.opacity = "0";
await sleep(500); await sleep(500);
frame.replaceChildren();
titleContainer.style.display = "none"; titleContainer.style.display = "none";
gameModes.style.display = "none"; gameModes.style.display = "none";