add: whack a mole game play

mahakmakharia · Jun 1, 2024 · a354366 · a354366
1 parent 74663ba
commit a354366
Show file tree

Hide file tree

Showing 9 changed files with 229 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,95 @@
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  background: url('/public/assets/mario-bg.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.game-wrapper {
+  margin-top: 16px;
+  height: 80vw;
+  max-height: 540px;
+  width: 80vw;
+  max-width: 540px;
+  display: flex;
+  flex-wrap: wrap;
+  background: url('/public/assets/box-bg.png');
+  border: 4px solid white;
+  border-radius: 12px;
+  box-shadow: 3px 3px 8px 8px rgba(0, 0, 0, 0.15);
+}
+
+.game-wrapper.disabled {
+  pointer-events: none;
+}
+
+.tile {
+  width: calc(100% / 3);
+  height: calc(100% / 3);
+  min-width: calc(100% / 3);
+  min-height: calc(100% / 3);
+  background: url('/public/assets/pipe.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.tile div {
+  position: absolute;
+  width: 50%;
+  top: 16px;
+}
+
+.tile div img {
+  width: 100%;
+  height: 100%;
+  user-drag: none;
+  -webkit-user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.buttons-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.buttons-wrapper button {
+  outline: none;
+  border: none;
+  background: black;
+  color: white;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 6px;
+  min-width: 90px;
+}
+
+.score {
+  font-size: 1.2em;
+  font-weight: 600;
+  padding: 16px;
+}
+
+.best-score {
+  font-size: 1.4em;
+  font-weight: 600;
+  padding-bottom: 8px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=0" />
+  <link href="./index.css" rel="stylesheet" />
+  <title>Whack A Mole</title>
+</head>
+
+<body>
+  <h1>Whack A Mole</h1>
+  <div class="buttons-wrapper">
+    <button class="start-button" onclick="startGame()">Start</button><button onclick="pauseGame()">Pause</button> <button
+      onclick="continueGame()">Play</button>
+  </div>
+  <div class="score hidden"></div>
+  <div class="best-score hidden"></div>
+  <div class="game-wrapper">
+  </div>
+  <template id="game-tile">
+    <div class="tile">
+      <div class="mole">
+        <img class="hidden" src="/public/assets/monty-mole.png" />
+      </div>
+      <div class="plant">
+        <img class="hidden" src="/public/assets/piranha-plant.png" />
+      </div>
+    </div>
+  </template>
+  <script src="./index.js"></script>
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,101 @@
+let currentMoleTile,
+  currentMoleNo,
+  currentPlantNo,
+  currentPlantTile,
+  plantInterval,
+  moleInterval,
+  score;
+
+window.addEventListener('DOMContentLoaded', () => {
+  for (let i = 0; i < 9; i++) {
+    const tile = document.importNode(
+      document.getElementById('game-tile').content,
+      true
+    );
+    tile.querySelector('.tile').setAttribute('id', `tile-${i}`);
+    tile
+      .querySelector('.mole')
+      .setAttribute('onclick', `whackTheMole('tile-${i}')`);
+    tile
+      .querySelector('.plant')
+      .setAttribute('onclick', `whackThePlant('tile-${i}')`);
+    document.querySelector('.game-wrapper').appendChild(tile);
+  }
+});
+
+const startGame = () => {
+  score = 0;
+  document
+    .querySelectorAll('.mole img')
+    .forEach((el) => el.classList.add('hidden'));
+  document
+    .querySelectorAll('.plant img')
+    .forEach((el) => el.classList.add('hidden'));
+  moleInterval = setInterval(showMole, 1500);
+  plantInterval = setInterval(showPlant, 1500);
+  document.querySelector('.score').textContent = `Score: ${score}`;
+  document.querySelector('.score').classList.remove('hidden');
+  document.querySelector('.start-button').textContent = `Restart`;
+  document.querySelector('.game-wrapper').classList.remove('disabled');
+};
+
+const pauseGame = () => {
+  clearInterval(plantInterval);
+  clearInterval(moleInterval);
+};
+
+const continueGame = () => {
+  moleInterval = setInterval(showMole, 1500);
+  plantInterval = setInterval(showPlant, 1500);
+};
+
+const whackTheMole = (id) => {
+  currentMoleTile = document.getElementById(id);
+  currentMoleTile.querySelector('.mole img').classList.add('hidden');
+  score += 10;
+  document.querySelector('.score').textContent = `Score: ${score}`;
+};
+
+const whackThePlant = (id) => {
+  currentMoleTile = document.getElementById(id);
+  gameOver = true;
+  clearInterval(plantInterval);
+  clearInterval(moleInterval);
+  document.querySelector(
+    '.score'
+  ).textContent = `Game Over! Your total score: ${score}`;
+  document.querySelector('.game-wrapper').classList.add('disabled');
+  const bestScore = Math.max(
+    Number(localStorage.getItem('whack-a-mole-best-score') || 0),
+    score
+  );
+  localStorage.setItem('whack-a-mole-best-score', bestScore);
+  document.querySelector(
+    '.best-score'
+  ).textContent = `Best Score: ${bestScore}`;
+  document.querySelector('.best-score').classList.remove('hidden');
+};
+
+const getRandomNumber = () => {
+  return Math.floor(Math.random() * 9);
+};
+
+const showMole = () => {
+  currentMoleNo = getRandomNumber();
+  if (currentMoleTile) {
+    currentMoleTile.querySelector('.mole img').classList.add('hidden');
+  }
+  if (currentPlantNo === currentMoleNo) return;
+  currentMoleTile = document.getElementById(`tile-${currentMoleNo}`);
+  currentMoleTile.querySelector('.mole img').classList.remove('hidden');
+};
+
+const showPlant = () => {
+  currentPlantNo = getRandomNumber();
+  if (currentPlantTile) {
+    currentPlantTile.querySelector('.plant img').classList.add('hidden');
+  }
+  if (currentPlantNo === currentMoleNo) return;
+  currentPlantTile = document.getElementById(`tile-${currentPlantNo}`);
+  currentPlantTile.querySelector('.plant img').classList.remove('hidden');
+};
diff --git a/public/assets/box-bg.png b/public/assets/box-bg.png
diff --git a/public/assets/hammer.webp b/public/assets/hammer.webp
diff --git a/public/assets/mario-bg.jpg b/public/assets/mario-bg.jpg
diff --git a/public/assets/monty-mole.png b/public/assets/monty-mole.png
diff --git a/public/assets/pipe.png b/public/assets/pipe.png
diff --git a/public/assets/piranha-plant.png b/public/assets/piranha-plant.png