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

bigger targets, "ready" text, formatted times

Browse Source
This commit is contained in:
simon-ec
2026-07-22 22:26:59 -04:00
parent f64c956224
commit 366815d150
1 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+56 -32
View File
@@ -10,10 +10,13 @@
padding: 0; padding: 0;
font-family: sans-serif; font-family: sans-serif;
} }
:root {
--bg: #161616;
}
html { html {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background-color: #161616; background-color: var(--bg);
font-size: 24px; font-size: 24px;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -31,19 +34,21 @@
/** border: 1px solid white; */ /** border: 1px solid white; */
} }
#center { #center {
height: 20px; height: 50px;
width: 20px; width: 50px;
background-color: red; background-color: var(--bg);
border: 5px solid red;
border-radius: 50%;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
} }
.target { .target {
height: 20px; height: 50px;
width: 20px; width: 50px;
background-color: red; background-color: red;
position: absolute; position: absolute;
border-radius: 25%; border-radius: 50%;
} }
.target:active { .target:active {
background-color: orange; background-color: orange;
@@ -99,15 +104,16 @@
<div id="text-box"> <div id="text-box">
<!-- intro related --> <!-- intro related -->
<span id="intro1" class="hidden title">QUICK</span> <div style="display: flex; gap: 1rem;">
<span id="intro2" class="hidden title">DRAW</span> <span id="intro1" class="hidden title">QUICK</span>
<span id="intro2" class="hidden title">DRAW</span>
</div>
<!-- gamemode menu buttons--> <!-- gamemode menu buttons-->
<div id="game-modes" class="hidden fade"> <div id="game-modes" class="hidden fade">
<button id="normal" onclick="handleNormalMode()">normal</button> <button id="normal" onclick="handleNormalMode()">normal</button>
<button id="countdown">countdown</button> <button id="countdown">countdown</button>
<button id="deadeye">dead eye</button> <!-- <button id="infinite">infinite</button> -->
<button id="infinite">infinite</button>
</div> </div>
<!-- pre-round text --> <!-- pre-round text -->
@@ -117,6 +123,7 @@
<span id="round-end" class="hidden fade"></span> <span id="round-end" class="hidden fade"></span>
<!-- countdown text --> <!-- countdown text -->
<span id="ready" class="hidden title">READY?</span>
<span id="countdown3" class="hidden title">3</span> <span id="countdown3" class="hidden title">3</span>
<span id="countdown2" class="hidden title">2</span> <span id="countdown2" class="hidden title">2</span>
<span id="countdown1" class="hidden title">1</span> <span id="countdown1" class="hidden title">1</span>
@@ -126,8 +133,8 @@
<script> <script>
let gameBorderWidth = 1; let gameBorderWidth = 1;
let targetWidth = 20; let targetWidth = 50;
let targetHeight = 20; let targetHeight = 50;
let pageHeight; let pageHeight;
let pageWidth; let pageWidth;
@@ -162,6 +169,7 @@
let bestNormalTime = "none"; let bestNormalTime = "none";
// text elements // text elements
let ready = document.getElementById("ready");
let intro1 = document.getElementById("intro1"); let intro1 = document.getElementById("intro1");
let intro2 = document.getElementById("intro2"); let intro2 = document.getElementById("intro2");
let gameText = document.getElementById("gameText"); let gameText = document.getElementById("gameText");
@@ -202,7 +210,8 @@
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
await drawTargetsInCircle(2); // await drawTargetsInCircle(2);
await drawTargetsInCircle(false);
// insert intro elements into document flow // insert intro elements into document flow
intro1.style.display = "inline"; intro1.style.display = "inline";
@@ -232,7 +241,7 @@
document.getElementById("game-modes").style.opacity = "100"; document.getElementById("game-modes").style.opacity = "100";
if (localStorage.getItem("bestNormalTime") != null) { if (localStorage.getItem("bestNormalTime") != null) {
bestNormalTime = localStorage.getItem("bestNormalTime"); bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime"));
} }
} }
@@ -253,7 +262,7 @@
intro1.style.display = "none"; intro1.style.display = "none";
intro2.style.display = "none"; intro2.style.display = "none";
gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start."; gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
gameText.style.opacity = "0"; gameText.style.opacity = "0";
gameText.style.display = "inline"; gameText.style.display = "inline";
await sleep(500); await sleep(500);
@@ -263,19 +272,22 @@
async function handleReset(e) { async function handleReset(e) {
currentRound = 0; currentRound = 0;
center.style.backgroundColor = "red";
center.removeEventListener("mouseover", handleReset); center.removeEventListener("mouseover", handleReset);
gameText.style.display = "none"; gameText.style.display = "none";
gameText.style.opacity = "0"; gameText.style.opacity = "0";
await drawTargetsInCircle();
intro1.style.display = "inline";
intro2.style.display = "inline";
intro1.style.opacity = "100";
intro2.style.opacity = "100";
document.getElementById("game-modes").style.display = "inline"; document.getElementById("game-modes").style.display = "inline";
await sleep(500); await sleep(500);
document.getElementById("game-modes").style.opacity = "100"; document.getElementById("game-modes").style.opacity = "100";
await drawTargetsInCircle(2);
} }
async function handleHoverStart(e) { async function handleHoverStart(e) {
e.target.style.backgroundColor = "green";
hovering = true; hovering = true;
hoverCount++; hoverCount++;
@@ -297,7 +309,7 @@
async function startNormalRound(roundNumber) { async function startNormalRound(roundNumber) {
if (roundNumber > 3) { if (roundNumber > 3) {
handleReset(0); handleReset({});
return; return;
} }
@@ -339,6 +351,10 @@
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
// ensure draw isn't still lingering on screen
draw.style.display = "none";
draw.style.opacity = "0";
if (roundNumber == 3) { if (roundNumber == 3) {
// GAME OVER STUFF // GAME OVER STUFF
if (totalTime < bestNormalTime || bestNormalTime == "none") { if (totalTime < bestNormalTime || bestNormalTime == "none") {
@@ -346,15 +362,15 @@
bestNormalTime = totalTime; bestNormalTime = totalTime;
localStorage.setItem("bestNormalTime", bestNormalTime); localStorage.setItem("bestNormalTime", bestNormalTime);
} }
gameText.innerText = "ROUND: " + roundSeconds + gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) +
"s\nTOTAL: " + totalTime + "s\nTOTAL: " + totalTime.toFixed(3) +
"s\nBEST SCORE: " + bestNormalTime + "s\nBEST SCORE: " + bestNormalTime.toFixed(3) +
"s\nhover on circle to go back to main menu.."; "s\nhover on circle to go back to main menu..";
center.addEventListener("mouseover", handleReset); center.addEventListener("mouseover", handleReset);
} }
else { else {
console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\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 + "s\nTOTAL: " + totalTime + "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); center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd);
@@ -371,11 +387,18 @@
async function startCountdown(hoverNumber) { async function startCountdown(hoverNumber) {
gameText.style.display = "none"; gameText.style.display = "none";
countingDown = true; countingDown = true;
// this if-check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
if (!hovering || hoverNumber != hoverCount) return false;
ready.style.display = "inline";
ready.style.opacity = "100";
await sleep(1000); await sleep(1000);
if (!hovering || hoverNumber != hoverCount) return false;
ready.style.display = "none";
ready.style.opacity = "0";
// this check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
if (!hovering || hoverNumber != hoverCount) return false; if (!hovering || hoverNumber != hoverCount) return false;
one.style.opacity = "0"; one.style.opacity = "0";
two.style.opacity = "0"; two.style.opacity = "0";
@@ -417,14 +440,15 @@
function handleHoverEnd(e) { function handleHoverEnd(e) {
hovering = false; hovering = false;
e.target.style.backgroundColor = "red";
if (countingDown) { if (countingDown) {
ready.style.display = "none";
one.style.display = "none"; one.style.display = "none";
two.style.display = "none"; two.style.display = "none";
three.style.display = "none"; three.style.display = "none";
draw.style.display = "none"; draw.style.display = "none";
ready.style.opacity = "0";
one.style.opacity = "0"; one.style.opacity = "0";
two.style.opacity = "0"; two.style.opacity = "0";
three.style.opacity = "0"; three.style.opacity = "0";
@@ -433,10 +457,10 @@
if (currentRound <= 1) { if (currentRound <= 1) {
drawTargetsInCircle(); drawTargetsInCircle();
gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start."; gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
} }
else { else {
gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "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;
} }
gameText.style.display = "inline"; gameText.style.display = "inline";
countingDown = false; countingDown = false;