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

lowk might be done ?

Browse Source
This commit is contained in:
simon-ec
2026-07-29 19:57:19 -04:00
parent 5b98e9724c
commit 61a98ca89d
1 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+41 -28
View File
@@ -37,8 +37,8 @@
#center { #center {
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: var(--bg); background-color: red;
border: 5px solid red; /** border: 5px solid red; */
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
@@ -47,13 +47,32 @@
.target { .target {
height: 50px; height: 50px;
width: 50px; width: 50px;
background-color: red; background-color: var(--bg);
border: 10px solid red;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
.target:active { .target:active {
background-color: orange; background-color: orange;
} }
.target::after {
position: absolute;
background-color: red;
border-radius: 2rem;
height: 10px;
width: 10px;
top: 10px;
left: 10px;
content: "";
}
.red-dot {
height: 50px;
width: 50px;
background-color: red;
position: absolute;
border-radius: 50%;
}
.hidden { .hidden {
display: none; display: none;
@@ -261,7 +280,7 @@
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
await drawTargetsInCircle(); await drawCircle(2);
if (needsResizeAdjustment) { if (needsResizeAdjustment) {
// auto-reset screen if page was resized during animation // auto-reset screen if page was resized during animation
handlePageResize(); handlePageResize();
@@ -308,14 +327,15 @@
gameText.style.display = "none"; gameText.style.display = "none";
gameText.style.opacity = "0"; gameText.style.opacity = "0";
if (gamemode == "normal") {
handleNormalMode(e);
}
else if (gamemode == "countdown") {
setParameters(); setParameters();
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
if (gamemode == "normal") {
handleNormalMode(e);
}
else if (gamemode == "countdown") {
handleCountdownMode(e); handleCountdownMode(e);
} }
else { else {
@@ -364,13 +384,11 @@
} }
async function handleReset(e) { async function handleReset(e) {
// (bullseye won't be on screen after a countdown round) // bullseye won't be on screen after a game
if (gamemode == "countdown") {
setParameters(); setParameters();
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
}
// refresh game state variables // refresh game state variables
gamemode = ""; gamemode = "";
@@ -386,7 +404,7 @@
// reintroduce main menu elements into DOM flow // reintroduce main menu elements into DOM flow
await sleep(800); await sleep(800);
await drawTargetsInCircle(2); await drawCircle(2);
await fadeMainMenuIn(); await fadeMainMenuIn();
// auto-reset bullseye if page was resized during animation // auto-reset bullseye if page was resized during animation
@@ -523,18 +541,13 @@
handlePageResize(); handlePageResize();
} }
// even if no resize, bring bullseye back to screen // even if no resize, bring bullseye back to screen
else {
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
}
// ensure "DRAW" isn't still lingering on screen after round // ensure "DRAW" isn't still lingering on screen after round
draw.style.display = "none"; draw.style.display = "none";
draw.style.opacity = "0"; draw.style.opacity = "0";
if (roundNumber == 3) {
// GAME OVER STUFF // GAME OVER STUFF
if (roundNumber == 3) {
if (totalTime < bestNormalTime || bestNormalTime == 0) { if (totalTime < bestNormalTime || bestNormalTime == 0) {
if (bestNormalTime == 0) { if (bestNormalTime == 0) {
alert("NEW FASTEST TIME!!! congratulations cowboy."); alert("NEW FASTEST TIME!!! congratulations cowboy.");
@@ -545,6 +558,7 @@
bestNormalTime = totalTime; bestNormalTime = totalTime;
localStorage.setItem("bestNormalTime", bestNormalTime); localStorage.setItem("bestNormalTime", bestNormalTime);
} }
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 SCORE: " + bestNormalTime.toFixed(3);
@@ -555,7 +569,12 @@
gameOverButtons.style.display = "flex"; gameOverButtons.style.display = "flex";
gameOverButtons.style.opacity = "100"; gameOverButtons.style.opacity = "100";
} }
// NORMAL END OF ROUND STUFF
else { else {
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
console.log("ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "\nhover on circle to start round " + currentRound); console.log("ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "\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; gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
@@ -684,7 +703,7 @@
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
drawTargetsInCircle(0); drawCircle(0);
} }
// if inbetween gameplay rounds, move middle circle and add game event listener // if inbetween gameplay rounds, move middle circle and add game event listener
else if ((gamemode == "normal" && currentRound < 4) || else if ((gamemode == "normal" && currentRound < 4) ||
@@ -698,19 +717,13 @@
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd);
center.addEventListener("touchend", handleHoverEnd); center.addEventListener("touchend", handleHoverEnd);
} }
else if (gamemode == "normal" && currentRound == 4) {
center.remove();
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
}
console.log('page: ' + pageWidth + ' x ' + pageHeight); console.log('page: ' + pageWidth + ' x ' + pageHeight);
console.log('frame: ' + frameWidth + ' x ' + frameHeight); console.log('frame: ' + frameWidth + ' x ' + frameHeight);
needsResizeAdjustment = false; needsResizeAdjustment = false;
} }
async function drawTargetsInCircle(drawDurationSeconds) { async function drawCircle(drawDurationSeconds) {
drawingCircle = true; drawingCircle = true;
let r, x, y; let r, x, y;
let radians; let radians;
@@ -722,7 +735,7 @@
y = (r * ratio * Math.sin(radians)) + yFrameAdjustment; y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;
target = generateTarget(x, y); target = generateTarget(x, y);
target.classList.add("target"); target.classList.add("red-dot");
document.getElementById("frame").insertAdjacentElement("afterbegin", target); document.getElementById("frame").insertAdjacentElement("afterbegin", target);
if (drawDurationSeconds) { if (drawDurationSeconds) {
@@ -760,7 +773,7 @@
} }
async function fadeMainMenuOut() { async function fadeMainMenuOut() {
let targets = document.getElementsByClassName("target"); let targets = document.getElementsByClassName("red-dot");
for (let i = 0; i < targets.length; i++) { for (let i = 0; i < targets.length; i++) {
console.log(targets[i]); console.log(targets[i]);
targets[i].style.opacity = 0; targets[i].style.opacity = 0;