+
+
+
+
+
+
+
-
+
@@ -260,6 +265,10 @@
let title2 = document.getElementById("title2");
let gameModes = document.getElementById("game-modes");
+
+ let normalSubModes = document.getElementById("normal-sub-modes");
+ let countdownSubModes = document.getElementById("countdown-sub-modes");
+
let gameText = document.getElementById("game-text");
let gameOverButtons = document.getElementById("game-over-buttons");
@@ -318,40 +327,30 @@
console.log('frame: ' + frameWidth + ' x ' + frameHeight);
}
- async function handlePlayAgain(e) {
- // hide game over buttons
- gameOverButtons.style.display = "none";
- gameOverButtons.style.opacity = "0";
-
- // remove game text from DOM flow
- gameText.style.display = "none";
- gameText.style.opacity = "0";
-
- setParameters();
- center = generateTarget(xFrameAdjustment, yFrameAdjustment);
- center.id = "center";
- document.body.insertAdjacentElement("afterbegin", center);
-
- if (gamemode == "normal") {
- handleNormalMode(e);
- }
- else if (gamemode == "countdown") {
- handleCountdownMode(e);
- }
- else {
- alert("cannot play again, gamemode does not exit?");
- }
- }
-
async function handleNormalMode(e) {
gamemode = "normal";
- // setup mode parameters
+ // ensure mode parameters are reset
currentRound = 1;
totalTime = 0;
await fadeMainMenuOut();
+
+ normalSubModes.style.display = "flex";
+ normalSubModes.style.opacity = "100";
+ }
+ function setNormalRounds(numRounds) {
+ // fade buttons out
+ normalSubModes.style.opacity = "0";
+ sleep(500);
+ normalSubModes.style.display = "none";
+
+ maxNormalRounds = numRounds;
+ beginNormalMode();
+ }
+
+ async function beginNormalMode() {
// 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.style.opacity = "0";
@@ -365,6 +364,96 @@
center.addEventListener("touchend", handleHoverEnd);
}
+ async function startNormalRound(roundNumber) {
+ if (roundNumber > maxNormalRounds) {
+ handleReset({});
+ return;
+ }
+
+ // if user cancels hover countdown, don't start round
+ if (!await drawCountdown(hoverCount)) {
+ console.log("player canceled coundown");
+ return;
+ }
+
+ if (roundNumber == maxNormalRounds) {
+ numTargets = roundNumber * 2;
+ }
+ else {
+ numTargets = roundNumber;
+ }
+
+ // effectively begin the round
+ console.log("starting round " + roundNumber);
+ center.remove();
+
+ targetsClicked = 0;
+ roundTimeStart = Date.now();
+
+ randomTargetGenerator(numTargets);
+ while (targetsClicked < numTargets) {
+ await sleep(10);
+ if (targetsClicked == numTargets) break;
+ }
+
+ roundTimeEnd = Date.now();
+ roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
+ totalTime += roundSeconds;
+
+ currentRound++;
+
+ // auto-reset bullseye if page gets resized at all
+ if (needsResizeAdjustment) {
+ handlePageResize();
+ }
+
+ // ensure "DRAW" isn't still lingering on screen after round
+ draw.style.display = "none";
+ draw.style.opacity = "0";
+
+ // GAME OVER STUFF
+ if (roundNumber == maxNormalRounds) {
+ if (totalTime < bestNormalTime || bestNormalTime == 0) {
+ if (bestNormalTime == 0) {
+ alert("NEW FASTEST TIME!!! congratulations cowboy.");
+ }
+ else {
+ alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime.toFixed(3) + "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);
+
+ numTargets = 0;
+ targetsClicked =0;
+
+ gameOverButtons.style.display = "flex";
+ gameOverButtons.style.opacity = "100";
+ }
+ // NORMAL END OF ROUND STUFF
+ else {
+ center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+ center.id = "center";
+ document.body.insertAdjacentElement("afterbegin", center);
+
+ 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);
+ }
+
+ gameText.style.display = "inline";
+ gameText.style.opacity = "100";
+
+ return;
+ }
+
async function handleCountdownMode(e) {
gamemode = "countdown";
countdownBullseyeNeeded = true;
@@ -383,36 +472,6 @@
center.addEventListener("touchend", handleHoverEnd);
}
- async function handleReset(e) {
- // bullseye won't be on screen after a game
- setParameters();
- center = generateTarget(xFrameAdjustment, yFrameAdjustment);
- center.id = "center";
- document.body.insertAdjacentElement("afterbegin", center);
-
- // refresh game state variables
- gamemode = "";
- currentRound = 0;
-
- // hide buttons
- gameOverButtons.style.display = "none";
- gameOverButtons.style.opacity = "0";
-
- // remove game text from DOM flow
- gameText.style.display = "none";
- gameText.style.opacity = "0";
-
- // reintroduce main menu elements into DOM flow
- await sleep(800);
- await drawCircle(2);
- await fadeMainMenuIn();
-
- // auto-reset bullseye if page was resized during animation
- if (needsResizeAdjustment) {
- handlePageResize();
- }
- }
-
async function handleHoverStart(e) {
hovering = true;
hoverCount++;
@@ -436,7 +495,7 @@
async function startCountdownMode() {
// if user cancels hover countdown, don't start round
- if (!await normalModeRoundCountdown(hoverCount)) {
+ if (!await drawCountdown(hoverCount)) {
console.log("player canceled coundown");
return;
}
@@ -498,101 +557,10 @@
gameOverButtons.style.opacity = "100";
}
- async function startNormalRound(roundNumber) {
- if (roundNumber > 3) {
- handleReset({});
- return;
- }
+
- // if user cancels hover countdown, don't start round
- if (!await normalModeRoundCountdown(hoverCount)) {
- console.log("player canceled coundown");
- return;
- }
-
- 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);
- center.remove();
- targetsClicked = 0;
- roundTimeStart = Date.now();
- randomTargetGenerator(numTargets);
- while (targetsClicked < numTargets) {
- await sleep(10);
- if (targetsClicked == numTargets) break;
- }
- roundTimeEnd = Date.now();
- roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
- totalTime += roundSeconds;
-
- currentRound++;
-
- // auto-reset bullseye if page gets resized at all
- if (needsResizeAdjustment) {
- handlePageResize();
- }
- // even if no resize, bring bullseye back to screen
-
- // ensure "DRAW" isn't still lingering on screen after round
- draw.style.display = "none";
- draw.style.opacity = "0";
-
- // GAME OVER STUFF
- if (roundNumber == 3) {
- if (totalTime < bestNormalTime || bestNormalTime == 0) {
- if (bestNormalTime == 0) {
- alert("NEW FASTEST TIME!!! congratulations cowboy.");
- }
- else {
- alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime.toFixed(3) + "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);
-
- numTargets = 0;
- targetsClicked =0;
-
- gameOverButtons.style.display = "flex";
- gameOverButtons.style.opacity = "100";
- }
- // NORMAL END OF ROUND STUFF
- else {
- center = generateTarget(xFrameAdjustment, yFrameAdjustment);
- center.id = "center";
- document.body.insertAdjacentElement("afterbegin", center);
-
- 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);
- }
-
- gameText.style.display = "inline";
- gameText.style.opacity = "100";
-
- return;
- }
-
- /**
- * HELPER TO KICK-OFF COUNTDOWNS FROM HOVER
- */
- async function normalModeRoundCountdown(hoverNumber) {
+ /** HELPER TO KICK-OFF COUNTDOWNS FROM HOVER */
+ async function drawCountdown(hoverNumber) {
gameText.style.display = "none";
countingDown = true;
@@ -682,6 +650,62 @@
}
}
+async function handlePlayAgain(e) {
+ // hide game over buttons
+ gameOverButtons.style.display = "none";
+ gameOverButtons.style.opacity = "0";
+
+ // remove game text from DOM flow
+ gameText.style.display = "none";
+ gameText.style.opacity = "0";
+
+ setParameters();
+ center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+ center.id = "center";
+ document.body.insertAdjacentElement("afterbegin", center);
+
+ if (gamemode == "normal") {
+ handleNormalMode(e);
+ }
+ else if (gamemode == "countdown") {
+ handleCountdownMode(e);
+ }
+ else {
+ alert("cannot play again, gamemode does not exit?");
+ }
+ }
+
+
+ async function handleReset(e) {
+ // bullseye won't be on screen after a game
+ setParameters();
+ center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+ center.id = "center";
+ document.body.insertAdjacentElement("afterbegin", center);
+
+ // refresh game state variables
+ gamemode = "";
+ currentRound = 0;
+
+ // hide buttons
+ gameOverButtons.style.display = "none";
+ gameOverButtons.style.opacity = "0";
+
+ // remove game text from DOM flow
+ gameText.style.display = "none";
+ gameText.style.opacity = "0";
+
+ // reintroduce main menu elements into DOM flow
+ await sleep(800);
+ await drawCircle(2);
+ await fadeMainMenuIn();
+
+ // auto-reset bullseye if page was resized during animation
+ if (needsResizeAdjustment) {
+ handlePageResize();
+ }
+ }
+
function handleTargetClick(e) {
targetsClicked++;
e.target.remove();