Zum Inhalt springen
BetaEN
Lektion 11 von 11JavaScript

JavaScript · Lektion 11 · 45 Minuten

Projekt: Klick-Jagd im Browser

Das lernst du

  • Ein Element mit JavaScript an eine zufällige Stelle setzen
  • Mit setInterval eine Uhr rückwärts laufen lassen
  • HTML, CSS und JavaScript zu einem fertigen Spiel verbinden

Dein erstes Browserspiel

Jetzt baust du alles zusammen: ein Spielfeld aus HTML, Farben aus CSS und Spielregeln aus JavaScript. Ein Ziel springt im Feld herum. Du hast 20 Sekunden – wie oft triffst du?

Elemente frei platzieren

Mit position: absolute kannst du ein Element genau dorthin setzen, wo du willst. left ist der Abstand vom linken Rand, top der Abstand von oben. Das Feld drumherum braucht position: relative:

<style>
  #feld { position: relative; width: 300px; height: 150px; background: #eef; }
  .punkt { position: absolute; width: 20px; height: 20px; border-radius: 50%; background: crimson; }
</style>

<div id="feld">
  <div class="punkt" style="left: 10px; top: 10px"></div>
  <div class="punkt" style="left: 140px; top: 65px"></div>
  <div class="punkt" style="left: 270px; top: 120px"></div>
</div>

Zufällige Stellen

Math.random() liefert eine Kommazahl von 0 bis knapp unter 1. Mal 341 und mit Math.floor abgerundet ergibt das eine ganze Zahl von 0 bis 340. Klick mehrmals auf den Knopf:

<style>
  #feld { position: relative; width: 300px; height: 150px; background: #eef; }
  #punkt { position: absolute; left: 140px; top: 65px; width: 20px; height: 20px; border-radius: 50%; background: crimson; }
</style>

<div id="feld"><div id="punkt"></div></div>
<button id="los">Woanders hin!</button>

<script>
  const punkt = document.querySelector("#punkt");
  document.querySelector("#los").addEventListener("click", () => {
    const x = Math.floor(Math.random() * 281);
    const y = Math.floor(Math.random() * 131);
    punkt.style.left = x + "px";
    punkt.style.top = y + "px";
    console.log("Neue Stelle:", x, y);
  });
</script>

Warum 281 und nicht 300? Der Punkt ist 20 breit. Bei left: 300px läge er schon ganz außerhalb.

Eine Uhr mit setInterval

setInterval(funktion, 1000) ruft die Funktion jede Sekunde auf. Mit clearInterval hältst du sie wieder an:

<p>Countdown: <strong id="anzeige">5</strong></p>

<script>
  let rest = 5;
  const uhr = setInterval(() => {
    rest = rest - 1;
    document.querySelector("#anzeige").textContent = rest;
    if (rest === 0) {
      clearInterval(uhr);
      console.log("Start!");
    }
  }, 1000);
</script>

In der Aufgabe ist die Uhr schon fertig. Es fehlt nur die Funktion treffer().

Weiterbauen: Mach das Ziel mit jedem Treffer ein bisschen kleiner. Zeig am Ende eine große Meldung „Spiel vorbei – 17 Punkte!“ im Feld an. Oder baue einen Neustart-Knopf, der punkte und zeit zurücksetzt und die Uhr neu startet.

Deine Aufgabe

Jetzt bist du dran

Mach die Klick-Jagd fertig. Schreib die Funktion treffer(). Sie erhöht punkte um 1, schreibt die Zahl in #punkte und setzt das Ziel #ziel an eine zufällige Stelle im Spielfeld: left zwischen 0 und 340, top zwischen 0 und 220 (jeweils mit "px" dahinter). Sie wird bei jedem Klick aufs Ziel aufgerufen – aber nur, solange noch Zeit übrig ist.

<style>
  body { font-family: sans-serif; }
  #feld { position: relative; width: 400px; height: 280px; background: #102030; border-radius: 12px; }
  #ziel { position: absolute; left: 170px; top: 110px; width: 60px; height: 60px;
          border: none; border-radius: 50%; background: tomato; font-size: 28px; cursor: pointer; }
</style>

<p>Punkte: <strong id="punkte">0</strong> · Zeit: <strong id="zeit">20</strong> s</p>
<div id="feld"><button id="ziel">🎯</button></div>

<script>
  let punkte = 0;
  let zeit = 20;
  const ziel = document.querySelector("#ziel");

  function treffer() {
    // Punkte zählen, anzeigen, Ziel versetzen
  }

  ziel.addEventListener("click", () => {
    if (zeit > 0) {
      treffer();
    }
  });

  const uhr = setInterval(() => {
    zeit = zeit - 1;
    document.querySelector("#zeit").textContent = zeit;
    if (zeit === 0) {
      clearInterval(uhr);
      ziel.textContent = "🏁";
      console.log("Zeit um! Punkte:", punkte);
    }
  }, 1000);
</script>

Ohne Hinweise gelöst gibt es einen ⭐ auf deiner Fortschrittsseite.

Lösung anzeigen

Versuch es erst selbst – aus Fehlern lernt man am meisten. Hier ist eine mögliche Lösung:

<style>
  body { font-family: sans-serif; }
  #feld { position: relative; width: 400px; height: 280px; background: #102030; border-radius: 12px; }
  #ziel { position: absolute; left: 170px; top: 110px; width: 60px; height: 60px;
          border: none; border-radius: 50%; background: tomato; font-size: 28px; cursor: pointer; }
</style>

<p>Punkte: <strong id="punkte">0</strong> · Zeit: <strong id="zeit">20</strong> s</p>
<div id="feld"><button id="ziel">🎯</button></div>

<script>
  let punkte = 0;
  let zeit = 20;
  const ziel = document.querySelector("#ziel");

  function treffer() {
    punkte = punkte + 1;
    document.querySelector("#punkte").textContent = punkte;
    ziel.style.left = Math.floor(Math.random() * 341) + "px";
    ziel.style.top = Math.floor(Math.random() * 221) + "px";
  }

  ziel.addEventListener("click", () => {
    if (zeit > 0) {
      treffer();
    }
  });

  const uhr = setInterval(() => {
    zeit = zeit - 1;
    document.querySelector("#zeit").textContent = zeit;
    if (zeit === 0) {
      clearInterval(uhr);
      ziel.textContent = "🏁";
      console.log("Zeit um! Punkte:", punkte);
    }
  }, 1000);
</script>