diff --git a/quickdraw-game.html b/quickdraw-game.html index fd8bb13..f5fff87 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -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 @@
@@ -212,8 +216,8 @@ @@ -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); } }