Download the Code Dino für Websites in HTML

Hier kannst du dir das kleine Spiel für Websites herunterladen. Jeder kann es verwenden auf seiner Webseite. Zu integrieren geht das ganze einfach. Einfach HTML Code kopieren und in deine Website einfügen. Es ist egal welches CMS einfach verwenden. Sollte etwas nicht angezeigt werden, schreib mich einfach an. Ich helfe auch im Kommentar Bereich.

div id=“dino-game vim christophjanotta.eu“>
<div class=“score“>Score: <span id=“score“>0</span></div>
<div class=“game“>
<div id=“dino“>🦖</div>
<div id=“cactus“>🌵</div>
</div>
<div class=“info“>Leertaste oder Klick = Springen</div>
</div>

<style>
#dino-game {
font-family: Arial, sans-serif;
max-width: 700px;
margin: 40px auto;
text-align: center;
}

#dino-game .game {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 14px;
background: linear-gradient(to top, #d1fae5 0%, #ecfccb 100%);
border: 3px solid #065f46;
}

#dino {
position: absolute;
bottom: 20px;
left: 60px;
font-size: 60px;
transition: transform 0.1s;
}

#cactus {
position: absolute;
bottom: 20px;
right: -60px;
font-size: 50px;
animation: moveCactus 2s linear infinite;
}

@keyframes moveCactus {
from {
right: -60px;
}
to {
right: 100%;
}
}

.jump {
animation: jump 0.7s ease;
}

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

.score {
font-size: 28px;
margin-bottom: 15px;
font-weight: bold;
color: #064e3b;
}

.info {
margin-top: 15px;
color: #065f46;
}

.game-over {
color: red;
font-size: 32px;
margin-top: 15px;
font-weight: bold;
}

@media (max-width: 600px) {
#dino {
font-size: 48px;
}

#cactus {
font-size: 40px;
}
}
</style>

<script>
const dino = document.getElementById(„dino“);
const cactus = document.getElementById(„cactus“);
const scoreEl = document.getElementById(„score“);
const gameContainer = document.getElementById(„dino-game“);

let jumping = false;
let score = 0;
let gameOver = false;

function jump() {
if (jumping || gameOver) return;

jumping = true;
dino.classList.add(„jump“);

setTimeout(() => {
dino.classList.remove(„jump“);
jumping = false;
}, 700);
}

document.addEventListener(„keydown“, (e) => {
if (e.code === „Space“) {
jump();
}
});

document.addEventListener(„click“, jump);

// Score erhöhen
const scoreInterval = setInterval(() => {
if (!gameOver) {
score++;
scoreEl.textContent = score;
}
}, 200);

// Kollision prüfen
const collision = setInterval(() => {
const dinoBottom =
parseInt(window.getComputedStyle(dino).getPropertyValue(„bottom“));

const cactusLeft =
cactus.getBoundingClientRect().left –
gameContainer.getBoundingClientRect().left;

if (
cactusLeft > 40 &&
cactusLeft < 120 &&
dinoBottom < 80
) {
gameOver = true;

cactus.style.animation = „none“;

const over = document.createElement(„div“);
over.classList.add(„game-over“);
over.innerHTML = „💥 Game Over<br>Seite neu laden zum Neustart“;

gameContainer.appendChild(over);

clearInterval(scoreInterval);
clearInterval(collision);
}
}, 20);
</script>