Wir programmieren ein Game – Kill die Ratte mit HTML, CSS und Javascript

Laut Statistik sind ja unter meinen Lesern / Zuschauer ganz junge wie auch ganz alte Säcke (so wie ich einer bin) und darum erinnern sich nur ein Teil an ein legendäres Game aus den Nuller Jahren und zwar hiess es Moorhuhnjagd. Heute werden wir was ganz ähnliches machen und zwar ein Game mit HTML, CSS und Javascript mit dem Name „Kill die Ratte2

Video

HTML

<div id="spielfeld">
      <h1>🐀🐀 Rattenplage - Kill die Ratte 🐀🐀</h1>
      <button id="start-btn">Start Game</button>
    </div>
    <div id="scoreboard" style="display: none">Time: <span id="time">10</span>s | Score: <span id="score">0</span></div>
    <div id="spielObjekt"></div>
    <div id="gameover" style="display: none">
      <h1>Game Over!</h1>
      <p>Your Score: <span id="resultat"></span></p>
      <div class="ratten">Generierte Ratten: <span id="anzRatten">0</span></div>
      <button onclick="location.reload()">Play Again</button>
    </div>

CSS

:root {
  --bg: #000;
  --farbe: #edc600;
  --schriftfarbe: #fff;
}
body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000000;
  font-size: 1.5rem;
  user-select: none;
  position: relative;
  height: 100vh;
}
#spielfeld,
#gameover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg);
  color: var(--schriftfarbe);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
#spielfeld button,
#gameover button {
  font-size: 1.5rem;
  cursor: pointer;
  margin-top: 20px;
  background-color: var(--farbe);
  border: none;
}
#spielObjekt {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
.ratte {
  position: absolute;
  bottom: -50px;
  animation: floatUp linear;
  cursor: pointer;
  font-size: 100px;
}
.ratten,
#anzRatten {
  font-size: 15px;
}
#scoreboard {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.2rem;
  background-color: var(--farbe);

  padding: 8px 15px;
  border-radius: 8px;
  z-index: 3;
}
@keyframes floatUp {
  from {
    bottom: -50px;
    opacity: 1;
  }
  to {
    bottom: 110%;
    opacity: 0.5;
  }
}

Javascript

const startScreen = document.getElementById("spielfeld");
const endScreen = document.getElementById("gameover");
const startBtn = document.getElementById("start-btn");
const spielObjektContainer = document.getElementById("spielObjekt");
const scoreboard = document.getElementById("scoreboard");
const timeDisplay = document.getElementById("time");
const scoreDisplay = document.getElementById("score");
const finalScoreDisplay = document.getElementById("resultat");
const rattenCountDisplay = document.getElementById("anzRatten");

let gameInterval;
let timeInterval;
let timeLeft = 10;
let score = 0;
let generatedRatte = 0;

let gameRunning = false;
function createGameObjekt() {
  if (!gameRunning) return;

  generatedRatte++;
  rattenCountDisplay.textContent = generatedRatte;

  const ratte = document.createElement("div");
  ratte.classList.add("ratte");
  ratte.textContent = "🐀";

  const scale = Math.random() * 1 + 0.6;
  ratte.style.transform = `scale(${scale})`;

  ratte.style.left = Math.random() * (window.innerWidth - 50) + "px";

  const duration = Math.random() * 3 + 4;
  ratte.style.animationDuration = duration + "s";

  ratte.addEventListener("click", () => {
    ratte.remove();
    score++;
    scoreDisplay.textContent = score;
  });
  ratte.addEventListener("animationend", () => {
    ratte.remove();
  });
  spielObjektContainer.appendChild(ratte);
}

function startGame() {
  startScreen.style.display = "none";
  scoreboard.style.display = "block";
  gameRunning = true;

  //Start spawning 
  gameInterval = setInterval(createGameObjekt, 400);

  //Start countdown timer
  timeInterval = setInterval(() => {
    timeLeft--;
    timeDisplay.textContent = timeLeft;

    if (timeLeft <= 0) {
      endGame();
    }
  }, 1000);
}
function endGame() {
  gameRunning = false;
  clearInterval(gameInterval);
  clearInterval(timeInterval);

  scoreboard.style.display = "none";
  endScreen.style.display = "flex";
  finalScoreDisplay.textContent = score;
}

startBtn.addEventListener("click", startGame);