| const gameContainer = document.getElementById('game-container'); |
| const dino = document.getElementById('dino'); |
| const obstacle = document.getElementById('obstacle'); |
| const scoreDisplay = document.getElementById('score'); |
|
|
| let score = 0; |
| let isJumping = false; |
| let obstaclePosition = 600; |
|
|
| function jump() { |
| if (isJumping) return; |
| isJumping = true; |
| let jumpCount = 0; |
| const jumpInterval = setInterval(() => { |
| const jumpHeight = jumpCount * 2; |
| dino.style.bottom = `${40 + jumpHeight}px`; |
| jumpCount++; |
| if (jumpCount > 10) { |
| clearInterval(jumpInterval); |
| let fallCount = 0; |
| const fallInterval = setInterval(() => { |
| const fallHeight = fallCount * 2; |
| dino.style.bottom = `${100 - fallHeight}px`; |
| fallCount++; |
| if (fallCount > 10) { |
| clearInterval(fallInterval); |
| isJumping = false; |
| } |
| }, 20); |
| } |
| }, 20); |
| } |
|
|
| |
| document.addEventListener('touchstart', (event) => { |
| jump(); |
| }, { passive: true }); |
|
|
| function moveObstacle() { |
| obstaclePosition -= 5; |
| obstacle.style.left = `${obstaclePosition}px`; |
| if (obstaclePosition < -20) { |
| obstaclePosition = 600; |
| score++; |
| scoreDisplay.textContent = `Score: ${score}`; |
| } |
| } |
|
|
| function checkCollision() { |
| const dinoTop = parseInt(dino.style.bottom, 10); |
| const obstacleLeft = parseInt(obstacle.style.left, 10); |
| if (obstacleLeft < 40 && obstacleLeft > 0 && dinoTop <= 40) { |
| alert(`Game Over! Your score was: ${score}`); |
| obstaclePosition = 600; |
| score = 0; |
| scoreDisplay.textContent = `Score: ${score}`; |
| } |
| } |
|
|
| setInterval(() => { |
| moveObstacle(); |
| checkCollision(); |
| }, 20); |
|
|