tajulafreen · tajulafreen · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024 · Jul 30, 2024
diff --git a/README.md b/README.md
@@ -342,6 +342,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Dinosaur Game</summary>
+<p>This project is a simple, interactive "Dinosaur Game" built using HTML, CSS, and JavaScript. Inspired by the classic offline game in Google Chrome, the player controls a dinosaur character that must jump over moving obstacles (cacti) to avoid collision. The game features basic animations and a scoring system, providing an engaging experience. The project demonstrates fundamental concepts of web development, including DOM manipulation, event handling, and CSS animations.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/DinosaurGame/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/DinosaurGame">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/DinosaurGame/assets/cactus.png b/Source-Code/DinosaurGame/assets/cactus.png
diff --git a/Source-Code/DinosaurGame/assets/dinosaur.png b/Source-Code/DinosaurGame/assets/dinosaur.png
diff --git a/Source-Code/DinosaurGame/index.html b/Source-Code/DinosaurGame/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>DINOSAUR GAME</title>
+  </head>
+  <body>
+    <h1 class="game-heading">DINOSAUR GAME 🦕</h1>
+    <div class="game">
+      <div class="character">
+        <img class="dino" src="./assets/dinosaur.png" alt="dino" />
+      </div>
+      <div class="block">
+        <img class="cactus" src="./assets/cactus.png" alt="cactus" />
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/DinosaurGame/script.js b/Source-Code/DinosaurGame/script.js
@@ -0,0 +1,41 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const character = document.querySelector('.dino');
+  const block = document.querySelector('.cactus');
+
+  const jump = () => {
+    // Add class to initiate jump
+    character.classList.add('animate');
+
+    // Remove class after animation duration (500ms)
+    setTimeout(() => {
+      character.classList.remove('animate');
+    }, 500);
+  };
+
+  // Trigger jump on spacebar press
+  document.addEventListener('keydown', (event) => {
+    if (event.code === 'Space') {
+      jump();
+    }
+  });
+
+  // Check for collision
+  const checkDead = setInterval(() => {
+    const blockLeft = parseInt(
+      window.getComputedStyle(block).getPropertyValue('left'),
+      10,
+    );
+    const characterTop = parseInt(
+      window.getComputedStyle(character).getPropertyValue('top'),
+      10,
+    );
+
+    // Check for collision
+    if (blockLeft < 20 && blockLeft > 0 && characterTop >= 178) {
+      block.style.animation = 'none';
+      block.style.display = 'none';
+      alert('Uh..Oh, you lose.');
+      clearInterval(checkDead); // Stop checking for collisions
+    }
+  }, 100);
+});
diff --git a/Source-Code/DinosaurGame/style.css b/Source-Code/DinosaurGame/style.css
@@ -0,0 +1,78 @@
+* {
+  margin: 0;
+  padding: 0;
+  background-color: rgb(27, 75, 133);
+}
+
+.game-heading {
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  color: rgb(0, 247, 255);
+  text-shadow: 3px 2px rgb(128, 0, 0);
+  font-size: 5em;
+  margin: 40px 0;
+}
+
+.game {
+  width: 800px;
+  height: 300px;
+  margin: 60px auto;
+  display: flex;
+  border: 3px solid rgb(0, 247, 255);
+}
+
+.cactus {
+  height: 40px;
+  object-fit: contain;
+  position: relative;
+  top: 261px;
+  left: 670px;
+  animation: block 3s infinite linear;
+}
+
+.block {
+  height: 40px;
+}
+
+.character {
+  height: 100px;
+}
+
+.dino {
+  height: 100px;
+  object-fit: contain;
+  position: relative;
+  top: 200px;
+}
+
+.animate {
+  animation: character 500ms;
+}
+
+@keyframes block {
+  0% {
+    left: 670px;
+  }
+
+  100% {
+    left: -60px;
+  }
+}
+
+@keyframes character {
+  0% {
+    top: 203px;
+  }
+
+  30% {
+    top: 140px;
+  }
+
+  70% {
+    top: 140px;
+  }
+
+  100% {
+    top: 203px;
+  }
+}