From 41af90b06c2be08c08cb5c211cb05f5bcea8780e Mon Sep 17 00:00:00 2001 From: Supritha Date: Fri, 16 Jul 2021 12:55:04 +0530 Subject: [PATCH 1/2] Added whack-a-mole --- Javascript/Whack-A-Mole/index.html | 38 ++++++++++++++ Javascript/Whack-A-Mole/readme.md | 11 ++++ Javascript/Whack-A-Mole/script.js | 48 ++++++++++++++++++ Javascript/Whack-A-Mole/style.css | 80 ++++++++++++++++++++++++++++++ 4 files changed, 177 insertions(+) create mode 100644 Javascript/Whack-A-Mole/index.html create mode 100644 Javascript/Whack-A-Mole/readme.md create mode 100644 Javascript/Whack-A-Mole/script.js create mode 100644 Javascript/Whack-A-Mole/style.css 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..ea7c6bdf8 --- /dev/null +++ b/Javascript/Whack-A-Mole/readme.md @@ -0,0 +1,11 @@ +## 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: \ 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 From b394c18d587729c7a0eb79d8128159305ac73e58 Mon Sep 17 00:00:00 2001 From: Supritha Date: Fri, 16 Jul 2021 12:58:01 +0530 Subject: [PATCH 2/2] updated readme --- Javascript/Whack-A-Mole/readme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Javascript/Whack-A-Mole/readme.md b/Javascript/Whack-A-Mole/readme.md index ea7c6bdf8..8911de555 100644 --- a/Javascript/Whack-A-Mole/readme.md +++ b/Javascript/Whack-A-Mole/readme.md @@ -8,4 +8,5 @@ HTML CSS JS -### DEMO: \ No newline at end of file +### DEMO: +https://user-images.githubusercontent.com/78655439/125909136-86ae710e-ed0f-40eb-a33d-3bdcb5d9b303.mp4 \ No newline at end of file