mole

kunjgit · Jun 8, 2024 · c1f499e · c1f499e
1 parent 1883724
commit c1f499e
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 0 deletions.
diff --git a/Games/Mole/index.html b/Games/Mole/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</title>
+    <link rel="stylesheet" href="mole.css">
+    <script src="mole.js"></script>
+</head>
+<body>
+    <h1>Whac a Mole</h1>
+    <h2 id="score">0</h2>
+    <!-- 3x3 -->
+    <div id="board">
+    </div>
+</body>
+</html>
diff --git a/Games/Mole/mario-bg.jpg.png b/Games/Mole/mario-bg.jpg.png
diff --git a/Games/Mole/mole.css b/Games/Mole/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/Games/Mole/mole.js b/Games/Mole/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/Games/Mole/mole.png b/Games/Mole/mole.png
diff --git a/Games/Mole/pipe.png b/Games/Mole/pipe.png
diff --git a/Games/Mole/piranha-plant.png b/Games/Mole/piranha-plant.png
diff --git a/Games/Mole/readme.md b/Games/Mole/readme.md
@@ -0,0 +1,7 @@
+# [WHAC A MOLE](https://youtu.be/ej8SatOj3V4)
+- Coding Tutorial: https://youtu.be/ej8SatOj3V4
+- Demo: https://imkennyyip.github.io/whac-a-mole/
+
+In this tutorial, you will learn to create the whac a mole game with html, css, and javascript. Specifically, you will learn how to code the game using html5 canvas. 
+
+While creating this mario themed whac-a-mole game, you will learn how to use javascript to set the game board by editing dom elements, add click handlers to whack the mole, and randomly spawn the mole and piranha plant.
diff --git a/Games/Mole/soil.png b/Games/Mole/soil.png