boardgame.io 🎲
In diesem Tutorial baust du Schritt für Schritt ein Tic-Tac-Toe-Spiel mit boardgame.io. Du lernst die grundlegenden Konzepte des Frameworks kennen und wie man sie einsetzt. Am Ende hast du ein funktionierendes, spielbares Spiel — inklusive Computer-Gegner.
Du brauchst nichts zu installieren — alle Übungen laufen direkt im Browser. Dein Fortschritt wird automatisch gespeichert.
💡 Falls du das JavaScript-Grundlagen-Tutorial noch nicht durch hast, schau dir zuerst den JavaScript-Kurs an. Hier setzen wir Variablen, Funktionen, Arrays und Objekte als bekannt voraus.
📌 Info — Das Einzige, was wir dir abnehmen, ist das Zeichnen des Spielfelds (das kommt später). Die Spiellogik, um die es in diesem Tutorial geht, schreibst du komplett selbst — und sie ist exakt dieselbe wie im echten Projekt.
Eine Datei, Kapitel für Kapitel 📄
Du arbeitest das ganze Tutorial über an einer einzigen Datei TicTacToe.js.
Sie startet als Gerüst mit TODO-Kommentaren, und in jedem Kapitel füllst du den
nächsten Teil selbst aus. Deine Datei wird automatisch gespeichert und wandert
mit dir von Kapitel zu Kapitel — am Ende hast du das vollständige Spiel selbst
geschrieben.
Worum geht’s bei boardgame.io?
boardgame.io ist ein Framework, um rundenbasierte Spiele zu bauen. Die Idee: Du beschreibst dein Spiel als ein einfaches JavaScript-Objekt, und das Framework kümmert sich um den Rest — Spielerwechsel, Spielstände, Netzwerk-Multiplayer und sogar einen Bot.
Die zwei wichtigsten Begriffe, die dich durch das ganze Tutorial begleiten:
📌
G— der Spielzustand (game state). Ein ganz normales JavaScript-Objekt, das alles enthält, was das Spiel gerade ausmacht. Bei Tic-Tac-Toe ist das die Belegung der 9 Felder.
📌 Move — ein Spielzug. Eine Funktion, die beschreibt, wie ein Spieler
Gverändert. Bei Tic-Tac-Toe: „setze meine Markierung in dieses Feld“.
Bereit? Dann los: