Klicks 🖱️

Ein gezeichnetes Bild ist schön — aber ein Spiel wird erst spannend, wenn der Spieler mitmachen kann. Dafür gibt es die Hilfsfunktion onClick:

onClick(x, y, breite, höhe, handler)

Damit sagst du: „Wenn jemand in dieses Rechteck klickt, dann führe diese Funktion (handler) aus." Die ersten vier Zahlen beschreiben den klickbaren Bereich — genau wie bei fillRect: obere linke Ecke plus Breite und Höhe.

💡 onClick ist eine fertige Hilfsfunktion aus dem Spiele-Template. Die Canvas-Felder in diesem Kapitel sind wirklich anklickbar — probier es aus!

Der erste Knopf

Deinen Zeichen-Code schreibst du ab jetzt in eine Funktion namens draw und exportierst sie. Die Umgebung ruft draw für dich auf — du musst das nicht selbst tun. (Das state in den Klammern brauchen wir gleich; für den ersten Knopf kannst du es noch ignorieren.)

Wir zeichnen ein Rechteck und legen mit onClick einen klickbaren Bereich auf dieselbe Stelle. Der handler ist eine Funktion, die beim Klick aufgerufen wird — hier schreibt sie eine Nachricht in die Konsole.

Klick auf den Knopf 👇

Funktionen als Argumente

Ist dir aufgefallen, dass wir onClick als letztes eine ganze Funktion übergeben? Das ist kein Zufall: In JavaScript ist eine Funktion ein Wert, den du wie eine Zahl oder einen Text weiterreichen kannst.

Die kürzeste Schreibweise für so eine Funktion ist die Pfeil-Funktion:

() => {
  // hier steht, was passieren soll
}

Die runden Klammern () sind die (hier leeren) Parameter, der Pfeil => trennt sie vom Funktions-Körper { ... }. Diese Funktion hat keinen Namen — du gibst sie direkt dort an, wo du sie brauchst.

Genau das macht onClick möglich: Wir übergeben eine Funktion, aber sie wird nicht sofort ausgeführt. onClick merkt sie sich und ruft sie erst dann auf, wenn wirklich in den Bereich geklickt wird:

onClick(50, 50, 100, 100, () => {
  console.log("Erst beim Klick!")
})

Eine Funktion, die man einer anderen Funktion übergibt, damit diese sie „bei Gelegenheit" aufruft, nennt man Callback. Ohne dieses Prinzip könnte onClick ja gar nicht wissen, was beim Klick geschehen soll.

Du musst die Funktion übrigens nicht direkt hinschreiben — du kannst genauso gut eine ganz normale, benannte Funktion übergeben. Wichtig: Du gibst nur ihren Namen an, ohne Klammern () dahinter — sonst würdest du sie sofort aufrufen, statt sie zu übergeben:

function sagHallo() {
  console.log("Hallo!")
}

onClick(50, 50, 100, 100, sagHallo)   // die Funktion selbst — ohne ()

💡 Für kurze Aktionen, die nur an einer Stelle gebraucht werden, benutzen wir ab jetzt aber meistens die kurze Pfeil-Schreibweise () => { ... }.

Etwas verändern: der Zustand und die Moves

Meistens soll ein Klick das Bild verändern. Um den „Zustand" (engl. state) — also was gerade gilt — musst du dich aber nicht selbst kümmern: Die Umgebung verwaltet ihn für dich und reicht ihn deiner Funktion als Parameter state herein. In draw(state) liest du nur daraus, was du zeichnen sollst.

Ändern darfst du den Zustand nicht direkt — dafür gibt es fertige Funktionen, die Moves heißen. Rufst du im handler einen Move auf, passiert zweierlei automatisch:

  1. der Move ändert den Zustand, und
  2. die Umgebung ruft danach dein draw(state) mit dem neuen Zustand erneut auf.

