rkemali
diff --git a/‎Mole Attack/README.md
Lines changed: 51 additions & 0 deletions b/‎Mole Attack/README.md
Lines changed: 51 additions & 0 deletions
diff --git a/‎Mole Attack/css/style.css
Lines changed: 21 additions & 0 deletions b/‎Mole Attack/css/style.css
Lines changed: 21 additions & 0 deletions
diff --git a/‎Mole Attack/img/256px-Icon-notepad.svg.png
18.6 KB b/‎Mole Attack/img/256px-Icon-notepad.svg.png
18.6 KB
diff --git a/‎Mole Attack/img/Screenshot 2022-05-30 075521.png
17.5 KB b/‎Mole Attack/img/Screenshot 2022-05-30 075521.png
17.5 KB
diff --git a/‎Mole Attack/img/mole.jpg
8.72 KB b/‎Mole Attack/img/mole.jpg
8.72 KB
diff --git a/‎Mole Attack/index.html
Lines changed: 34 additions & 0 deletions b/‎Mole Attack/index.html
Lines changed: 34 additions & 0 deletions
diff --git a/‎Mole Attack/js/script.js
Lines changed: 50 additions & 0 deletions b/‎Mole Attack/js/script.js
Lines changed: 50 additions & 0 deletions
@@ -0,0 +1,51 @@
+<p align="center">
+    <img alt="" height="80" src="./img/256px-Icon-notepad.svg.png">
+  </a>
+</p>
+<h1 align="center">Mole Attack</h1>
+
+<div align="center">
+ Attack mole to gain points
+</div>
+
+
+
+## Description:
+Mole Attack is a game where you have to attack the mole to gain points
+
+---
+
+## Tech Stack Used:
+HTML5,CSS3,JavaScript
+
+---
+
+## It Look's Like:
+
+![image](./img/Screenshot%202022-05-30%20075521.png)
+
+---
+
+
+## **Quick Start**
+- Clone this repository
+
+``` 
+git clone https://github.com/Dezenix/frontend-html-css-js
+```
+- Change Directory
+
+```
+cd Change Mole Attack
+```
+
+```
+cd index.html
+```
+> open ```index.html``` file in your default Browser.
+---
+## **Installation and Dependencies**
+- Install any Code Editors like : VS Code, Atom, etc.
+- Then follow the ```Quick Start``` steps given above and open the 
+Change Mole Attack in your Code Editor.
+- Then open ```index.html``` file then edit and save it .
@@ -0,0 +1,21 @@
+.body {
+    background-color: aqua;
+}
+
+.grid {
+    width: 606px;
+    height: 606px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.square {
+    height: 200px;
+    width: 200px;
+    border: solid black 1px;
+}
+
+.mole {
+    background-image: url("../img/mole.jpg");
+    background-size: cover;
+}
@@ -0,0 +1,34 @@
+<!doctype html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>mole attack</title>
+    <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+
+    <h2>Your score:</h2>
+    <h2 id="score">0</h2>
+
+    <h2>Time Left:</h2>
+    <h2 id="time-left">60</h2>
+
+    <div class="grid">
+        <div class="square" id="1"></div>
+        <div class="square" id="2"></div>
+        <div class="square" id="3"></div>
+        <div class="square" id="4"></div>
+        <div class="square" id="5"></div>
+        <div class="square" id="6"></div>
+        <div class="square" id="7"></div>
+        <div class="square" id="8"></div>
+        <div class="square" id="9"></div>
+    </div>
+
+    <script src="./js/script.js"></script>
+</body>
+
+</html>
@@ -0,0 +1,50 @@
+const squares = document.querySelectorAll('.square')
+const mole = document.querySelector('.mole')
+const timeLeft = document.querySelector('#time-left')
+const score = document.querySelector('#score')
+
+let result = 0
+let hitPosition
+let currentTime = 60
+let timerId = null
+
+function randomSquare() {
+    squares.forEach(square => {
+        square.classList.remove('mole')
+    })
+
+    let randomSquare = squares[Math.floor(Math.random() * 9)]
+    randomSquare.classList.add('mole')
+
+    hitPosition = randomSquare.id
+}
+
+squares.forEach(square => {
+    square.addEventListener('mousedown', () => {
+        if (square.id == hitPosition) {
+            result++
+            score.textContent = result
+            hitPosition = null
+        }
+    })
+})
+
+function moveMole() {
+    timerId = setInterval(randomSquare, 500)
+}
+
+moveMole()
+
+function countDown() {
+    currentTime--
+    timeLeft.textContent = currentTime
+
+    if (currentTime == 0) {
+        clearInterval(countDownTimerId)
+        clearInterval(timerId)
+        alert('GAME OVER! Your final score is ' + result)
+    }
+
+}
+
+let countDownTimerId = setInterval(countDown, 1000)