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

normal fully playable w/ high score + menu gloss

Browse Source
This commit is contained in:
simon
2026-07-08 22:00:23 -05:00
parent 5ff6c98738
commit f64c956224
1 changed files with 79 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+78 -26
View File
@@ -35,6 +35,7 @@
width: 20px;
background-color: red;
position: absolute;
border-radius: 50%;
}
.target {
@@ -103,9 +104,10 @@
<!-- gamemode menu buttons-->
<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>
<button id="normal" onclick="handleNormalMode()">normal</button>
<button id="countdown">countdown</button>
<button id="deadeye">dead eye</button>
<button id="infinite">infinite</button>
</div>
<!-- pre-round text -->
@@ -157,6 +159,8 @@
let roundTimeEnd = 0;
let roundSeconds = 0.0;
let bestNormalTime = "none";
// text elements
let intro1 = document.getElementById("intro1");
let intro2 = document.getElementById("intro2");
@@ -198,7 +202,7 @@
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
await drawTargetsInCircle(false);
await drawTargetsInCircle(2);
// insert intro elements into document flow
intro1.style.display = "inline";
@@ -226,9 +230,13 @@
document.getElementById("game-modes").style.display = "inline";
await sleep(500);
document.getElementById("game-modes").style.opacity = "100";
if (localStorage.getItem("bestNormalTime") != null) {
bestNormalTime = localStorage.getItem("bestNormalTime");
}
}
function handleNormalMode(e) {
async function handleNormalMode(e) {
gamemode = "normal";
console.log("game mode: " + gamemode);
@@ -238,17 +246,33 @@
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
document.getElementById("game-modes").style.opacity = "0";
await sleep(500);
document.getElementById("game-modes").style.display = "none";
intro1.style.display = "none";
intro2.style.display = "none";
gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
gameText.style.opacity = "0";
gameText.style.display = "inline";
await sleep(500);
gameText.style.opacity = "100";
}
async function handleReset(e) {
currentRound = 0;
center.style.backgroundColor = "red";
center.removeEventListener("mouseover", handleReset);
gameText.style.display = "none";
gameText.style.opacity = "0";
await drawTargetsInCircle();
document.getElementById("game-modes").style.display = "inline";
await sleep(500);
document.getElementById("game-modes").style.opacity = "100";
}
async function handleHoverStart(e) {
e.target.style.backgroundColor = "green";
@@ -265,10 +289,6 @@
gameText.style.display = "none";
if (gamemode == "normal") {
if (currentRound > 3) {
console.log("hover attempt after round 3");
return;
}
await startNormalRound(currentRound);
}
// if (infinityMode)
@@ -276,17 +296,18 @@
}
async function startNormalRound(roundNumber) {
if (roundNumber > 3) {
handleReset(0);
return;
}
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;
}
@@ -296,9 +317,11 @@
else if (roundNumber == 3) {
numTargets = 5;
}
else { alert("max number of rounds hit. should not be seeing this"); }
// effectively begin the round
console.log("starting round " + roundNumber);
document.getElementById("center").remove();
targetsClickedThisRound = 0;
roundTimeStart = Date.now();
placeTarget(numTargets);
while (targetsClickedThisRound < numTargets) {
@@ -311,8 +334,33 @@
currentRound++;
console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\nhover on bullseye to start round " + currentRound);
gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound;
// bring bullseye back to screen
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
if (roundNumber == 3) {
// GAME OVER STUFF
if (totalTime < bestNormalTime || bestNormalTime == "none") {
alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime + "s. congratulations cowboy.");
bestNormalTime = totalTime;
localStorage.setItem("bestNormalTime", bestNormalTime);
}
gameText.innerText = "ROUND: " + roundSeconds +
"s\nTOTAL: " + totalTime +
"s\nBEST SCORE: " + bestNormalTime +
"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;
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
}
gameText.style.display = "inline";
gameText.style.opacity = "100";
@@ -383,11 +431,12 @@
draw.style.opacity = "0";
if (currentRound == 1) {
gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
if (currentRound <= 1) {
drawTargetsInCircle();
gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
}
else {
gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound;
gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on circle to start round " + currentRound;
}
gameText.style.display = "inline";
countingDown = false;
@@ -407,18 +456,21 @@
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
if (currentRound == 0) {
drawTargetsInCircle(false);
if (currentRound == 0 || (gamemode == "normal" && currentRound == 1)) {
drawTargetsInCircle();
}
if (currentRound >= 1) {
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
}
console.log('page: ' + pageWidth + ' x ' + pageHeight);
console.log('frame: ' + frameWidth + ' x ' + frameHeight);
}
async function drawTargetsInCircle(animate) {
async function drawTargetsInCircle(drawDurationSeconds) {
let r, x, y;
let radians;
let target;
@@ -431,7 +483,7 @@
target = generateTarget(x, y);
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
if (animate) await sleep(15);
if (drawDurationSeconds) await sleep((drawDurationSeconds * 1000) / 180);
}
}