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

updates for sync to laptop

Browse Source
This commit is contained in:
simon
2026-08-06 09:49:25 -05:00
parent 715e5e3bd6
commit e57a0e3e70
1 changed files with 116 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
quickdraw-game.html
+116 -27
View File
@@ -149,6 +149,7 @@
@media screen and (max-width: 1024px) {
html {
font-size: 32px;
overflow: hidden;
}
body {
padding: .5rem .25rem;
@@ -163,6 +164,9 @@
#game-modes {
gap: .5rem;
}
#normal-sub-modes, #countdown-sub-modes, #game-over-buttons {
gap: .5rem;
}
#game-text {
font-size: .8rem;
}
@@ -188,23 +192,23 @@
<!-- gamemode menu buttons-->
<div id="game-modes" class="button-container hidden fade">
<button id="normal" onclick="handleNormalMode()">normal</button>
<button id="countdown" onclick="handleCountdownMode()">countdown</button>
<button id="normal-mode">normal</button>
<button id="countdown-mode">countdown</button>
<!-- <button id="infinite">infinite</button> -->
</div>
<!-- normal mode sub-modes -->
<div id="normal-sub-modes" class="button-container hidden fade">
<button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button>
<button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button>
<button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
<button id="normal-3-rounds">3 rounds</button>
<button id="normal-6-rounds">6 rounds</button>
<button id="normal-10-rounds">10 rounds</button>
</div>
<!-- countdown mode sub-modes -->
<div id="countdown-sub-modes" class="button-container hidden fade">
<button id="countdown-15s" onclick="setupCountdownMode(15)">15 seconds</button>
<button id="countdown-30s" onclick="setupCountdownMode(30)">30 seconds</button>
<button id="countdown-60s" onclick="setupCountdownMode(60)">60 seconds</button>
<button id="countdown-15s">15 seconds</button>
<button id="countdown-30s">30 seconds</button>
<button id="countdown-60s">60 seconds</button>
</div>
<!-- pre-round text -->
@@ -212,8 +216,8 @@
<!-- post game buttons -->
<div id="game-over-buttons" class="button-container hidden fade">
<button id="play-again" onclick="handlePlayAgain()">play again</button>
<button id="reset-game" onclick="handleReset()">back to main menu</button>
<button id="play-again">play again</button>
<button id="reset-game">back to main menu</button>
</div>
<!-- countdown text -->
@@ -299,14 +303,16 @@
// setup initialization
window.addEventListener("load", initGame);
async function initGame() {
// determine screen parameters + listen for changes
// begin listening for changes
addEventListeners();
// determine screen parameters
setParameters();
window.addEventListener("resize", handlePageResize);
// draw into animation
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
await drawCircle(2);
if (needsResizeAdjustment) {
// auto-reset screen if page was resized during animation
@@ -315,6 +321,7 @@
await fadeMainMenuIn();
// load saved high scores
if (localStorage.getItem("normalBestTimes") != null) {
normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes"));
}
@@ -323,6 +330,83 @@
}
}
function addEventListeners() {
window.addEventListener("resize", handlePageResize);
// prevent mobile browsers from tweaking when pressing+holding on mobile
document.addEventListener('touchstart', (e) => {e.preventDefault()}, {passive:false});
document.addEventListener('touchmove', (e) => {e.preventDefault()}, {passive:false});
document.addEventListener('touchend', (e) => {e.preventDefault()}, {passive:false});
document.addEventListener('touchcancel', (e) => {e.preventDefault()}, {passive:false});
// set each element's funtion.
// normal mode buttons
document.getElementById("normal-mode").addEventListener('click', (e) => {
e.preventDefault(); handleNormalMode();
}, { passive: false });
document.getElementById("normal-mode").addEventListener('touchend', (e) => {
e.preventDefault(); handleNormalMode();
}, { passive: false });
document.getElementById("normal-3-rounds").addEventListener('click', (e) => {
e.preventDefault(); setupNormalMode(3);
}, { passive: false });
document.getElementById("normal-3-rounds").addEventListener('touchend', (e) => {
e.preventDefault(); setupNormalMode(3);
}, { passive: false });
document.getElementById("normal-6-rounds").addEventListener('click', (e) => {
e.preventDefault(); setupNormalMode(6);
}, { passive: false });
document.getElementById("normal-6-rounds").addEventListener('touchend', (e) => {
e.preventDefault(); setupNormalMode(6);
}, { passive: false });
document.getElementById("normal-10-rounds").addEventListener('click', (e) => {
e.preventDefault(); setupNormalMode(10);
}, { passive: false });
document.getElementById("normal-10-rounds").addEventListener('touchend', (e) => {
e.preventDefault(); setupNormalMode(10);
}, { passive: false });
// countdown mode buttons
document.getElementById("countdown-mode").addEventListener('click', (e) => {
e.preventDefault(); handleCountdownMode();
}, { passive: false });
document.getElementById("countdown-mode").addEventListener('touchend', (e) => {
e.preventDefault(); handleCountdownMode();
}, { passive: false });
document.getElementById("countdown-15s").addEventListener('click', (e) => {
e.preventDefault(); setupCountdownMode(15);
}, { passive: false });
document.getElementById("countdown-15s").addEventListener('touchend', (e) => {
e.preventDefault(); setupCountdownMode(15);
}, { passive: false });
document.getElementById("countdown-30s").addEventListener('click', (e) => {
e.preventDefault(); setupCountdownMode(30);
}, { passive: false });
document.getElementById("countdown-30s").addEventListener('touchend', (e) => {
e.preventDefault(); setupCountdownMode(30);
}, { passive: false });
document.getElementById("countdown-60s").addEventListener('click', (e) => {
e.preventDefault(); setupCountdownMode(60);
}, { passive: false });
document.getElementById("countdown-60s").addEventListener('touchend', (e) => {
e.preventDefault(); setupCountdownMode(60);
}, { passive: false });
// gameover menu buttons
document.getElementById("play-again").addEventListener('click', (e) => {
e.preventDefault(); handlePlayAgain();
}, { passive: false });
document.getElementById("play-again").addEventListener('touchend', (e) => {
e.preventDefault(); handlePlayAgain();
}, { passive: false });
document.getElementById("reset-game").addEventListener('click', (e) => {
e.preventDefault(); handleReset();
}, { passive: false });
document.getElementById("reset-game").addEventListener('touchend', (e) => {
e.preventDefault(); handleReset();
}, { passive: false });
}
// helper function to determine screen-size + ratios for rendering targets
function setParameters(event) {
pageHeight = window.innerHeight;
@@ -375,16 +459,17 @@
}
// set game instruction text + fade it in
gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
gameText.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!";
gameText.style.opacity = "0";
gameText.style.display = "inline";
await sleep(500);
gameText.style.opacity = "100";
// enable player to start first round
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
center.addEventListener("touchend", handleHoverEnd);
center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false});
}
async function startNormalRound(roundNumber) {
@@ -466,10 +551,11 @@
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);
center.addEventListener("touchend", handleHoverEnd);
center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false});
normalBullseyeNeeded = true;
currentRound++;
}
@@ -500,16 +586,17 @@
}
// set game instruction text + fade it in
gameText.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!";
gameText.innerText = "hover on red circle to start the countdown, then click as many targets as possible!";
gameText.style.opacity = "0";
gameText.style.display = "inline";
await sleep(500);
gameText.style.opacity = "100";
// enable player to start game
center.addEventListener("mouseover", handleHoverStart);
center.addEventListener("mouseleave", handleHoverEnd);
center.addEventListener("touchend", handleHoverEnd);
center.addEventListener("mouseover", handleHoverStart(), {passive:false});
center.addEventListener("mouseleave", handleHoverEnd(), {passive:false});
center.addEventListener("touchstart", handleHoverEnd(), {passive:false});
center.addEventListener("touchend", handleHoverEnd(), {passive:false});
}
async function handleCountdownMode(e) {
@@ -523,6 +610,7 @@
}
async function handleHoverStart(e) {
e.preventDefault();
hovering = true;
hoverCount++;
@@ -680,7 +768,7 @@
if (gamemode == "normal") {
if (currentRound == 1) {
gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
gameText.innerText = "hover on red circle to start the countdown, then click the targets as fast as possible!";
}
else {
gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
@@ -688,7 +776,7 @@
}
else if (gamemode == "countdown") {
gameText.innerText = "hover on middle circle to start the countdown,\nthen click as many targets as possible!";
gameText.innerText = "hover on red circle to start the countdown, then click as many targets as possible!";
}
gameText.style.display = "inline";
@@ -872,6 +960,7 @@
target = generateTarget(x, y);
target.classList.add("target");
target.addEventListener("click", handleTargetClick);
target.addEventListener("touchend", handleTargetClick);
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
}
}