-
Click start to play!
+ Click to play!
score: 0
@@ -22,6 +23,27 @@
0 seconds left.
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js
index dc08e7f6..9491af05 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,14 +2,16 @@ const holes = document.querySelectorAll('.hole');
const moles = document.querySelectorAll('.mole');
const startButton = document.querySelector('#start');
// TODO: Add the missing query selectors:
-const score; // Use querySelector() to get the score element
-const timerDisplay; // use querySelector() to get the timer element.
+const score = document.querySelector('#score'); // Use querySelector() to get the score element
+//Made changes to const score, added querySelector score.
+const timerDisplay = document.querySelector('#timer'); // use querySelector() to get the timer element.
+//Made changes to const timerDisplay, added querySelector timer.
let time = 0;
let timer;
let lastHole = 0;
let points = 0;
-let difficulty = "hard";
+let difficulty = "normal";
/**
* Generates a random integer within a range.
@@ -21,8 +23,17 @@ let difficulty = "hard";
*
*/
function randomInteger(min, max) {
- // return Math.floor(Math.random() * (max - min + 1)) + min;
+ return Math.floor(Math.random() * (max - min + 1)) + min;
}
+//ADDED THE RANDOMINTEGER FUNCTION, ALREADY IMPLEMENTED FOR ME, SELECTS RANDOM TIME THE MOLES COME OUT OF THEIR HOLES DURING THE GAME.
+
+console.log("A random integer between 0 and 10");
+console.log(randomInteger(0, 10));
+console.log("Another random integer between 0 and 10");
+console.log(randomInteger(0, 10));
+console.log("A random number between 600 and 1200");
+console.log(randomInteger(600, 1200));
+//ADDED RANDON INTETGERS
/**
* Sets the time delay given a difficulty parameter.
@@ -41,7 +52,16 @@ function randomInteger(min, max) {
*/
function setDelay(difficulty) {
// TODO: Write your code here.
-
+ if (difficulty === "easy") {
+ return 1500;
+ // SETTING DIFFICULTY FOR EASY
+ } if (difficulty === "normal") {
+ return 1000;
+ // SETTING DIFFICULTY FOR NORMAL
+ } if (difficulty === "hard") {
+ return randomInteger(600, 1200);
+ //SETTING DIFFICULTY FOR HARD
+ }
}
/**
@@ -60,7 +80,13 @@ function setDelay(difficulty) {
*/
function chooseHole(holes) {
// TODO: Write your code here.
-
+ const index = randomInteger(0,8);
+ const hole = holes[index];
+ if (hole === lastHole) {
+ return chooseHole(holes);
+ }
+ lastHole = hole;
+ return hole;
}
/**
@@ -85,7 +111,13 @@ function chooseHole(holes) {
*/
function gameOver() {
// TODO: Write your code here
-
+ if (time > 0){
+ let timeoutId = showUp();
+ return timeoutId;
+ } else {
+ let gameStopped = stopGame();
+ return gameStopped;
+ }
}
/**
@@ -98,8 +130,8 @@ function gameOver() {
*
*/
function showUp() {
- let delay = 0; // TODO: Update so that it uses setDelay()
- const hole = 0; // TODO: Update so that it use chooseHole()
+ let delay = setDelay(difficulty); // TODO: Update so that it uses setDelay()
+ const hole = chooseHole(holes); // TODO: Update so that it use chooseHole()
return showAndHide(hole, delay);
}
@@ -113,12 +145,12 @@ function showUp() {
*/
function showAndHide(hole, delay){
// TODO: call the toggleVisibility function so that it adds the 'show' class.
-
+ toggleVisibility(hole);
const timeoutID = setTimeout(() => {
// TODO: call the toggleVisibility function so that it removes the 'show' class when the timer times out.
-
+ toggleVisibility(hole);
gameOver();
- }, 0); // TODO: change the setTimeout delay to the one provided as a parameter
+ }, 1000); // TODO: change the setTimeout delay to the one provided as a parameter
return timeoutID;
}
@@ -130,7 +162,7 @@ function showAndHide(hole, delay){
*/
function toggleVisibility(hole){
// TODO: add hole.classList.toggle so that it adds or removes the 'show' class.
-
+ hole.classList.toggle('show');
return hole;
}
@@ -146,7 +178,8 @@ function toggleVisibility(hole){
*/
function updateScore() {
// TODO: Write your code here
-
+ points++;
+ score.textContent = points;
return points;
}
@@ -159,8 +192,8 @@ function updateScore() {
*/
function clearScore() {
// TODO: Write your code here
- // points = 0;
- // score.textContent = points;
+ points = 0;
+ score.textContent = points;
return points;
}
@@ -172,7 +205,10 @@ function clearScore() {
function updateTimer() {
// TODO: Write your code here.
// hint: this code is provided to you in the instructions.
-
+ if (time > 0) {
+ time -= 1;
+ timerDisplay.textContent = time;
+ }
return time;
}
@@ -184,7 +220,7 @@ function updateTimer() {
*/
function startTimer() {
// TODO: Write your code here
- // timer = setInterval(updateTimer, 1000);
+ setInterval(updateTimer, 1000);
return timer;
}
@@ -197,8 +233,8 @@ function startTimer() {
*
*/
function whack(event) {
- // TODO: Write your code here.
- // call updateScore()
+ // TODO: Write your code here
+ updateScore();
return points;
}
@@ -209,7 +245,8 @@ function whack(event) {
*/
function setEventListeners(){
// TODO: Write your code here
-
+ moles.forEach(
+ mole => mole.addEventListener('click', whack));
return moles;
}
@@ -243,8 +280,13 @@ function stopGame(){
*
*/
function startGame(){
- //setDuration(10);
- //showUp();
+ showUp();
+ points = 0;
+ clearScore();
+ setDuration(30);
+ startTimer();
+ setEventListeners();
+
return "game started";
}
diff --git a/src/styles.css b/src/styles.css
index 551996b1..4057ab50 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -12,26 +12,35 @@ html {
h1 {
text-align: center;
- font-size: 90px;
- font-family: "Comic Sans MS", "Comic Sans", cursive;
- color: white;
+ font-size: 100px;
+ font-family: "arial", "Comic Sans MS", "Comic Sans", cursive;
+ color: Blue;
-webkit-text-stroke: 2px black;
}
h2 {
text-align: center;
- font-size: 40px;
- color: white;
+ font-size: 50px;
+ font-family: Times, Times New Roman, serif;
+ color: cornsilk;
-webkit-text-stroke: 1px black;
}
#start {
text-align: center;
- font-size: 30px;
+ font-size: 40px;
+}
+
+.button {
+ align-items: center;
+}
+
+#score {
+ color: green;
}
#timer{
- color: white;
+ color: red;
}
.grid {