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 {
height: 50px;
width: 50px;
background-color: var(--bg);
border: 5px solid red;
background-color: red;
/** border: 5px solid red; */
border-radius: 50%;
position: absolute;
border-radius: 50%;
@@ -47,13 +47,32 @@
.target {
height: 50px;
width: 50px;
background-color: red;
background-color: var(--bg);
border: 10px solid red;
position: absolute;
border-radius: 50%;
}
.target:active {
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 {
display: none;
@@ -261,7 +280,7 @@
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
await drawTargetsInCircle();
await drawCircle(2);
if (needsResizeAdjustment) {
// auto-reset screen if page was resized during animation
handlePageResize();
@@ -308,14 +327,15 @@
gameText.style.display = "none";
gameText.style.opacity = "0";
if (gamemode == "normal") {
handleNormalMode(e);
}
else if (gamemode == "countdown") {
setParameters();
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
if (gamemode == "normal") {
handleNormalMode(e);
}
else if (gamemode == "countdown") {
handleCountdownMode(e);
}
else {
@@ -364,13 +384,11 @@
}
async function handleReset(e) {
// (bullseye won't be on screen after a countdown round)
if (gamemode == "countdown") {
// bullseye won't be on screen after a game
setParameters();
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
}
// refresh game state variables
gamemode = "";
@@ -386,7 +404,7 @@
// reintroduce main menu elements into DOM flow
await sleep(800);
await drawTargetsInCircle(2);
await drawCircle(2);
await fadeMainMenuIn();
// auto-reset bullseye if page was resized during animation
@@ -523,18 +541,13 @@
handlePageResize();
}
// 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
draw.style.display = "none";
draw.style.opacity = "0";
if (roundNumber == 3) {
// GAME OVER STUFF
if (roundNumber == 3) {
if (totalTime < bestNormalTime || bestNormalTime == 0) {
if (bestNormalTime == 0) {
alert("NEW FASTEST TIME!!! congratulations cowboy.");
@@ -545,6 +558,7 @@
bestNormalTime = totalTime;
localStorage.setItem("bestNormalTime", bestNormalTime);
}
gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) +
"s\nTOTAL: " + totalTime.toFixed(3) +
"s\nBEST SCORE: " + bestNormalTime.toFixed(3);
@@ -555,7 +569,12 @@
gameOverButtons.style.display = "flex";
gameOverButtons.style.opacity = "100";
}
// NORMAL END OF ROUND STUFF
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);
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.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
drawTargetsInCircle(0);
drawCircle(0);
}
// if inbetween gameplay rounds, move middle circle and add game event listener
else if ((gamemode == "normal" && currentRound < 4) ||
@@ -698,19 +717,13 @@
center.addEventListener("mouseleave", 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('frame: ' + frameWidth + ' x ' + frameHeight);
needsResizeAdjustment = false;
}
async function drawTargetsInCircle(drawDurationSeconds) {
async function drawCircle(drawDurationSeconds) {
drawingCircle = true;
let r, x, y;
let radians;
@@ -722,7 +735,7 @@
y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;
target = generateTarget(x, y);
target.classList.add("target");
target.classList.add("red-dot");
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
if (drawDurationSeconds) {
@@ -760,7 +773,7 @@
}
async function fadeMainMenuOut() {
let targets = document.getElementsByClassName("target");
let targets = document.getElementsByClassName("red-dot");
for (let i = 0; i < targets.length; i++) {
console.log(targets[i]);
targets[i].style.opacity = 0;