Dino Nugget Game

Template Instructions
Dino Game

Simple Dino Game

Score: 0
Game Over

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Dino Game</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Simple Dino Game</h1>
<div id=”score”>Score: 0</div>

<div id=”game”>
<div id=”dino”></div>
<div id=”game-over”>Game Over</div>
</div>

<div id=”controls”>
<button id=”startBtn”>Start</button>
<button id=”retryBtn” style=”display: none;”>Retry</button>
</div>

<script src=”script.js”></script>
</body>
</html>

<Style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
text-align: center;
background-color: #f4f4f4;
}

#score {
font-size: 20px;
margin-top: 10px;
}

#game {
width: 100%;
max-width: 600px;
height: 200px;
margin: 20px auto;
border: 2px solid #000;
position: relative;
background-color: #fff;
overflow: hidden;
}

#dino {
width: 40px;
height: 40px;
background-color: green;
position: absolute;
bottom: 0;
left: 50px;
}

.jump {
animation: jump 1s linear;
}

@keyframes jump {
0% { bottom: 0; }
50% { bottom: 200px; }
100% { bottom: 0; }
}

.cactus {
width: 25px;
background-color: red;
position: absolute;
bottom: 0;
right: -25px;
animation: moveCactus 2.5s linear forwards;
}

.cactus.tall {
height: 100px;
}

.cactus.short {
height: 50px;
}

@keyframes moveCactus {
0% { right: -25px; }
100% { right: 100%; }
}

#game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: red;
display: none;
font-weight: bold;
}

#controls {
margin-top: 10px;
}

</style>

<script>
const dino = document.getElementById(“dino”);
const game = document.getElementById(“game”);
const gameOverText = document.getElementById(“game-over”);
const startBtn = document.getElementById(“startBtn”);
const retryBtn = document.getElementById(“retryBtn”);
const scoreDisplay = document.getElementById(“score”);

let gameRunning = false;
let score = 0;
let scoreInterval;
let spawnInterval;
let collisionCheckInterval;
let cacti = [];

document.addEventListener(“keydown”, function(event) {
if ((event.code === “Space” || event.code === “ArrowUp”) && gameRunning) {
jump();
}
});

function jump() {
if (!dino.classList.contains(“jump”)) {
dino.classList.add(“jump”);
setTimeout(() => {
dino.classList.remove(“jump”);
}, 1200);
}
}

function startGame() {
gameRunning = true;
score = 0;
scoreDisplay.textContent = “Score: 0”;
startBtn.style.display = “none”;
retryBtn.style.display = “none”;
gameOverText.style.display = “none”;

cacti = [];

// Score system
scoreInterval = setInterval(() => {
score++;
scoreDisplay.textContent = “Score: ” + score;
}, 100);

// Spawn cacti at random intervals
spawnInterval = setInterval(() => {
if (!gameRunning) return;
spawnCactus();
}, 1000 + Math.random() * 1500);

// Collision detection loop
collisionCheckInterval = setInterval(checkCollision, 20);
}

function spawnCactus() {
const cactus = document.createElement(“div”);
cactus.classList.add(“cactus”);

// Randomly assign tall or short
if (Math.random() < 0.5) {
cactus.classList.add(“short”);
} else {
cactus.classList.add(“tall”);
}

game.appendChild(cactus);
cacti.push(cactus);

// Remove cactus after animation
cactus.addEventListener(“animationend”, () => {
cactus.remove();
cacti = cacti.filter(c => c !== cactus);
});
}

function checkCollision() {
const dinoRect = dino.getBoundingClientRect();

cacti.forEach(cactus => {
const cactusRect = cactus.getBoundingClientRect();

const overlap = !(
dinoRect.top > cactusRect.bottom ||
dinoRect.bottom < cactusRect.top ||
dinoRect.right < cactusRect.left ||
dinoRect.left > cactusRect.right
);

if (overlap) {
endGame();
}
});
}

function endGame() {
gameRunning = false;
gameOverText.style.display = “block”;
retryBtn.style.display = “inline-block”;

// Stop everything
clearInterval(scoreInterval);
clearInterval(spawnInterval);
clearInterval(collisionCheckInterval);

// Remove all cacti
cacti.forEach(cactus => cactus.remove());
cacti = [];
}

function resetGame() {
startGame();
}

startBtn.addEventListener(“click”, startGame);
retryBtn.addEventListener(“click”, resetGame);

</script>