diff --git a/quickdraw-game.html b/quickdraw-game.html
index 53d9ebf..0d456bd 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -35,6 +35,7 @@
width: 20px;
background-color: red;
position: absolute;
+ border-radius: 50%;
}
.target {
@@ -103,9 +104,10 @@
-
-
-
+
+
+
+
@@ -157,6 +159,8 @@
let roundTimeEnd = 0;
let roundSeconds = 0.0;
+ let bestNormalTime = "none";
+
// text elements
let intro1 = document.getElementById("intro1");
let intro2 = document.getElementById("intro2");
@@ -198,7 +202,7 @@
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
- await drawTargetsInCircle(false);
+ await drawTargetsInCircle(2);
// insert intro elements into document flow
intro1.style.display = "inline";
@@ -226,9 +230,13 @@
document.getElementById("game-modes").style.display = "inline";
await sleep(500);
document.getElementById("game-modes").style.opacity = "100";
+
+ if (localStorage.getItem("bestNormalTime") != null) {
+ bestNormalTime = localStorage.getItem("bestNormalTime");
+ }
}
- function handleNormalMode(e) {
+ async function handleNormalMode(e) {
gamemode = "normal";
console.log("game mode: " + gamemode);
@@ -238,17 +246,33 @@
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 = "click the targets as quickly as possible!\nhover on bullseye to start.";
+ gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
+ gameText.style.opacity = "0";
gameText.style.display = "inline";
+ await sleep(500);
gameText.style.opacity = "100";
}
+ async function handleReset(e) {
+ currentRound = 0;
+ center.style.backgroundColor = "red";
+ center.removeEventListener("mouseover", handleReset);
+ gameText.style.display = "none";
+ gameText.style.opacity = "0";
+ await drawTargetsInCircle();
+ document.getElementById("game-modes").style.display = "inline";
+ await sleep(500);
+ document.getElementById("game-modes").style.opacity = "100";
+ }
+
async function handleHoverStart(e) {
e.target.style.backgroundColor = "green";
@@ -265,10 +289,6 @@
gameText.style.display = "none";
if (gamemode == "normal") {
- if (currentRound > 3) {
- console.log("hover attempt after round 3");
- return;
- }
await startNormalRound(currentRound);
}
// if (infinityMode)
@@ -276,17 +296,18 @@
}
async function startNormalRound(roundNumber) {
+ if (roundNumber > 3) {
+ handleReset(0);
+ return;
+ }
+
if (!await startCountdown(hoverCount)) {
// if user canceled hover, don't continue round
console.log("player canceled coundown");
return;
}
-
- console.log("starting round " + roundNumber);
- targetsClickedThisRound = 0;
let numTargets = 0;
-
if (roundNumber == 1) {
numTargets = 1;
}
@@ -296,9 +317,11 @@
else if (roundNumber == 3) {
numTargets = 5;
}
- else { alert("max number of rounds hit. should not be seeing this"); }
// effectively begin the round
+ console.log("starting round " + roundNumber);
+ document.getElementById("center").remove();
+ targetsClickedThisRound = 0;
roundTimeStart = Date.now();
placeTarget(numTargets);
while (targetsClickedThisRound < numTargets) {
@@ -311,8 +334,33 @@
currentRound++;
- console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\nhover on bullseye to start round " + currentRound);
- gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound;
+ // bring bullseye back to screen
+ center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+ center.id = "center";
+ document.body.insertAdjacentElement("afterbegin", center);
+
+ 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 +
+ "s\nTOTAL: " + totalTime +
+ "s\nBEST SCORE: " + bestNormalTime +
+ "s\nhover on circle to go back to main menu..";
+ center.addEventListener("mouseover", handleReset);
+ }
+ else {
+ console.log("ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "\nhover on circle to start round " + currentRound);
+ gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on circle to start round " + currentRound;
+
+ center.addEventListener("mouseover", handleHoverStart);
+ center.addEventListener("mouseleave", handleHoverEnd);
+ }
+
+
gameText.style.display = "inline";
gameText.style.opacity = "100";
@@ -383,11 +431,12 @@
draw.style.opacity = "0";
- if (currentRound == 1) {
- gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
+ if (currentRound <= 1) {
+ drawTargetsInCircle();
+ gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
}
else {
- gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on bullseye to start round " + currentRound;
+ gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL: " + totalTime + "s\nhover on circle to start round " + currentRound;
}
gameText.style.display = "inline";
countingDown = false;
@@ -407,18 +456,21 @@
center = generateTarget(xFrameAdjustment, yFrameAdjustment);
center.id = "center";
document.body.insertAdjacentElement("afterbegin", center);
- center.addEventListener("mouseover", handleHoverStart);
- center.addEventListener("mouseleave", handleHoverEnd);
-
- if (currentRound == 0) {
- drawTargetsInCircle(false);
+
+ 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(animate) {
+ async function drawTargetsInCircle(drawDurationSeconds) {
let r, x, y;
let radians;
let target;
@@ -431,7 +483,7 @@
target = generateTarget(x, y);
document.getElementById("frame").insertAdjacentElement("afterbegin", target);
- if (animate) await sleep(15);
+ if (drawDurationSeconds) await sleep((drawDurationSeconds * 1000) / 180);
}
}