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

adjusted intro timing

Browse Source
This commit is contained in:
simon
2026-08-07 22:35:55 -05:00
parent e57a0e3e70
commit bb9beeffff
1 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+31 -24
View File
@@ -29,7 +29,7 @@
width: 100vw; width: 100vw;
padding: 1rem; padding: 1rem;
} }
#frame { #target-frame {
width: 60%; width: 60%;
height: 75%; height: 75%;
/** border: 1px solid white; */ /** border: 1px solid white; */
@@ -95,7 +95,7 @@
gap: 1rem; gap: 1rem;
} }
#text-container { #text-frame {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
@@ -155,16 +155,17 @@
padding: .5rem .25rem; padding: .5rem .25rem;
max-height: 80vh; max-height: 80vh;
} }
#frame { #target-frame {
width: 90%; width: 90%;
} }
#text-container { #text-frame {
margin-top: 1.25rem; margin-top: 1.25rem;
} }
#game-modes { #game-modes {
gap: .5rem; gap: .5rem;
} }
#normal-sub-modes, #countdown-sub-modes, #game-over-buttons { #normal-sub-modes, #countdown-sub-modes, #game-over-buttons {
flex-direction: column;
gap: .5rem; gap: .5rem;
} }
#game-text { #game-text {
@@ -178,11 +179,11 @@
</head> </head>
<body> <body>
<!-- where the targets + bullseye are drawn --> <!-- where the targets + bullseye are drawn -->
<div id="frame"> <div id="target-frame">
</div> </div>
<!-- where we place text + buttons --> <!-- where we place text + buttons -->
<div id="text-container"> <div id="text-frame">
<!-- intro related --> <!-- intro related -->
<div id="title-container"> <div id="title-container">
@@ -238,7 +239,7 @@
let pageHeight; let pageHeight;
let pageWidth; let pageWidth;
let frameElement; let targetFrame;
let frameRect; let frameRect;
let frameHeight; let frameHeight;
let frameWidth; let frameWidth;
@@ -412,10 +413,10 @@
pageHeight = window.innerHeight; pageHeight = window.innerHeight;
pageWidth = window.innerWidth; pageWidth = window.innerWidth;
frameElement = document.getElementById("frame"); targetFrame = document.getElementById("target-frame");
frameRect = frameElement.getBoundingClientRect(); frameRect = targetFrame.getBoundingClientRect();
frameHeight = frameElement.offsetHeight; frameHeight = targetFrame.offsetHeight;
frameWidth = frameElement.offsetWidth; frameWidth = targetFrame.offsetWidth;
// ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2)); // ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2));
ratio = frameHeight / frameWidth; ratio = frameHeight / frameWidth;
@@ -467,9 +468,11 @@
// enable player to start first round // enable player to start first round
center.addEventListener("mouseover", handleHoverStart, {passive:false}); center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("touchstart", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false}); center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false}); center.addEventListener("touchend", handleHoverEnd, {passive:false});
center.addEventListener("touchmove", handleHoverEnd, {passive:false});
center.addEventListener("touchcancel", handleHoverEnd, {passive:false});
} }
async function startNormalRound(roundNumber) { async function startNormalRound(roundNumber) {
@@ -552,9 +555,11 @@
gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound; gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
center.addEventListener("mouseover", handleHoverStart, {passive:false}); center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("touchstart", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false}); center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false}); center.addEventListener("touchend", handleHoverEnd, {passive:false});
center.addEventListener("touchmove", handleHoverEnd, {passive:false});
center.addEventListener("touchcancel", handleHoverEnd, {passive:false});
normalBullseyeNeeded = true; normalBullseyeNeeded = true;
currentRound++; currentRound++;
@@ -593,10 +598,12 @@
gameText.style.opacity = "100"; gameText.style.opacity = "100";
// enable player to start game // enable player to start game
center.addEventListener("mouseover", handleHoverStart(), {passive:false}); center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd(), {passive:false}); center.addEventListener("touchstart", handleHoverStart, {passive:false});
center.addEventListener("touchstart", handleHoverEnd(), {passive:false}); center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd(), {passive:false}); center.addEventListener("touchend", handleHoverEnd, {passive:false});
center.addEventListener("touchmove", handleHoverEnd, {passive:false});
center.addEventListener("touchcancel", handleHoverEnd, {passive:false});
} }
async function handleCountdownMode(e) { async function handleCountdownMode(e) {
@@ -618,7 +625,7 @@
console.log('current round: ' + currentRound); console.log('current round: ' + currentRound);
// remove all targets // remove all targets
frameElement.replaceChildren(); targetFrame.replaceChildren();
gameText.style.display = "none"; gameText.style.display = "none";
if (gamemode == "normal") { if (gamemode == "normal") {
@@ -667,7 +674,7 @@
} }
// ensure no targets are still on screen after timer ends // ensure no targets are still on screen after timer ends
frameElement.replaceChildren(); targetFrame.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 > highScore || highScore == 0) { if (targetsClicked > highScore || highScore == 0) {
@@ -852,7 +859,7 @@
return; return;
} }
frameElement.replaceChildren(); targetFrame.replaceChildren();
setParameters(); setParameters();
// if at main menu, move bullseye // if at main menu, move bullseye
@@ -887,7 +894,7 @@
target = generateTarget(x, y); target = generateTarget(x, y);
target.classList.add("red-dot"); target.classList.add("red-dot");
document.getElementById("frame").insertAdjacentElement("afterbegin", target); targetFrame.insertAdjacentElement("afterbegin", target);
if (drawDurationSeconds) { if (drawDurationSeconds) {
target.classList.add("fade"); target.classList.add("fade");
@@ -910,7 +917,7 @@
// make title elements actually visible // make title elements actually visible
title1.style.opacity = "100"; title1.style.opacity = "100";
await sleep(500); await sleep(250);
title2.style.opacity = "100"; title2.style.opacity = "100";
await sleep(1500); await sleep(1500);
@@ -933,7 +940,7 @@
title2.style.opacity = "0"; title2.style.opacity = "0";
gameModes.style.opacity = "0"; gameModes.style.opacity = "0";
await sleep(500); await sleep(500);
frame.replaceChildren(); targetFrame.replaceChildren();
titleContainer.style.display = "none"; titleContainer.style.display = "none";
gameModes.style.display = "none"; gameModes.style.display = "none";
@@ -961,7 +968,7 @@
target.classList.add("target"); target.classList.add("target");
target.addEventListener("click", handleTargetClick); target.addEventListener("click", handleTargetClick);
target.addEventListener("touchend", handleTargetClick); target.addEventListener("touchend", handleTargetClick);
document.getElementById("frame").insertAdjacentElement("afterbegin", target); targetFrame.insertAdjacentElement("afterbegin", target);
} }
} }