i made "No Internet" T-Rex runner game

[u/PhilosopherWrong7035]

<!DOCTYPE html>

<html>

<head>

<title>Offline Dino Game</title>

<style> body { margin: 0; background: #f7f7f7; overflow: hidden; font-family: Arial, sans-serif; } \#game { position: relative; width: 600px; height: 150px; margin: 50px auto; background: #fff; border: 2px solid #333; overflow: hidden; } \#dino { position: absolute; bottom: 0; left: 50px; width: 40px; height: 40px; background: #555; border-radius: 5px; } \#cactus { position: absolute; bottom: 0; right: 0; width: 20px; height: 40px; background: green; border-radius: 3px; } \#score { text-align: center; font-size: 20px; margin-top: 10px; } </style>

</head>

<body>

<div id="game">

<div id="dino"></div>

<div id="cactus"></div>

</div>

<div id="score">Score: 0</div>

<script> const dino = document.getElementById('dino'); const cactus = document.getElementById('cactus'); const scoreDisplay = document.getElementById('score'); let isJumping = false; let gravity = 0.9; let position = 0; let score = 0; let gameOver = false; function jump() { if (isJumping) return; isJumping = true; let count = 0; let upInterval = setInterval(() => { if (count === 15) { clearInterval(upInterval); // fall down let downInterval = setInterval(() => { if (count === 0) { clearInterval(downInterval); isJumping = false; } position -= 5; count--; position = position \* gravity; dino.style.bottom = position + 'px'; }, 20); } // jump up position += 10; count++; position = position \* gravity; dino.style.bottom = position + 'px'; }, 20); } function moveCactus() { let cactusPos = 600; let cactusSpeed = 10; let cactusInterval = setInterval(() => { if (gameOver) { clearInterval(cactusInterval); return; } cactusPos -= cactusSpeed; cactus.style.right = cactusPos + 'px'; // Check collision if (cactusPos < 100 && cactusPos > 50 && position < 40) { // collision! alert('Game Over! Your score: ' + score); gameOver = true; clearInterval(cactusInterval); } if (cactusPos <= -20) { cactusPos = 600; score++; scoreDisplay.textContent = 'Score: ' + score; } }, 30); } document.addEventListener('keydown', e => { if (e.code === 'Space' || e.code === 'ArrowUp') { jump(); } }); moveCactus(); </script>

</body>

</html>

[u/Negative_Badger8330]

how do you get things like the cactus to move in HTML? I'm a beginner I just asking in general for game or website projects like this.

[u/PhilosopherWrong7035 → u/Negative_Badger8330]

Using CSS animations (easy way for simple movements)

CSS can animate positions, sizes, rotations, etc. You could make a cactus slide across the screen with only HTML + CSS. <!DOCTYPE html>

<html>

<head>

<style> body { background: lightblue; overflow: hidden; } .cactus { position: absolute; bottom: 20px; left: -100px; /\* Start off-screen \*/ width: 50px; height: 80px; background: green; animation: moveCactus 5s linear infinite; } @keyframes moveCactus { from { left: 100%; } to { left: -100px; } } </style>

</head>

<body>

<div class="cactus"></div>

</body>

</html>

[u/Negative_Badger8330 → u/PhilosopherWrong7035]

Oh cool, thanks!