Scribd
Upload
6 views3 pages

Subu and Sushant - HTML

Uploaded by

sushantaryal37
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views3 pages

Subu and Sushant - HTML

Uploaded by

sushantaryal37
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dinosaur Game</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
overflow: hidden;
background-color: #f0f0f0;
}

.game-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
overflow: hidden;
}

.dino {
width: 50px;
height: 50px;
background-color: #333;
position: absolute;
bottom: 100px;
left: 50px;
border-radius: 5px;
}

.obstacle {
width: 30px;
height: 30px;
background-color: #ff3333;
position: absolute;
bottom: 100px;
right: -30px;
border-radius: 5px;
animation: moveObstacle 2s linear infinite;
}

@keyframes moveObstacle {
from {
right: -30px;
}
to {
right: 100%;
}
}

.ground {
width: 100%;
height: 100px;
background-color: #ddd;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="game-container">
<div class="ground"></div>
<div class="dino"></div>
<div class="obstacle"></div>
</div>

<script>
const dino = document.querySelector('.dino');
const obstacle = document.querySelector('.obstacle');

let isJumping = false;

function jump() {
if (isJumping) return;

isJumping = true;
let upInterval = setInterval(() => {
let dinoBottom = parseInt(window.getComputedStyle(dino).bottom);
if (dinoBottom < 200) {
dino.style.bottom = dinoBottom + 10 + 'px';
} else {
clearInterval(upInterval);
let downInterval = setInterval(() => {
let dinoBottom =
parseInt(window.getComputedStyle(dino).bottom);
if (dinoBottom > 100) {
dino.style.bottom = dinoBottom - 10 + 'px';
} else {
clearInterval(downInterval);
isJumping = false;
}
}, 20);
}
}, 20);
}

function checkCollision() {
setInterval(() => {
const dinoRect = dino.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();

if (
dinoRect.right > obstacleRect.left &&
dinoRect.left < obstacleRect.right &&
dinoRect.bottom > obstacleRect.top
) {
alert('Game Over!');
location.reload();
}
}, 10);
}

document.addEventListener('keydown', (e) => {


if (e.code === 'Space') jump();
});

checkCollision();
</script>
</body>
</html>

You might also like