diff --git a/README.md b/README.md index fac6b93..db09128 100644 --- a/README.md +++ b/README.md @@ -342,6 +342,17 @@ In order to run this project you need: +
  • +
    +Dinosaur Game +

    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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/DinosaurGame/assets/cactus.png b/Source-Code/DinosaurGame/assets/cactus.png new file mode 100644 index 0000000..5d6dcbe Binary files /dev/null and b/Source-Code/DinosaurGame/assets/cactus.png differ diff --git a/Source-Code/DinosaurGame/assets/dinosaur.png b/Source-Code/DinosaurGame/assets/dinosaur.png new file mode 100644 index 0000000..a6d05c6 Binary files /dev/null and b/Source-Code/DinosaurGame/assets/dinosaur.png differ diff --git a/Source-Code/DinosaurGame/index.html b/Source-Code/DinosaurGame/index.html new file mode 100644 index 0000000..f285bcd --- /dev/null +++ b/Source-Code/DinosaurGame/index.html @@ -0,0 +1,21 @@ + + + + + + + DINOSAUR GAME + + +

    DINOSAUR GAME 🦕

    +
    +
    + dino +
    +
    + cactus +
    +
    + + + diff --git a/Source-Code/DinosaurGame/script.js b/Source-Code/DinosaurGame/script.js new file mode 100644 index 0000000..c249b6b --- /dev/null +++ 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 new file mode 100644 index 0000000..46ceea6 --- /dev/null +++ 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; + } +}