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

normal mode lowk working

Browse Source
This commit is contained in:
simon-ec
2026-07-02 00:32:00 -04:00
parent e4d7bd675a
commit 8eec483788
1 changed files with 287 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+150 -49
View File
@@ -42,6 +42,10 @@
width: 20px; width: 20px;
background-color: red; background-color: red;
position: absolute; position: absolute;
border-radius: 25%;
}
.target:active {
background-color: orange;
} }
.hidden { .hidden {
@@ -62,10 +66,11 @@
flex-direction: row; flex-direction: row;
align-content: end; align-content: end;
justify-content: space-evenly; justify-content: space-evenly;
text-align: center;
color: red; color: red;
width: 100%; width: 100%;
min-height: 2rem; min-height: 2rem;
line-height: 2rem; line-height: 1rem;
margin-top: 2rem; margin-top: 2rem;
} }
@@ -85,30 +90,36 @@
</head> </head>
<body> <body>
<div id="frame"></div> <div id="frame">
<!-- where the targets + bullseye are drawn -->
</div>
<!-- where we place text + buttons -->
<div id="text-box"> <div id="text-box">
<!-- intro related -->
<span id="intro1" class="hidden title">QUICK</span> <span id="intro1" class="hidden title">QUICK</span>
<span id="intro2" class="hidden title">DRAW</span> <span id="intro2" class="hidden title">DRAW</span>
<span id="instructions" class="hidden fade">hover on bullseye to start</span> <!-- gamemode menu button-->
<div id="game-modes" class="hidden fade">
<button id="normal" onclick="handleNormalMode()">normal mode</button>
<button id="infinite">infinite mode</button>
<button id="countdown">countdown mode</button>
</div>
<!-- pre-round text -->
<span id="gameText" class="hidden fade"></span>
<!-- post round text -->
<span id="round-end" class="hidden fade"></span>
<!-- countdown text -->
<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>
<div id="game-modes" class="hidden fade">
<button id="normal" onclick="handleNormalMode">normal mode</button>
<button id="normal">infinite mode</button>
<button id="normal">countdown mode</button>
</div>
<span id="draw" class="hidden title">DRAW!</span> <span id="draw" class="hidden title">DRAW!</span>
</div> </div>
<script> <script>
@@ -132,15 +143,23 @@
let hovering = false; let hovering = false;
let hoverCount = 0; let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling
let targetsClickedThisRound = 0;
let gamemode = ""; // can be: "normal", "countdown", "infinite"
let roundmode = ""; // if gamemode is "countdown" or "infinite", can be: "rounds" or "frenzy"
let currentRound = 0; let currentRound = 0;
let countingDown = false; let countingDown = false;
let roundTimeStart = 0;
let roundTimeEnd = 0;
let roundSeconds = 0.0;
// text elements // text elements
let intro1 = document.getElementById("intro1"); let intro1 = document.getElementById("intro1");
let intro2 = document.getElementById("intro2"); let intro2 = document.getElementById("intro2");
let instructions = document.getElementById("instructions"); let gameText = document.getElementById("gameText");
let one = document.getElementById("countdown1"); let one = document.getElementById("countdown1");
let two = document.getElementById("countdown2"); let two = document.getElementById("countdown2");
@@ -178,7 +197,7 @@
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
await drawTargetsInCircle(true); await drawTargetsInCircle(false);
// insert intro elements into document flow // insert intro elements into document flow
intro1.style.display = "inline"; intro1.style.display = "inline";
@@ -201,7 +220,7 @@
intro1.style.display = "none"; intro1.style.display = "none";
intro2.style.display = "none"; intro2.style.display = "none";
window.addEventListener("resize", handleResize); window.addEventListener("resize", handlePageResize);
document.getElementById("game-modes").style.display = "inline"; document.getElementById("game-modes").style.display = "inline";
await sleep(500); await sleep(500);
@@ -209,61 +228,122 @@
} }
function handleNormalMode(e) { function handleNormalMode(e) {
gamemode = "normal";
console.log("game mode: " + gamemode);
currentRound = 1;
center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd);
// instructions.style.display = "inline"; document.getElementById("game-modes").style.display = "none";
// instructions.style.opacity = "100";
intro1.style.display = "none";
intro2.style.display = "none";
gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
gameText.style.display = "inline";
gameText.style.opacity = "100";
} }
function handleHoverStart(e) { async function handleHoverStart(e) {
e.target.style.backgroundColor = "green"; e.target.style.backgroundColor = "green";
if (currentRound == 0) return;
hovering = true; hovering = true;
hoverCount++; hoverCount++;
console.log('hover count: ' + hoverCount);
console.log('current round: ' + currentRound);
frameElement.replaceChildren(); frameElement.replaceChildren();
intro1.style.display = "none"; // intro1.style.display = "none";
intro2.style.display = "none"; // intro2.style.display = "none";
instructions.style.display = "none"; gameText.style.display = "none";
// if (infinityMode) if (gamemode == "normal") {
if (currentRound > 3) {
if (currentRound == 0) { startRoundOne(); } console.log("hover attempt after round 3");
}
async function startRoundOne() {
if (!await startCountdown(hoverCount)) {
// if user canceled hover, don't continue round
return; return;
} }
console.log('success'); await startNormalRound(currentRound);
}
// if (infinityMode)
} }
async function startNormalRound(roundNumber) {
if (!await startCountdown(hoverCount)) {
// if user canceled hover, don't continue round
console.log("player canceled coundown");
return;
}
console.log("starting round " + roundNumber);
targetsClickedThisRound = 0;
let numTargets = 0;
if (roundNumber == 1) {
numTargets = 1;
}
else if (roundNumber == 2) {
numTargets = 3;
}
else if (roundNumber == 3) {
numTargets = 5;
}
else { alert("max number of rounds hit. should not be seeing this"); }
// effectively begin the round
roundTimeStart = Date.now();
placeTarget(numTargets);
while (targetsClickedThisRound < numTargets) {
await sleep(10);
if (targetsClickedThisRound == numTargets) break;
}
roundTimeEnd = Date.now();
roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
currentRound++;
console.log('ROUND ' + currentRound + ' TIME: ' + roundSeconds);
gameText.innerText = "TIME: " + roundSeconds + "\nhover on bullseye to start round " + currentRound;
gameText.style.display = "inline";
gameText.style.opacity = "100";
return;
}
async function startCountdown(hoverNumber) { async function startCountdown(hoverNumber) {
instructions.style.display = "none"; gameText.style.display = "none";
countingDown = true; countingDown = true;
await sleep(1000); await sleep(1000);
// this check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
if (!hovering || hoverNumber != hoverCount) return false;
one.style.opacity = "0"; one.style.opacity = "0";
two.style.opacity = "0"; two.style.opacity = "0";
three.style.opacity = "0"; three.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.display = "inline"; one.style.display = "inline";
two.style.display = "inline"; two.style.display = "inline";
three.style.display = "inline"; three.style.display = "inline";
if (!hovering || hoverNumber != hoverCount) return false;
three.style.opacity = "100"; three.style.opacity = "100";
await sleep(1000); await sleep(1000);
if (!hovering || hoverNumber != hoverCount) return false;
two.style.opacity = "100"; two.style.opacity = "100";
await sleep(1000); await sleep(1000);
if (!hovering || hoverNumber != hoverCount) return false;
one.style.opacity = "100"; one.style.opacity = "100";
await sleep(1000); await sleep(1000);
@@ -300,12 +380,23 @@
draw.style.opacity = "0"; draw.style.opacity = "0";
instructions.style.display = "inline"; if (currentRound == 1) {
gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
}
else {
gameText.innerText = "TIME: " + roundSeconds + "\nhover on bullseye to start round " + currentRound;
}
gameText.style.display = "inline";
countingDown = false; countingDown = false;
} }
} }
function handleResize(event) { function handleTargetClick(e) {
targetsClickedThisRound++;
e.target.remove();
}
function handlePageResize(event) {
frameElement.replaceChildren(); frameElement.replaceChildren();
setParameters(); setParameters();
@@ -330,17 +421,10 @@
let target; let target;
for (let i = 0; i < 360; i = i + 2) { for (let i = 0; i < 360; i = i + 2) {
r = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2); r = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2);
// r = (frameWidth / 2) - (targetWidth / 2);
radians = degreesToRadians(i); radians = degreesToRadians(i);
x = (r * 1 * Math.cos(radians)) + xFrameAdjustment; x = (r * 1 * Math.cos(radians)) + xFrameAdjustment;
y = (r * ratio * Math.sin(radians)) + yFrameAdjustment; y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;
// console.log(x + ', ' + y);
// console.log(ratio);
// console.log(xFrameAdjustment + 'adj, ' + yFrameAdjustment + 'adj');
target = generateTarget(x, y); target = generateTarget(x, y);
document.getElementById("frame").insertAdjacentElement("afterbegin", target); document.getElementById("frame").insertAdjacentElement("afterbegin", target);
@@ -348,14 +432,28 @@
} }
} }
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function degreesToRadians(degrees) { function degreesToRadians(degrees) {
return degrees * (Math.PI / 180) return degrees * (Math.PI / 180)
} }
// function to place a target somewhere random on the circle
function placeTarget(numTargets) {
let radians, radius
let x, y;
let target;
for (let i = 0; i < numTargets; i++){
radians = degreesToRadians(getRandomInt(0, 360));
radius = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2);
x = (radius * 1 * Math.cos(radians)) + xFrameAdjustment;
y = (radius * ratio * Math.sin(radians)) + yFrameAdjustment;
target = generateTarget(x, y);
target.classList.add("target");
target.addEventListener("click", handleTargetClick);
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
}
}
function generateTarget(x, y) { function generateTarget(x, y) {
const target = document.createElement("div"); const target = document.createElement("div");
@@ -366,12 +464,15 @@
return target; return target;
} }
function getRandomInt(min, max) { function getRandomInt(min, max) {
const minCeiled = Math.ceil(min); const minCeiled = Math.ceil(min);
const maxFloored = Math.floor(max); const maxFloored = Math.floor(max);
return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive
} }
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
</script> </script>
</body> </body>
</html> </html>