diff --git a/Hunt-The-Mole-Game/index.html b/Hunt-The-Mole-Game/index.html index 48846a7e6..fce1677a6 100644 --- a/Hunt-The-Mole-Game/index.html +++ b/Hunt-The-Mole-Game/index.html @@ -1,45 +1,43 @@ - - - - - - + + + + + Whack a Mole! - + - -

Whack-a-mole!

0 - + +

Whack-a-mole!

+ 0 +
-
-
-
- -
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
-
-
-
+
+
+
+
+
+
- - - \ No newline at end of file + + diff --git a/Hunt-The-Mole-Game/script.js b/Hunt-The-Mole-Game/script.js index 3e4b41063..4c69766e8 100644 --- a/Hunt-The-Mole-Game/script.js +++ b/Hunt-The-Mole-Game/script.js @@ -1,3 +1,4 @@ +const startButton = document.querySelector('.start-button'); const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); @@ -7,46 +8,57 @@ let score = 0; //create a function to make a random time for mole to pop from the hole function randomTime(min, max) { - return Math.round(Math.random() * (max - min) + min); + return Math.round(Math.random() * (max - min) + min); } -function randomHole(holes){ - const index = Math.floor(Math.random() * holes.length); - const hole = holes[index]; +function randomHole(holes) { + const index = Math.floor(Math.random() * holes.length); + const hole = holes[index]; - //prevent same hole from getting the same number - if (hole === lastHole){ - return randomHole(holes); - } - lastHole = hole; - return hole; + //prevent same hole from getting the same number + if (hole === lastHole) { + return randomHole(holes); + } + lastHole = hole; + return hole; } function peep() { - const time = randomTime(500, 1000); //get a random time to determine how long mole should peep - const hole = randomHole(holes); //get the random hole from the randomHole function - hole.classList.add('up'); //add the CSS class so selected mole can "pop up" - setTimeout(() => { - hole.classList.remove('up'); //make the selected mole "pop down" after a random time - if(!timeUp) { - peep(); - } - }, time); + const time = randomTime(500, 1000); //get a random time to determine how long mole should peep + const hole = randomHole(holes); //get the random hole from the randomHole function + hole.classList.add('up'); //add the CSS class so selected mole can "pop up" + setTimeout(() => { + hole.classList.remove('up'); //make the selected mole "pop down" after a random time + if (!timeUp) { + peep(); + } + }, time); } function startGame() { - scoreBoard.textContent = 0; - timeUp = false; - score = 0; - peep(); - setTimeout(() => timeUp = true, 15000) //show random moles for 15 seconds + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + + //disable the start button when game starts to prevent user from clicking it again (which causes extra moles to appear) + if (timeUp === false) { + startButton.disabled = true; + startButton.classList.add('disabled'); + } + + setTimeout(() => { + timeUp = true; + startButton.disabled = false; //remove disabled "state" when game time is up + startButton.classList.remove('disabled'); // remove disabled styles when game time is up + }, 15000); //show random moles for 15 seconds } -function wack(e){ - if(!e.isTrusted) return; //** new thing I learned */ - score++; - this.parentNode.classList.remove('up'); //this refers to item clicked - scoreBoard.textContent = score; +function wack(e) { + if (!e.isTrusted) return; //** new thing I learned */ + score++; + this.parentNode.classList.remove('up'); //this refers to item clicked + scoreBoard.textContent = score; } -moles.forEach(mole => mole.addEventListener('click', wack)) \ No newline at end of file +moles.forEach((mole) => mole.addEventListener('click', wack)); diff --git a/Hunt-The-Mole-Game/style.css b/Hunt-The-Mole-Game/style.css index 2d3645904..b3350cc55 100644 --- a/Hunt-The-Mole-Game/style.css +++ b/Hunt-The-Mole-Game/style.css @@ -1,154 +1,157 @@ html { - font-size: 35px; - background: #98BCF4; + font-size: 35px; + background: #98bcf4; } body { - padding: 0; - margin: 0; - text-align: center; + padding: 0; + margin: 0; + text-align: center; } h1 { - text-align: center; - font-size: 100px; - line-height: 1; - margin-bottom: 0; + text-align: center; + font-size: 100px; + line-height: 1; + margin-bottom: 0; } .score { - background:blue; - padding: 0 48px; - line-height: 1; - border-radius: 16px; - color: #fff; - margin-left: 15px; + background: blue; + padding: 0 48px; + line-height: 1; + border-radius: 16px; + color: #fff; + margin-left: 15px; } .game { - width: 600px; - height: 400px; - display:flex; - flex-wrap:wrap; - margin: 0 auto; - + width: 600px; + height: 400px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; } -.hole{ - flex: 1 0 33.33%; - overflow: hidden; - position: relative; +.hole { + flex: 1 0 33.33%; + overflow: hidden; + position: relative; } -.hole:after{ - display:block; - background: url(dirt.png) bottom center no-repeat; - background-size:contain; - content: ''; - width: 100%; - height: 90px; - position: absolute; - z-index: 2; - bottom: -30px; +.hole:after { + display: block; + background: url(dirt.png) bottom center no-repeat; + background-size: contain; + content: ''; + width: 100%; + height: 90px; + position: absolute; + z-index: 2; + bottom: -30px; } .mole { - background: url('mole.png') bottom center no-repeat; - background-size: 80%; - position: absolute; - top: 100%; - width: 100%; - height: 100%; - transition: all 0.4s; + background: url('mole.png') bottom center no-repeat; + background-size: 80%; + position: absolute; + top: 100%; + width: 100%; + height: 100%; + transition: all 0.4s; } -.hole.up .mole{ - top:0; +.hole.up .mole { + top: 0; } -button{ - width:175px; - font-size: 35px; - height: 70px; - color: #fff; - background-color: blue; - border-radius: 10px; - margin-left: 20px; - margin-top: 90px; +button { + width: 175px; + font-size: 35px; + height: 70px; + color: #fff; + background-color: blue; + border-radius: 10px; + margin-left: 20px; + margin-top: 90px; +} + +button.disabled { + color: #b3b3b3; + background-color: #eeeeee; + outline-color: #b3b3b3; } -@media (min-width: 667px) and (max-width: 1024px){ - - h1 { - display: none; - } - .score { - background:blue; +@media (min-width: 667px) and (max-width: 1024px) { + h1 { + display: none; + } + .score { + background: blue; padding: 0 12px; line-height: 1; border-radius: 16px; color: #fff; font-size: 40px; margin-left: 20px; -} + } - .hole.up .mole{ - top:17px; - } + .hole.up .mole { + top: 17px; + } } -@media (max-width: 667px){ - - .game { - width: 667px; - height: 300px; - display:flex; - flex-wrap:wrap; - margin: 0 auto; - } - - .score{ - width:35px; - font-size: 15px; - height: 40px; - color: #fff; - background-color: blue; - border-radius: 10px; - margin-left: 10px; - margin-top: 10px; - padding: 5px; - } - - button{ - margin: 10px 10px 10px 10px; - height: 40px; - width: 75px; - font-size: 15px; - } - - .hole:after{ - display:block; - background: url(dirt.png) bottom center no-repeat; - background-size:contain; - content: ''; - max-width: 70%; - height: 60px; - position: absolute; - z-index: 2; - bottom: -30px; - } - - .mole { - background: url('mole.png') bottom center no-repeat; - background-size: 60%; - position: absolute; - top: 100%; - max-width: 70%; - height: 70%; - transition: all 0.4s; - } - - .hole.up .mole{ - top:50px; - } -} \ No newline at end of file +@media (max-width: 667px) { + .game { + width: 667px; + height: 300px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; + } + + .score { + width: 35px; + font-size: 15px; + height: 40px; + color: #fff; + background-color: blue; + border-radius: 10px; + margin-left: 10px; + margin-top: 10px; + padding: 5px; + } + + button { + margin: 10px 10px 10px 10px; + height: 40px; + width: 75px; + font-size: 15px; + } + + .hole:after { + display: block; + background: url(dirt.png) bottom center no-repeat; + background-size: contain; + content: ''; + max-width: 70%; + height: 60px; + position: absolute; + z-index: 2; + bottom: -30px; + } + + .mole { + background: url('mole.png') bottom center no-repeat; + background-size: 60%; + position: absolute; + top: 100%; + max-width: 70%; + height: 70%; + transition: all 0.4s; + } + + .hole.up .mole { + top: 50px; + } +}