-
-
Save Ahmed1RAGE/10fd9b766a9c5fbe872bfe0e0289260a to your computer and use it in GitHub Desktop.
so guys i made a simple game as the dino game on the google chrome hope you like it if there is any falt plz text me
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dino Game</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="game-container"> | |
| <div class="dino" id="dino"></div> | |
| <div class="obstacle" id="obstacle"></div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| zYQwErv | |
| ------- | |
| A [Pen](https://codepen.io/Ahmed1RAGE/pen/zYQwErv) by [Ahmed1RAGE](https://codepen.io/Ahmed1RAGE) on [CodePen](https://codepen.io). | |
| [License](https://codepen.io/license/pen/zYQwErv). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // script.js | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const dino = document.getElementById('dino'); | |
| const obstacle = document.getElementById('obstacle'); | |
| let isJumping = false; | |
| let gravity = 0.9; | |
| document.addEventListener('keydown', function(event) { | |
| if (event.key === ' ') { | |
| if (!isJumping) { | |
| jump(); | |
| } | |
| } | |
| }); | |
| function jump() { | |
| let position = 0; | |
| isJumping = true; | |
| let upInterval = setInterval(() => { | |
| if (position >= 150) { | |
| clearInterval(upInterval); | |
| let downInterval = setInterval(() => { | |
| if (position <= 0) { | |
| clearInterval(downInterval); | |
| isJumping = false; | |
| } else { | |
| position -= 5; | |
| position *= gravity; | |
| dino.style.bottom = position + 'px'; | |
| } | |
| }, 20); | |
| } else { | |
| position += 30; | |
| position *= gravity; | |
| dino.style.bottom = position + 'px'; | |
| } | |
| }, 20); | |
| } | |
| let checkCollision = setInterval(() => { | |
| let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue('bottom')); | |
| let obstacleLeft = parseInt(window.getComputedStyle(obstacle).getPropertyValue('right')); | |
| if (obstacleLeft > 750 && obstacleLeft < 800 && dinoTop <= 50) { | |
| alert('Game Over'); | |
| clearInterval(checkCollision); | |
| location.reload(); | |
| } | |
| }, 10); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* styles.css */ | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #f4f4f4; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| .game-container { | |
| position: relative; | |
| width: 800px; | |
| height: 200px; | |
| border: 2px solid #000; | |
| background-color: #fff; | |
| overflow: hidden; | |
| } | |
| .dino { | |
| position: absolute; | |
| bottom: 0; | |
| left: 50px; | |
| width: 50px; | |
| height: 50px; | |
| background-color: #000; | |
| border-radius: 5px; | |
| } | |
| .obstacle { | |
| position: absolute; | |
| bottom: 0; | |
| right: -50px; | |
| width: 50px; | |
| height: 50px; | |
| background-color: #555; | |
| animation: moveObstacle 2s linear infinite; | |
| } | |
| @keyframes moveObstacle { | |
| 0% { | |
| right: -50px; | |
| } | |
| 100% { | |
| right: 800px; | |
| } | |
| } | |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
.