Vier Gewinnt ist ein klassisches Strategiespiel für zwei Spieler. Das Ziel: Als Erster vier Spielsteine in einer Reihe platzieren – horizontal, vertikal oder diagonal. Unten kannst du das Spiel direkt ausprobieren, danach erkläre ich, wie es in JavaScript programmiert wurde.
Wie funktioniert das Spiel?
Das Spiel ist vollständig in JavaScript mit dem Canvas-Element umgesetzt – keine externen Bibliotheken, kein Framework. Hier die wichtigsten Konzepte:
Das Spielfeld als 2D-Array
Das Spielfeld (6 Zeilen × 7 Spalten) wird als verschachteltes Array gespeichert:
// Spielfeld initialisieren
let board = Array.from({length: 6}, () => Array(7).fill(0));
// 0 = leer, 1 = Spieler 1 (Rot), 2 = Spieler 2 / Computer (Gelb)Stein fallen lassen
Beim Klick auf eine Spalte wird der unterste freie Platz gesucht – die Gravitation wird also einfach von unten nach oben geprüft:
function dropPiece(col) {
for (let row = ROWS - 1; row >= 0; row--) {
if (board[row][col] === 0) {
board[row][col] = currentPlayer;
return row;
}
}
return -1; // Spalte voll
}Gewinnbedingung prüfen
Nach jedem Zug werden alle vier Richtungen (horizontal, vertikal, beide Diagonalen) auf vier aufeinanderfolgende Steine desselben Spielers geprüft:
const directions = [[0,1], [1,0], [1,1], [1,-1]];
for (const [dr, dc] of directions) {
let cells = [[row, col]];
for (let i = 1; i < 4; i++) {
const nr = row + dr * i, nc = col + dc * i;
if (board[nr]?.[nc] !== player) break;
cells.push([nr, nc]);
}
if (cells.length === 4) return cells; // Gewinner!
}Die KI: Minimax mit Alpha-Beta-Pruning
Der schwere Modus verwendet den Minimax-Algorithmus mit Alpha-Beta-Pruning. Der Computer simuliert dabei alle möglichen Zugfolgen bis zu einer bestimmten Tiefe (hier 5 Züge voraus) und wählt den besten Zug:
function minimax(depth, alpha, beta, maximizing) {
if (checkWin(2)) return {score: 100000 + depth}; // Computer gewinnt
if (checkWin(1)) return {score: -(100000 + depth)}; // Spieler gewinnt
if (depth === 0 || isBoardFull()) return {score: scoreBoard()};
if (maximizing) {
let best = {score: -Infinity};
for (const col of getValidCols()) {
const row = dropPiece(col); board[row][col] = 2;
const result = minimax(depth - 1, alpha, beta, false);
board[row][col] = 0; // Zug rückgängig
if (result.score > best.score) best = {score: result.score, col};
alpha = Math.max(alpha, best.score);
if (alpha >= beta) break; // Pruning
}
return best;
}
// ... minimizing analog
}Alpha-Beta-Pruning beschleunigt die Suche erheblich: Züge, die schlechter sind als bereits gefundene Optionen, werden nicht weiter untersucht.
Stellungsbewertung
Wenn die maximale Suchtiefe erreicht wird, bewertet eine Heuristik die aktuelle Stellung. Sie zählt, wie viele günstige 4er-Fenster jeder Spieler hat:
function scoreWindow(window, player) {
const pCount = window.filter(v => v === player).length;
const eCount = window.filter(v => v === 0).length;
if (pCount === 4) return 100;
if (pCount === 3 && eCount === 1) return 5;
if (pCount === 2 && eCount === 2) return 2;
return 0;
}Fazit
Mit etwa 250 Zeilen JavaScript lässt sich ein vollständiges, spielbares Vier-Gewinnt mit KI realisieren. Der Minimax-Algorithmus ist dabei das Herzstück – er ist auch die Basis für viele andere Brettspiele wie Schach oder Dame.
Ich entwickle auf webaufbau.ch individuelle Webanwendungen – von interaktiven Tools bis hin zu komplexen Webapplikationen. Sag mir, was du brauchst.
Die Spielentwicklung von Vier Gewinnt in JavaScript ist ein spannendes Beispiel für die Kombination von klassischem Gameplay und modernen Technologien. Hier habe ich das Minimax-Algorithmus implementiert, um eine künstliche Intelligenz zu konzipieren, die dir sowohl einfache als auch herausfordernde Gegner bietet. Diese Umsetzung zeigt nicht nur, wie man interaktive Elemente erstellt, sondern auch, wie Algorithmen strategisches Denken im Spiel fördern können.
