path: root/quickdraw-game.html

<!DOCTYPE html>
<html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">

        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                font-family: sans-serif;
            }
            :root {
              --bg: #161616;
            }
            html {
                height: 100vh;
                width: 100vw;
                background-color: var(--bg);
                font-size: 24px;
                overflow-x: hidden;
            }
            body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100vw;
            }
            #frame {
                width: 60%;
                height: 75%;
                /** border: 1px solid white; */
            }
            #center {
                height: 50px;
                width: 50px;
                background-color: var(--bg);
                border: 5px solid red;
                border-radius: 50%;
                position: absolute; 
                border-radius: 50%;
            }
            
            .target {
                height: 50px;
                width: 50px;
                background-color: red;
                position: absolute;
                border-radius: 50%;
            }
            .target:active {
              background-color: orange;
            }

            .hidden {
              display: none;
              opacity: 0;
            }
            .fade {
              transition: opacity 1s;
            }

            .title {
              font-weight: bold;
              font-size: 2rem;
            }

            #text-box {
                display: flex;
                flex-direction: row;
                align-content: end;
                justify-content: space-evenly;
                text-align: center;
                color: red;
                width: 100%;
                min-height: 2rem;
                line-height: 1rem;
                margin-top: 2rem;
            }

            @media screen and (max-width: 750px) {
              html {
                font-size: 32px;
              }
              #text-box {
                flex-direction: column;
                align-items: center;
              }
              .text  { font-size: .5rem; }
              .title { font-size: 2rem; }
            }

        </style>
    </head>
    <body>

        <div id="frame">
          <!-- where the targets + bullseye are drawn -->
        </div>

        <!-- where we place text + buttons -->
        <div id="text-box">
          
          <!-- intro related -->
           <div style="display: flex; gap: 1rem;">
            <span id="intro1" class="hidden title">QUICK</span>
            <span id="intro2" class="hidden title">DRAW</span>
          </div>

          <!-- gamemode menu buttons-->
          <div id="game-modes" class="hidden fade">
            <button id="normal" onclick="handleNormalMode()">normal</button>
            <button id="countdown">countdown</button>
            <!-- <button id="infinite">infinite</button> -->
          </div>

          <!-- pre-round text -->
          <span id="gameText" class="hidden fade"></span>

          <!-- post round text -->
          <span id="round-end" class="hidden fade"></span>

          <!-- countdown text -->
          <span id="ready" class="hidden title">READY?</span>
          <span id="countdown3" class="hidden title">3</span>
          <span id="countdown2" class="hidden title">2</span>
          <span id="countdown1" class="hidden title">1</span>
          <span id="draw" class="hidden title">DRAW!</span>

        </div>

        <script>
          let gameBorderWidth = 1;
          let targetWidth = 50;
          let targetHeight = 50;

          let pageHeight;
          let pageWidth;

          let frameElement;
          let frameRect;
          let frameHeight;
          let frameWidth;

          let center;
          let ratio;

          let xFrameAdjustment;
          let yFrameAdjustment;

          let hovering = false;

          let hoverCount = 0; // number of times the cursor has hovered over bullseye. used to cleanly handle round starting / cancelling

          let targetsClickedThisRound = 0;
          let gamemode = "";  // can be: "normal", "countdown", "infinite"
          let roundmode = ""; // if gamemode is "countdown" or "infinite", can be: "rounds" or "frenzy"
          
          let currentRound = 0;
          let countingDown = false;

          let totalTime = 0.0;
          let roundTimeStart = 0;
          let roundTimeEnd = 0;
          let roundSeconds = 0.0;

          let bestNormalTime = "none";

          // text elements
          let ready = document.getElementById("ready");
          let intro1 = document.getElementById("intro1");
          let intro2 = document.getElementById("intro2");
          let gameText = document.getElementById("gameText");

          let one = document.getElementById("countdown1");
          let two = document.getElementById("countdown2");
          let three = document.getElementById("countdown3");

          let draw = document.getElementById("draw");

          window.addEventListener("load", initGame);

          function setParameters(event) {
            pageHeight = window.innerHeight;
            pageWidth = window.innerWidth;

            frameElement = document.getElementById("frame");
            frameRect = frameElement.getBoundingClientRect();
            frameHeight = frameElement.offsetHeight;
            frameWidth = frameElement.offsetWidth;

            // ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2));
            ratio = frameHeight / frameWidth;
            
            // adjustments to find center of frame in absolute coords (for origin of target cirlce)
            xFrameAdjustment = ((frameWidth / 2) + frameRect.left) - (targetWidth / 2);
            yFrameAdjustment = ((frameHeight / 2) + frameRect.top) - (targetWidth / 2);

            // init logs:
            console.log('page: ' + pageWidth + ' x ' + pageHeight);
            console.log('frame: ' + frameWidth + ' x ' + frameHeight);
          }

          async function initGame() {
            setParameters();

            center = generateTarget(xFrameAdjustment, yFrameAdjustment);
            center.id = "center";
            document.body.insertAdjacentElement("afterbegin", center);

            // await drawTargetsInCircle(2);
            await drawTargetsInCircle(false);

            // insert intro elements into document flow
            intro1.style.display = "inline";
            intro2.style.display = "inline";

            // reveal intro elements
            intro1.style.opacity = "100";
            await sleep(500);
            intro2.style.opacity = "100";
            await sleep(1500);

            intro1.classList.add("fade");
            intro2.classList.add("fade");

            intro1.style.opacity = "0";
            intro2.style.opacity = "0";

            await sleep(1000);

            intro1.style.display = "none";
            intro2.style.display = "none";

            window.addEventListener("resize", handlePageResize);

            document.getElementById("game-modes").style.display = "inline";
            await sleep(500);
            document.getElementById("game-modes").style.opacity = "100";

            if (localStorage.getItem("bestNormalTime") != null) {
              bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime"));
            }
          }

          async function handleNormalMode(e) {
            gamemode = "normal";
            console.log("game mode: " + gamemode);

            currentRound = 1;
            totalTime = 0;

            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 = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
            gameText.style.opacity = "0";
            gameText.style.display = "inline";
            await sleep(500);
            gameText.style.opacity = "100";

          }

          async function handleReset(e) {
            currentRound = 0;
            center.removeEventListener("mouseover", handleReset);
            gameText.style.display = "none";
            gameText.style.opacity = "0";

            intro1.style.display = "inline";
            intro2.style.display = "inline";
            intro1.style.opacity = "100";
            intro2.style.opacity = "100";

            document.getElementById("game-modes").style.display = "inline";
            await sleep(500);
            document.getElementById("game-modes").style.opacity = "100"; 
            await drawTargetsInCircle(2);
          }

          async function handleHoverStart(e) {
            hovering = true;
            hoverCount++;

            console.log('hover count: ' + hoverCount);
            console.log('current round: ' + currentRound);

            frameElement.replaceChildren();

            // intro1.style.display = "none";
            // intro2.style.display = "none";
            gameText.style.display = "none";

            if (gamemode == "normal") {
              await startNormalRound(currentRound);
            }
            // if (infinityMode)

          }

          async function startNormalRound(roundNumber) {
            if (roundNumber > 3) {
              handleReset({});
              return;
            }

            if (!await startCountdown(hoverCount)) {
             // if user canceled hover, don't continue round
             console.log("player canceled coundown");
             return;
            }

            let numTargets = 0;
            if (roundNumber == 1) {
              numTargets = 1;
            }
            else if (roundNumber == 2) {
              numTargets = 3;
            }
            else if (roundNumber == 3) {
              numTargets = 5;
            }

            // effectively begin the round
            console.log("starting round " + roundNumber);
            document.getElementById("center").remove();
            targetsClickedThisRound = 0;
            roundTimeStart = Date.now();
            placeTarget(numTargets);
            while (targetsClickedThisRound < numTargets) {
              await sleep(10);
              if (targetsClickedThisRound == numTargets) break;
            }
            roundTimeEnd = Date.now();
            roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
            totalTime += roundSeconds;

            currentRound++;

            // bring bullseye back to screen
            center = generateTarget(xFrameAdjustment, yFrameAdjustment);
            center.id = "center";
            document.body.insertAdjacentElement("afterbegin", center);

            // ensure draw isn't still lingering on screen
            draw.style.display = "none";
            draw.style.opacity = "0";

            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.toFixed(3) + 
                "s\nTOTAL:   " + totalTime.toFixed(3) + 
                "s\nBEST SCORE: " + bestNormalTime.toFixed(3) + 
                "s\nhover on circle to go back to main menu..";
              center.addEventListener("mouseover", handleReset);
            }
            else {
              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);
            }
 

            gameText.style.display = "inline";
            gameText.style.opacity = "100";

            return;
          }



          async function startCountdown(hoverNumber) {
            gameText.style.display = "none";
            countingDown = true;

            // this if-check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
            if (!hovering || hoverNumber != hoverCount) return false;
            ready.style.display = "inline";
            ready.style.opacity = "100";
            await sleep(1000);

            if (!hovering || hoverNumber != hoverCount) return false;
            ready.style.display = "none";
            ready.style.opacity = "0";
            
            if (!hovering || hoverNumber != hoverCount) return false;
            one.style.opacity = "0";
            two.style.opacity = "0";
            three.style.opacity = "0";

            if (!hovering || hoverNumber != hoverCount) return false;
            one.style.display = "inline";
            two.style.display = "inline";
            three.style.display = "inline";

            if (!hovering || hoverNumber != hoverCount) return false;
            three.style.opacity = "100";
            await sleep(1000);
            
            if (!hovering || hoverNumber != hoverCount) return false;
            two.style.opacity = "100";
            await sleep(1000);
            
            if (!hovering || hoverNumber != hoverCount) return false;
            one.style.opacity = "100";
            await sleep(1000);

            if (!hovering || hoverNumber != hoverCount) return false;
            one.style.display = "none";
            two.style.display = "none";
            three.style.display = "none";

            one.style.opacity = "0";
            two.style.opacity = "0";
            three.style.opacity = "0";

            draw.style.display = "inline";
            draw.style.opacity = "100";

            countingDown = false;
            setTimeout(() => {draw.style.display = "none"; draw.style.opacity = "0"; }, 1000);
            return true;
          }

          function handleHoverEnd(e) {
            hovering = false;

            if (countingDown) {
              ready.style.display = "none";
              one.style.display = "none";
              two.style.display = "none";
              three.style.display = "none";
              draw.style.display = "none";

              ready.style.opacity = "0";
              one.style.opacity = "0";
              two.style.opacity = "0";
              three.style.opacity = "0";

              draw.style.opacity = "0";
              
              if (currentRound <= 1) {
                drawTargetsInCircle();
                gameText.innerText = "hover on middle circle to start the countdown,\nthen 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;
              }
              gameText.style.display = "inline";
              countingDown = false;
            }
          }

          function handleTargetClick(e) {
            targetsClickedThisRound++;
            e.target.remove();
          }

          function handlePageResize(event) {
            frameElement.replaceChildren();
            setParameters();
            
            document.getElementById("center").remove();
            center = generateTarget(xFrameAdjustment, yFrameAdjustment);
            center.id = "center";
            document.body.insertAdjacentElement("afterbegin", center);

            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(drawDurationSeconds) {
            let r, x, y;
            let radians;
            let target;
            for (let i = 0; i < 360; i = i + 2) {
              r = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2);
              radians = degreesToRadians(i);
              x = (r * 1 * Math.cos(radians)) + xFrameAdjustment;
              y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;

              target = generateTarget(x, y);
              document.getElementById("frame").insertAdjacentElement("afterbegin", target);
              
              if (drawDurationSeconds) await sleep((drawDurationSeconds * 1000) / 180);
            }
          }


          function degreesToRadians(degrees) {
            return degrees * (Math.PI / 180)
          }
          
          // function to place a target somewhere random on the circle
          function placeTarget(numTargets) {
            let radians, radius
            let x, y;
            let target;
            for (let i = 0; i < numTargets; i++){
              radians = degreesToRadians(getRandomInt(0, 360));
              radius = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2); 
              x = (radius * 1 * Math.cos(radians)) + xFrameAdjustment;
              y = (radius * ratio * Math.sin(radians)) + yFrameAdjustment;
  
              target = generateTarget(x, y);
              target.classList.add("target");
              target.addEventListener("click", handleTargetClick);
              document.getElementById("frame").insertAdjacentElement("afterbegin", target);
            }
          }
          
          function generateTarget(x, y) {
              const target = document.createElement("div");
              target.classList.add("target");
              target.style.top = y +'px';
              target.style.left = x + 'px';
              // console.log(target);
              return target;
          }

          function getRandomInt(min, max) {
              const minCeiled = Math.ceil(min);
              const maxFloored = Math.floor(max);
              return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive
          }

          function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
          }
        </script>
    </body>
</html>