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) { @media screen and (max-width: 1024px) {
html { html {
font-size: 32px; font-size: 32px;
overflow: hidden;
} }
body { body {
padding: .5rem .25rem; padding: .5rem .25rem;
@@ -163,6 +164,9 @@
#game-modes { #game-modes {
gap: .5rem; gap: .5rem;
} }
#normal-sub-modes, #countdown-sub-modes, #game-over-buttons {
gap: .5rem;
}
#game-text { #game-text {
font-size: .8rem; font-size: .8rem;
} }
@@ -188,23 +192,23 @@
<!-- gamemode menu buttons--> <!-- gamemode menu buttons-->
<div id="game-modes" class="button-container hidden fade"> <div id="game-modes" class="button-container hidden fade">
<button id="normal" onclick="handleNormalMode()">normal</button> <button id="normal-mode">normal</button>
<button id="countdown" onclick="handleCountdownMode()">countdown</button> <button id="countdown-mode">countdown</button>
<!-- <button id="infinite">infinite</button> --> <!-- <button id="infinite">infinite</button> -->
</div> </div>
<!-- normal mode sub-modes --> <!-- normal mode sub-modes -->
<div id="normal-sub-modes" class="button-container hidden fade"> <div id="normal-sub-modes" class="button-container hidden fade">
<button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button> <button id="normal-3-rounds">3 rounds</button>
<button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button> <button id="normal-6-rounds">6 rounds</button>
<button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button> <button id="normal-10-rounds">10 rounds</button>
</div> </div>
<!-- countdown mode sub-modes --> <!-- countdown mode sub-modes -->
<div id="countdown-sub-modes" class="button-container hidden fade"> <div id="countdown-sub-modes" class="button-container hidden fade">
<button id="countdown-15s" onclick="setupCountdownMode(15)">15 seconds</button> <button id="countdown-15s">15 seconds</button>
<button id="countdown-30s" onclick="setupCountdownMode(30)">30 seconds</button> <button id="countdown-30s">30 seconds</button>
<button id="countdown-60s" onclick="setupCountdownMode(60)">60 seconds</button> <button id="countdown-60s">60 seconds</button>
</div> </div>
<!-- pre-round text --> <!-- pre-round text -->
@@ -212,8 +216,8 @@
<!-- post game buttons --> <!-- post game buttons -->
<div id="game-over-buttons" class="button-container hidden fade"> <div id="game-over-buttons" class="button-container hidden fade">
<button id="play-again" onclick="handlePlayAgain()">play again</button> <button id="play-again">play again</button>
<button id="reset-game" onclick="handleReset()">back to main menu</button> <button id="reset-game">back to main menu</button>
</div> </div>
<!-- countdown text --> <!-- countdown text -->
@@ -299,14 +303,16 @@
// setup initialization // setup initialization
window.addEventListener("load", initGame); window.addEventListener("load", initGame);
async function initGame() { async function initGame() {
// determine screen parameters + listen for changes // begin listening for changes
addEventListeners();
// determine screen parameters
setParameters(); setParameters();
window.addEventListener("resize", handlePageResize);
// draw into animation
center = generateTarget(xFrameAdjustment, yFrameAdjustment); center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center"; center.id = "center";
document.body.insertAdjacentElement("afterbegin", center); document.body.insertAdjacentElement("afterbegin", center);
await drawCircle(2); await drawCircle(2);
if (needsResizeAdjustment) { if (needsResizeAdjustment) {
// auto-reset screen if page was resized during animation // auto-reset screen if page was resized during animation
@@ -315,6 +321,7 @@
await fadeMainMenuIn(); await fadeMainMenuIn();
// load saved high scores
if (localStorage.getItem("normalBestTimes") != null) { if (localStorage.getItem("normalBestTimes") != null) {
normalBestTimes = JSON.parse(localStorage.getItem("normalBestTimes")); 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 // helper function to determine screen-size + ratios for rendering targets
function setParameters(event) { function setParameters(event) {
pageHeight = window.innerHeight; pageHeight = window.innerHeight;
@@ -375,16 +459,17 @@
} }
// set game instruction text + fade it in // 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.opacity = "0";
gameText.style.display = "inline"; gameText.style.display = "inline";
await sleep(500); await sleep(500);
gameText.style.opacity = "100"; gameText.style.opacity = "100";
// enable player to start first round // enable player to start first round
center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseover", handleHoverStart, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd); center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false});
} }
async function startNormalRound(roundNumber) { 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); 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; 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, {passive:false});
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd); center.addEventListener("touchstart", handleHoverEnd, {passive:false});
center.addEventListener("touchend", handleHoverEnd, {passive:false});
normalBullseyeNeeded = true; normalBullseyeNeeded = true;
currentRound++; currentRound++;
} }
@@ -500,16 +586,17 @@
} }
// set game instruction text + fade it in // 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.opacity = "0";
gameText.style.display = "inline"; gameText.style.display = "inline";
await sleep(500); await sleep(500);
gameText.style.opacity = "100"; gameText.style.opacity = "100";
// enable player to start game // enable player to start game
center.addEventListener("mouseover", handleHoverStart); center.addEventListener("mouseover", handleHoverStart(), {passive:false});
center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("mouseleave", handleHoverEnd(), {passive:false});
center.addEventListener("touchend", handleHoverEnd); center.addEventListener("touchstart", handleHoverEnd(), {passive:false});
center.addEventListener("touchend", handleHoverEnd(), {passive:false});
} }
async function handleCountdownMode(e) { async function handleCountdownMode(e) {
@@ -523,6 +610,7 @@
} }
async function handleHoverStart(e) { async function handleHoverStart(e) {
e.preventDefault();
hovering = true; hovering = true;
hoverCount++; hoverCount++;
@@ -680,7 +768,7 @@
if (gamemode == "normal") { if (gamemode == "normal") {
if (currentRound == 1) { 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 { else {
gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "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;
@@ -688,7 +776,7 @@
} }
else if (gamemode == "countdown") { 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"; gameText.style.display = "inline";
@@ -872,6 +960,7 @@
target = generateTarget(x, y); target = generateTarget(x, y);
target.classList.add("target"); target.classList.add("target");
target.addEventListener("click", handleTargetClick); target.addEventListener("click", handleTargetClick);
target.addEventListener("touchend", handleTargetClick);
document.getElementById("frame").insertAdjacentElement("afterbegin", target); document.getElementById("frame").insertAdjacentElement("afterbegin", target);
} }
} }