50Projects-HTML-CSS-JavaScript : Jump game

README.md

@@ -353,6 +353,17 @@ In order to run this project you need:
 
 
 
+
+
+Dinosaur Game
+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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/JumpGame/index.html

@@ -0,0 +1,20 @@
+
+
+  
+    
+    
+    Jump Game
+    
+  
+  
+    Jump Game
+    Press space to jump
+    
+      
+      
+      
+    
+    Score: 
+    
+  
+

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();
+  }
+});

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;
+}