diff --git a/Javascript/Whack-A-Mole/index.html b/Javascript/Whack-A-Mole/index.html new file mode 100644 index 000000000..54390e92f --- /dev/null +++ b/Javascript/Whack-A-Mole/index.html @@ -0,0 +1,38 @@ + + + + + + Whack-a-mole + + + + + + +

Whack-a-mole! 0

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Javascript/Whack-A-Mole/readme.md b/Javascript/Whack-A-Mole/readme.md new file mode 100644 index 000000000..8911de555 --- /dev/null +++ b/Javascript/Whack-A-Mole/readme.md @@ -0,0 +1,12 @@ +## JavaScript Whack-A-mole game + +### Description +This JavaScript game consists of moles in the holes and when they show up, the user has to click on them to shove down as many moles as possible. There is also a scorecard. + +### Tech Stack +HTML +CSS +JS + +### DEMO: +https://user-images.githubusercontent.com/78655439/125909136-86ae710e-ed0f-40eb-a33d-3bdcb5d9b303.mp4 \ No newline at end of file diff --git a/Javascript/Whack-A-Mole/script.js b/Javascript/Whack-A-Mole/script.js new file mode 100644 index 000000000..16e16061e --- /dev/null +++ b/Javascript/Whack-A-Mole/script.js @@ -0,0 +1,48 @@ +const holes = document.querySelectorAll('.hole'); + const scoreBoard = document.querySelector('.score'); + const moles = document.querySelectorAll('.mole'); + let lastHole; + let timeUp = false; + let score = 0; + + function randomTime(min, max) { + return Math.round(Math.random() * (max - min) + min); + } + + function randomHole(holes) { + const idx = Math.floor(Math.random() * holes.length); + const hole = holes[idx]; + if (hole === lastHole) { + console.log('Ah nah thats the same one bud'); + return randomHole(holes); + } + lastHole = hole; + return hole; + } + + function peep() { + const time = randomTime(200, 1000); + const hole = randomHole(holes); + hole.classList.add('up'); + setTimeout(() => { + hole.classList.remove('up'); + if (!timeUp) peep(); + }, time); + } + + function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => timeUp = true, 10000) + } + + function bonk(e) { + if(!e.isTrusted) return; // cheater! + score++; + this.parentNode.classList.remove('up'); + scoreBoard.textContent = score; + } + + moles.forEach(mole => mole.addEventListener('click', bonk)); \ No newline at end of file diff --git a/Javascript/Whack-A-Mole/style.css b/Javascript/Whack-A-Mole/style.css new file mode 100644 index 000000000..a84ce1a47 --- /dev/null +++ b/Javascript/Whack-A-Mole/style.css @@ -0,0 +1,80 @@ +html { + box-sizing: border-box; + font-size: 10px; + background: lightgreen; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + padding: 0; + margin: 0; + font-family: 'Amatic SC', cursive; + } + + h1 { + text-align: center; + font-size: 10rem; + line-height: 1; + margin-bottom: 0; + } + + .score { + background: rgba(255,255,255,0.2); + padding: 0 3rem; + line-height: 1; + border-radius: 1rem; + } + + .game { + width: 600px; + height: 400px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; + } + + .hole { + flex: 1 0 33.33%; + overflow: hidden; + position: relative; + } + + .hole:after { + display: block; + background: url(https://raw.githubusercontent.com/wesbos/JavaScript30/296d46a085388b783e2f252ff006e72e24a11f96/30%20-%20Whack%20A%20Mole/dirt.svg) bottom center no-repeat; + background-size: contain; + content: ''; + width: 100%; + height:70px; + position: absolute; + z-index: 2; + bottom: -30px; + } + + .mole { + background: url('https://raw.githubusercontent.com/wesbos/JavaScript30/296d46a085388b783e2f252ff006e72e24a11f96/30%20-%20Whack%20A%20Mole/mole.svg') bottom center no-repeat; + background-size: 60%; + position: absolute; + top: 100%; + width: 100%; + height: 100%; + transition:all 0.4s; + } + + .hole.up .mole { + top: 0; + } + + button{ + padding:10px; + border-radius:5px; + margin-left:30px; + outline:none; + background:green; + color:white; + font-family: monospace; + font-size:20px; + } \ No newline at end of file