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;
padding: 1rem;
}
#frame {
#target-frame {
width: 60%;
height: 75%;
/** border: 1px solid white; */
@@ -95,7 +95,7 @@
gap: 1rem;
}
#text-container {
#text-frame {
display: flex;
flex-direction: column;
justify-content: flex-end;
@@ -155,16 +155,17 @@
padding: .5rem .25rem;
max-height: 80vh;
}
#frame {
#target-frame {
width: 90%;
}
#text-container {
#text-frame {
margin-top: 1.25rem;
}
#game-modes {
gap: .5rem;
}
#normal-sub-modes, #countdown-sub-modes, #game-over-buttons {
flex-direction: column;
gap: .5rem;
}
#game-text {
@@ -178,11 +179,11 @@
</head>
<body>
<!-- where the targets + bullseye are drawn -->
<div id="frame">
<div id="target-frame">
</div>
<!-- where we place text + buttons -->
<div id="text-container">
<div id="text-frame">
<!-- intro related -->
<div id="title-container">
@@ -238,7 +239,7 @@
let pageHeight;
let pageWidth;
let frameElement;
let targetFrame;
let frameRect;
let frameHeight;
let frameWidth;
@@ -412,10 +413,10 @@
pageHeight = window.innerHeight;
pageWidth = window.innerWidth;
frameElement = document.getElementById("frame");
frameRect = frameElement.getBoundingClientRect();
frameHeight = frameElement.offsetHeight;
frameWidth = frameElement.offsetWidth;
targetFrame = document.getElementById("target-frame");
frameRect = targetFrame.getBoundingClientRect();
frameHeight = targetFrame.offsetHeight;
frameWidth = targetFrame.offsetWidth;
// ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2));
ratio = frameHeight / frameWidth;
@@ -467,9 +468,11 @@
// enable player to start first round
center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("touchstart", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", 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) {
@@ -552,9 +555,11 @@
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("touchstart", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false});
center.addEventListener("touchmove", handleHoverEnd, {passive:false});
center.addEventListener("touchcancel", handleHoverEnd, {passive:false});
normalBullseyeNeeded = true;
currentRound++;
@@ -593,10 +598,12 @@
gameText.style.opacity = "100";
// enable player to start game
center.addEventListener("mouseover", handleHoverStart(), {passive:false});
center.addEventListener("mouseleave", handleHoverEnd(), {passive:false});
center.addEventListener("touchstart", handleHoverEnd(), {passive:false});
center.addEventListener("touchend", handleHoverEnd(), {passive:false});
center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("touchstart", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", 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) {
@@ -618,7 +625,7 @@
console.log('current round: ' + currentRound);
// remove all targets
frameElement.replaceChildren();
targetFrame.replaceChildren();
gameText.style.display = "none";
if (gamemode == "normal") {
@@ -667,7 +674,7 @@
}
// 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
if (targetsClicked > highScore || highScore == 0) {
@@ -852,7 +859,7 @@
return;
}
frameElement.replaceChildren();
targetFrame.replaceChildren();
setParameters();
// if at main menu, move bullseye
@@ -887,7 +894,7 @@
target = generateTarget(x, y);
target.classList.add("red-dot");
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
targetFrame.insertAdjacentElement("afterbegin", target);
if (drawDurationSeconds) {
target.classList.add("fade");
@@ -910,7 +917,7 @@
// make title elements actually visible
title1.style.opacity = "100";
await sleep(500);
await sleep(250);
title2.style.opacity = "100";
await sleep(1500);
@@ -933,7 +940,7 @@
title2.style.opacity = "0";
gameModes.style.opacity = "0";
await sleep(500);
frame.replaceChildren();
targetFrame.replaceChildren();
titleContainer.style.display = "none";
gameModes.style.display = "none";
@@ -961,7 +968,7 @@
target.classList.add("target");
target.addEventListener("click", handleTargetClick);
target.addEventListener("touchend", handleTargetClick);
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
targetFrame.insertAdjacentElement("afterbegin", target);
}
}