Du rufst draw also nie selbst auf. Im nächsten Beispiel wächst ein Quadrat bei jedem Klick: draw(state) zeichnet es in der Größe state.größe, und der handler ruft den Move makeBigger() auf, der state.größe vergrößert.

💡 Genau so funktioniert später auch dein richtiges Spiel mit boardgame.io: Du liest den Zustand und rufst Moves auf — den Rest erledigt die Umgebung.

Mehrere Knöpfe

Du kannst beliebig viele onClick-Bereiche festlegen — jeder mit eigenem handler. Ein Move darf auch Angaben entgegennehmen: Hier rufen drei Knöpfe denselben Move waehleFarbe(farbe) auf, jeder mit einer anderen Farbe, und bestimmen so die Farbe des großen Quadrats:

Klick-Bereiche in einer Schleife

Weil die Position eines onClick-Bereichs einfach berechnet werden kann, lassen sich ganze Raster anlegen. Dieses 3×3-Feld merkt sich im Zustand, welche Zellen schon angeklickt wurden: Der Move markiere(schlüssel) trägt die geklickte Zelle in state.markiert ein, und draw(state) malt in jede markierte Zelle ein ✗:

Tipp: den Klick-Bereich sichtbar machen

Ein häufiger Fehler: Der gezeichnete Knopf und der onClick-Bereich liegen nicht an derselben Stelle — dann klickst du auf den Knopf und nichts passiert. Wenn ein Klick nicht funktioniert, zeichne den Bereich zur Kontrolle kurz als Umriss mit denselben vier Zahlen:

onClick(x, y, breite, höhe, handler)
ctx.strokeStyle = "red"
ctx.strokeRect(x, y, breite, höhe)   // dieselben vier Zahlen!

💡 Liegt der rote Rahmen genau auf deinem Knopf? Dann passen die Zahlen.

Übung 1 🎯 — Dein eigener Zähler

Baue einen Klick-Zähler in draw(state):

  • Zeichne einen Knopf (ein Rechteck mit Beschriftung).
  • Zeige den aktuellen Zählerstand state.anzahl mit fillText an.
  • Lege mit onClick einen klickbaren Bereich auf den Knopf, dessen handler den Move hochzaehlen() aufruft — er erhöht state.anzahl um 1.

Um das Neuzeichnen kümmert sich die Umgebung. Klick im Canvas oben links, um deine Lösung zu testen — die Prüfung simuliert außerdem automatisch einen Klick.

Übung 2 🎯 — Ein Schalter

Baue einen Schalter, der bei jedem Klick zwischen zwei Farben umschaltet (z. B. rot und grün). Der Zustand state.an sagt, ob der Schalter „an" ist: Zeichne den Schalter je nach state.an in der einen oder anderen Farbe und lege einen onClick-Bereich darauf, dessen handler den Move umschalten() aufruft.

Geschafft! 🎉

Du kannst jetzt das Canvas interaktiv machen: Du schreibst eine Funktion draw(state), die den Zustand liest und zeichnet, legst mit onClick klickbare Bereiche fest und rufst in den handlern Moves auf. Um den Zustand zu speichern und nach jedem Move neu zu zeichnen, kümmert sich die Umgebung — du liest nur und löst Moves aus.

Damit hast du alle Bausteine für ein eigenes Brettspiel: Formen, Farben, Text, Bilder — und jetzt auch die Steuerung. 🚀

🎮 Bereit fürs Finale? Im Kapitel Das Spielbrett zeichnen führst du genau diese Bausteine mit deinem boardgame.io-Tic-Tac-Toe zusammen und zeichnest das Spielfeld selbst.

  1. Koordinatensystem 📐
  2. Rechtecke ▭
  3. Farben 🌈
  4. Andere Formen ⚪
  5. Text 🔤
  6. Bilder 🖼️
  7. Klicks 🖱️ — du bist hier

← Zurück zur Canvas-Übersicht