diff --git a/quickdraw-game.html b/quickdraw-game.html index f5fff87..11ef5f4 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -29,7 +29,7 @@ width: 100vw; padding: 1rem; } - #frame { + #target-frame { width: 60%; height: 75%; /** border: 1px solid white; */ @@ -95,7 +95,7 @@ gap: 1rem; } - #text-container { + #text-frame { display: flex; flex-direction: column; justify-content: flex-end; @@ -155,16 +155,17 @@ padding: .5rem .25rem; max-height: 80vh; } - #frame { + #target-frame { width: 90%; } - #text-container { + #text-frame { margin-top: 1.25rem; } #game-modes { gap: .5rem; } #normal-sub-modes, #countdown-sub-modes, #game-over-buttons { + flex-direction: column; gap: .5rem; } #game-text { @@ -178,11 +179,11 @@ -
+
-
+
@@ -238,7 +239,7 @@ let pageHeight; let pageWidth; - let frameElement; + let targetFrame; let frameRect; let frameHeight; let frameWidth; @@ -412,10 +413,10 @@ pageHeight = window.innerHeight; pageWidth = window.innerWidth; - frameElement = document.getElementById("frame"); - frameRect = frameElement.getBoundingClientRect(); - frameHeight = frameElement.offsetHeight; - frameWidth = frameElement.offsetWidth; + targetFrame = document.getElementById("target-frame"); + frameRect = targetFrame.getBoundingClientRect(); + frameHeight = targetFrame.offsetHeight; + frameWidth = targetFrame.offsetWidth; // ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2)); ratio = frameHeight / frameWidth; @@ -467,9 +468,11 @@ // enable player to start first round center.addEventListener("mouseover", handleHoverStart, {passive:false}); + center.addEventListener("touchstart", handleHoverStart, {passive:false}); center.addEventListener("mouseleave", handleHoverEnd, {passive:false}); - center.addEventListener("touchstart", handleHoverEnd, {passive:false}); center.addEventListener("touchend", handleHoverEnd, {passive:false}); + center.addEventListener("touchmove", handleHoverEnd, {passive:false}); + center.addEventListener("touchcancel", handleHoverEnd, {passive:false}); } async function startNormalRound(roundNumber) { @@ -552,9 +555,11 @@ gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound; center.addEventListener("mouseover", handleHoverStart, {passive:false}); + center.addEventListener("touchstart", handleHoverStart, {passive:false}); center.addEventListener("mouseleave", handleHoverEnd, {passive:false}); - center.addEventListener("touchstart", handleHoverEnd, {passive:false}); center.addEventListener("touchend", handleHoverEnd, {passive:false}); + center.addEventListener("touchmove", handleHoverEnd, {passive:false}); + center.addEventListener("touchcancel", handleHoverEnd, {passive:false}); normalBullseyeNeeded = true; currentRound++; @@ -593,10 +598,12 @@ gameText.style.opacity = "100"; // enable player to start game - center.addEventListener("mouseover", handleHoverStart(), {passive:false}); - center.addEventListener("mouseleave", handleHoverEnd(), {passive:false}); - center.addEventListener("touchstart", handleHoverEnd(), {passive:false}); - center.addEventListener("touchend", handleHoverEnd(), {passive:false}); + center.addEventListener("mouseover", handleHoverStart, {passive:false}); + center.addEventListener("touchstart", handleHoverStart, {passive:false}); + center.addEventListener("mouseleave", handleHoverEnd, {passive:false}); + center.addEventListener("touchend", handleHoverEnd, {passive:false}); + center.addEventListener("touchmove", handleHoverEnd, {passive:false}); + center.addEventListener("touchcancel", handleHoverEnd, {passive:false}); } async function handleCountdownMode(e) { @@ -618,7 +625,7 @@ console.log('current round: ' + currentRound); // remove all targets - frameElement.replaceChildren(); + targetFrame.replaceChildren(); gameText.style.display = "none"; if (gamemode == "normal") { @@ -667,7 +674,7 @@ } // ensure no targets are still on screen after timer ends - frameElement.replaceChildren(); + targetFrame.replaceChildren(); // show end of round text. if high score, alert player and save if (targetsClicked > highScore || highScore == 0) { @@ -852,7 +859,7 @@ return; } - frameElement.replaceChildren(); + targetFrame.replaceChildren(); setParameters(); // if at main menu, move bullseye @@ -887,7 +894,7 @@ target = generateTarget(x, y); target.classList.add("red-dot"); - document.getElementById("frame").insertAdjacentElement("afterbegin", target); + targetFrame.insertAdjacentElement("afterbegin", target); if (drawDurationSeconds) { target.classList.add("fade"); @@ -910,7 +917,7 @@ // make title elements actually visible title1.style.opacity = "100"; - await sleep(500); + await sleep(250); title2.style.opacity = "100"; await sleep(1500); @@ -933,7 +940,7 @@ title2.style.opacity = "0"; gameModes.style.opacity = "0"; await sleep(500); - frame.replaceChildren(); + targetFrame.replaceChildren(); titleContainer.style.display = "none"; gameModes.style.display = "none"; @@ -961,7 +968,7 @@ target.classList.add("target"); target.addEventListener("click", handleTargetClick); target.addEventListener("touchend", handleTargetClick); - document.getElementById("frame").insertAdjacentElement("afterbegin", target); + targetFrame.insertAdjacentElement("afterbegin", target); } }