first commit

nidhiupman568 · Jun 6, 2024 · a6d025d · a6d025d
commit a6d025d
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whac a Mole-BY NIDHI UPMAN</title>
+    <link rel="stylesheet" href="mole.css">
+    <script src="mole.js"></script>
+</head>
+<body>
+    <h1>Whac a Mole-BY NIDHI UPMAN</h1>
+    <h2 id="score">0</h2>
+    <!-- 3x3 -->
+    <div id="board">
+    </div>
+</body>
+</html>
diff --git a/mario-bg.jpg b/mario-bg.jpg
diff --git a/mole.css b/mole.css
@@ -0,0 +1,41 @@
+body {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    background: url("./mario-bg.jpg");
+    background-size: cover;
+}
+
+#board {
+    width: 540px;
+    height: 540px;
+    /* background-color: green; */
+
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+
+    background: url("./soil.png");
+    background-size: cover;
+    border: 3px solid white;
+    border-radius: 25px;
+}
+
+#board div {
+    /* board = 540 x 540, divide into 3x3 tiles --> 180 x 180 per div */
+    width: 180px; 
+    height: 180px;
+    background-image: url("./pipe.png");
+    background-size: cover;
+}
+
+#board div img {
+    /* all img tags inside tiles */
+    width: 100px;
+    height: 100px;
+
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}
diff --git a/mole.js b/mole.js
@@ -0,0 +1,77 @@
+let currMoleTile;
+let currPlantTile;
+let score = 0;
+let gameOver = false;
+
+window.onload = function() {
+    setGame();
+}
+
+function setGame() {
+    //set up the grid in html
+    for (let i = 0; i < 9; i++) { //i goes from 0 to 8, stops at 9
+        //<div id="0-8"></div>
+        let tile = document.createElement("div");
+        tile.id = i.toString();
+        tile.addEventListener("click", selectTile);
+        document.getElementById("board").appendChild(tile);
+    }
+    setInterval(setMole, 1000); // 1000 miliseconds = 1 second, every 1 second call setMole
+    setInterval(setPlant, 2000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant
+}
+
+function getRandomTile() {
+    //math.random --> 0-1 --> (0-1) * 9 = (0-9) --> round down to (0-8) integers
+    let num = Math.floor(Math.random() * 9);
+    return num.toString();
+}
+
+function setMole() {
+    if (gameOver) {
+        return;
+    }
+    if (currMoleTile) {
+        currMoleTile.innerHTML = "";
+    }
+    let mole = document.createElement("img");
+    mole.src = "./monty-mole.png";
+
+    let num = getRandomTile();
+    if (currPlantTile && currPlantTile.id == num) {
+        return;
+    }
+    currMoleTile = document.getElementById(num);
+    currMoleTile.appendChild(mole);
+}
+
+function setPlant() {
+    if (gameOver) {
+        return;
+    }
+    if (currPlantTile) {
+        currPlantTile.innerHTML = "";
+    }
+    let plant = document.createElement("img");
+    plant.src = "./piranha-plant.png";
+
+    let num = getRandomTile();
+    if (currMoleTile && currMoleTile.id == num) {
+        return;
+    }
+    currPlantTile = document.getElementById(num);
+    currPlantTile.appendChild(plant);
+}
+
+function selectTile() {
+    if (gameOver) {
+        return;
+    }
+    if (this == currMoleTile) {
+        score += 10;
+        document.getElementById("score").innerText = score.toString(); //update score html
+    }
+    else if (this == currPlantTile) {
+        document.getElementById("score").innerText = "GAME OVER: " + score.toString(); //update score html
+        gameOver = true;
+    }
+}
diff --git a/monty-mole.png b/monty-mole.png
diff --git a/pipe.png b/pipe.png
diff --git a/piranha-plant.png b/piranha-plant.png
diff --git a/soil.png b/soil.png