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