Merge pull request #34 from tajulafreen/Jump_Game

50Projects-HTML-CSS-JavaScript : Jump game
tajulafreen · Jul 30, 2024 · b8037ba · b8037ba
2 parents a3f93e2 + 4720609
commit b8037ba
Show file tree

Hide file tree

Showing 4 changed files with 214 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -353,6 +353,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Dinosaur Game</summary>
+<p>This project is a simple browser-based "Jump Game" where players control a character that must jump over blocks to avoid collisions. It demonstrates the use of HTML, CSS, and JavaScript to create an interactive game with basic animations and collision detection. The player uses the spacebar to jump and scores points based on survival time. The game includes two types of moving obstacles, adding a layer of challenge.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/JumpGame/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/JumpGame">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/JumpGame/index.html b/Source-Code/JumpGame/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Jump Game</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h2>Jump Game</h2>
+    <p id="co">Press space to jump</p>
+    <div class="game">
+      <div id="character"></div>
+      <div id="block"></div>
+      <div id="block2"></div>
+    </div>
+    <p>Score: <span id="scoreSpan"></span></p>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js
@@ -0,0 +1,66 @@
+const character = document.getElementById('character');
+const block = document.getElementById('block');
+const block2 = document.getElementById('block2');
+let counter = 0;
+
+const jump = () => {
+  if (character.classList.contains('animate')) return;
+  character.classList.add('animate');
+  setTimeout(() => {
+    character.classList.remove('animate');
+  }, 300);
+};
+
+// eslint-disable-next-line no-unused-vars
+const checkDead = setInterval(() => {
+  const characterTop = parseInt(
+    window.getComputedStyle(character).getPropertyValue('top'),
+    10,
+  );
+  const blockLeft = parseInt(
+    window.getComputedStyle(block).getPropertyValue('left'),
+    10,
+  );
+  if (blockLeft < 20 && blockLeft > -20 && characterTop >= 130) {
+    block.style.animation = 'none';
+    alert(`Game Over. Score: ${Math.floor(counter / 100)}`);
+    counter = 0;
+    block.style.animation = 'block 1s infinite linear';
+  } else {
+    counter += 1;
+    document.getElementById('scoreSpan').innerText = Math.floor(counter / 100);
+  }
+}, 10);
+
+const add = () => {
+  block2.classList.add('animate1');
+  setTimeout(() => {
+    block2.classList.remove('animate1');
+  }, 9000);
+};
+
+// Call the `add` function at regular intervals to animate block2
+setInterval(add, 7000);
+
+// eslint-disable-next-line no-unused-vars
+const ka = () => {
+  const characterTop = parseInt(
+    window.getComputedStyle(character).getPropertyValue('top'),
+    10,
+  );
+  const blockTop = parseInt(
+    window.getComputedStyle(block2).getPropertyValue('left'),
+    10,
+  );
+  if (blockTop < 20 && characterTop === 100) {
+    block2.classList.remove('animate1');
+    alert(`Game Over. Score: ${Math.floor(counter / 100)}`);
+    counter = 0;
+  }
+};
+
+window.addEventListener('keydown', (event) => {
+  if (event.keyCode === 32) {
+    jump();
+  }
+});
diff --git a/Source-Code/JumpGame/style.css b/Source-Code/JumpGame/style.css
@@ -0,0 +1,117 @@
+* {
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-align: center;
+  background-color: blue;
+}
+
+.game {
+  top: 40px;
+  width: 500px;
+  height: 200px;
+  border: 1px solid black;
+  margin: 10% auto;
+  background-color: aqua;
+}
+
+h2 {
+  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;
+}
+
+p {
+  color: white;
+  font-size: 20px;
+  text-align: center;
+}
+
+#character {
+  width: 30px;
+  height: 50px;
+  background-color: red;
+  position: relative;
+  top: 150px;
+  border-radius: 70%;
+}
+
+.animate {
+  animation: jump 0.3s linear;
+}
+
+@keyframes jump {
+  0% {
+    top: 150px;
+  }
+
+  30% {
+    top: 100px;
+  }
+
+  70% {
+    top: 100px;
+  }
+
+  100% {
+    top: 150px;
+  }
+}
+
+#block {
+  background-color: blue;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 130px;
+  left: 500px;
+  animation: block 1s infinite linear;
+}
+
+#block2 {
+  background-color: orange;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  top: 30px;
+  left: 500px;
+}
+
+.animate1 {
+  animation: blocke 1.5s infinite linear;
+}
+
+@keyframes blocke {
+  0% {
+    left: 500px;
+  }
+
+  100% {
+    left: -20px;
+  }
+}
+
+@keyframes block {
+  0% {
+    left: 500px;
+  }
+
+  100% {
+    left: -20px;
+  }
+}
+
+#co {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.animate2 {
+  animation: pa 1s ease-in-out;
+}
+
+.show {
+  opacity: 0;
+}