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.
+ +Press space to jump
+Score:
+ + + diff --git a/Source-Code/JumpGame/script.js b/Source-Code/JumpGame/script.js new file mode 100644 index 0000000..9b02e9b --- /dev/null +++ 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 new file mode 100644 index 0000000..fe3c090 --- /dev/null +++ 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; +}