Arduino

Details: Kategorie: Arduino; Erstellt: 16. März 2026; Zugriffe: 13

Retro-Klassiker sterben nie! In diesem Projekt kannst du das legendäre „4 Gewinnt“ auf einen Arduino Uno zocken. Die Herausforderung dabei: Ein großes 4" SPI-Display hat eine recht langsame Bildwiederholrate. Doch mit ein paar Programmiertricks läuft das Spiel butterweich und sieht auf dem großen Screen richtig schick aus.

Spiel 179 aus der 200 Arduino Spiele Sammlung.

So funktioniert das Spiel

Gesteuert wird nicht über Touch oder langweilige Tasten, sondern stilecht über einen Rotary Encoder (Drehimpulsgeber).

Auswählen: Durch Drehen des Encoders bewegst du den Auswahl-Cursor über die Spalten.
Setzen: Ein kurzer Druck auf den Taster des Encoders lässt deinen Spielstein in die gewählte Spalte fallen.
Ziel: Wer zuerst vier Steine seiner Farbe (Rot oder Blau) in eine Reihe bringt egal ob waagerecht, senkrecht oder diagonal gewinnt die Runde.
Reset: Du willst das ganze Turnier neu starten? Halte den Taster einfach 3 Sekunden lang gedrückt, um alle Punkte auf Null zu setzen.

Die Verdrahtung

Der Aufbau ist dank SPI-Anbindung des Displays recht übersichtlich. Hier siehst du, wie das Display und der Encoder mit dem Arduino Uno verbunden werden:

Display: CS an Pin 10, DC an Pin 8, Reset an Pin 9 (SPI-Bus).
Encoder: CLK und DT an Pin 2 und 3 (für die Interrupts), SW (Taster) an Pin 4.

Ein Blick in den Code: Die 3 wichtigsten Stellen

Damit das Spiel flüssig läuft und die Logik stimmt, stecken im Sketch ein paar interessante Kniffe:

1. Die Gewinn-Prüfung (Matrix-Check)

Das Herzstück des Spiels. Nach jedem Zug muss der Arduino prüfen, ob eine Viererkette entstanden ist. Hier als Beispiel der horizontale Check

bool checkWin(int p) {
// Horizontaler Check
for (int r = 0; r < 6; r++) {
for (int c = 0; c < 4; c++) {
if (board[c][r] == p && board[c+1][r] == p && board[c+2][r] == p && board[c+3][r] == p) {
return true;
}}}}

Erklärung: Da das Spielfeld ein 2D-Array (also eine Matrix) ist, kannst du Schleifen laufen, die immer vier benachbarte Felder vergleichen. Sobald vier gleiche Spieler-IDs gefunden werden, wird die Gewinnlinie gezeichnet.

2. Performance-Trick: Gezieltes Zeichnen

Anstatt bei jeder Bewegung des Encoders den ganzen Bildschirm neu zu zeichnen (tft.fillScreen), was Sekunden dauern würde, wird nur der Teil neu gezeichnet der auch verändert wurde "Dirty Rectangles".

void drawCursor() {
tft.fillRect(90, 8, 300, 24, COLOR_BG); // Nur den Cursor-Bereich löschen
int x = startX + cursorCol * slotSize + slotSize / 2;
tft.fillCircle(x, 20, 8, activeColor);
}

Erklärung: So kannst musste du nur löschen mit fillRect wo sich der Cursor bewegt. Das Gitter und die Texte bleiben stehen. Dadurch reagiert das Display blitzschnell auf deine Drehungen.

3. Die Zeitmessung für den Reset

Um zwischen einem Stein-Wurf (kurz klicken) und einem Total-Reset (lang halten) zu unterscheiden, wird die Zeit gemessen.

if (digitalRead(button) == LOW) {
unsigned long pressStart = millis();
while (digitalRead(button) == LOW) {
if (millis() - pressStart >= 3000) { // 3 Sekunden erreicht?
scoreP1 = 0; scoreP2 = 0; // Highscore löschen
resetBoard();
}
}
}

Erklärung: Die Funktion millis() gibt dir die Millisekunden seit dem Start des Arduinos "zurück". So kannst du den Startwert des Klicks mit der aktuellen Zeit verglkeichen. Ist die Differenz größer als 3000ms, wird der Turnierstand gelöscht.

Zwei Versionen für dein Projekt

Es gibt zwei Varianten des Codes, je nachdem, wie du spielen möchtest:

Turnier-Modus (mit Punkten): Diese Version zeigt links und rechts riesige Zahlen für den Punktestand an. Ideal für Duelle „Best of 9“. Wer zuerst 5 Siege hat, ist der Champion.
Klassik-Modus (ohne Punkte): Ein puristisches Design mit einem schlichten schwarzen Rand um das Gitter ohne dass jemand über die gewonnen Spiele Buch führt.

Viel Spaß beim Nachbauen und Zocken!

Der Arduino Code für das 4 Gewinnt Spiel mit Punktestand

// krerativekiste.de

#include <SPI.h>
#include <ILI9486_SPI.h>
#include <Encoder.h>

// --- HARDWARE SETUP ---
ILI9486_SPI tft(10, 8, 9); 
Encoder meinEnc(2, 3);
const int button = 4;  

// --- FARBEN (565 Format) ---
#define COLOR_GRID    0xFFFF // Weiß
#define COLOR_BG      0x0000 // Schwarz
#define COLOR_P1      0xF800 // Rot
#define COLOR_P2      0x001F // Blau
#define COLOR_TEXT    0xFFFF // Weiß

// --- LAYOUT (480x320) ---
const int startX = 100;     
const int startY = 40;      
const int slotSize = 40;    
const int radius = 17;      

// --- GLOBALE VARIABLEN ---
int board[7][6]; 
int activePlayer = 1;
int cursorCol = 3;
long oldPosition  = -999;
bool gameOver = false;

// PUNKTESTAND
int scoreP1 = 0;
int scoreP2 = 0;

// --- FUNKTIONEN ---

void drawScores() {
  // Alten Punktestand übermalen (schwarze Boxen links und rechts)
  tft.fillRect(10, 130, 80, 60, COLOR_BG);
  tft.fillRect(390, 130, 80, 60, COLOR_BG);
  
  tft.setTextSize(7); // RIESIGE Zahlen
  
  // Spieler 1 (Rot) Links
  tft.setTextColor(COLOR_P1);
  tft.setCursor(30, 130);
  tft.print(scoreP1);
  
  // Spieler 2 (Blau) Rechts
  tft.setTextColor(COLOR_P2);
  tft.setCursor(410, 130);
  tft.print(scoreP2);
}

void drawWinLine(int c1, int r1, int c2, int r2) {
  int x1 = startX + c1 * slotSize + slotSize / 2;
  int y1 = startY + (5 - r1) * slotSize + slotSize / 2;
  int x2 = startX + c2 * slotSize + slotSize / 2;
  int y2 = startY + (5 - r2) * slotSize + slotSize / 2;

  uint16_t winColor = (activePlayer == 1) ? COLOR_P1 : COLOR_P2;
  
  for (int i = -2; i <= 2; i++) {
    tft.drawLine(x1 + i, y1, x2 + i, y2, winColor);
    tft.drawLine(x1, y1 + i, x2, y2 + i, winColor);
  }
}

void drawSlot(int c, int r, uint16_t color, bool filled) {
  int x = startX + c * slotSize + slotSize / 2;
  int y = startY + (5 - r) * slotSize + slotSize / 2;
  if (filled) {
    tft.fillCircle(x, y, radius, color);
  } else {
    tft.drawCircle(x, y, radius, color);
  }
}

bool checkWin(int p) {
  for (int r = 0; r < 6; r++) {
    for (int c = 0; c < 4; c++) {
      if (board[c][r] == p && board[c+1][r] == p && board[c+2][r] == p && board[c+3][r] == p) {
        drawWinLine(c, r, c + 3, r); return true;
      }
    }
  }
  for (int c = 0; c < 7; c++) {
    for (int r = 0; r < 3; r++) {
      if (board[c][r] == p && board[c][r+1] == p && board[c][r+2] == p && board[c][r+3] == p) {
        drawWinLine(c, r, c, r + 3); return true;
      }
    }
  }
  for (int c = 0; c < 4; c++) {
    for (int r = 0; r < 3; r++) {
      if (board[c][r] == p && board[c+1][r+1] == p && board[c+2][r+2] == p && board[c+3][r+3] == p) {
        drawWinLine(c, r, c + 3, r + 3); return true;
      }
    }
  }
  for (int c = 0; c < 4; c++) {
    for (int r = 3; r < 6; r++) {
      if (board[c][r] == p && board[c+1][r-1] == p && board[c+2][r-2] == p && board[c+3][r-3] == p) {
        drawWinLine(c, r, c + 3, r - 3); return true;
      }
    }
  }
  return false;
}

void drawCursor() {
  tft.fillRect(90, 8, 300, 24, COLOR_BG); 
  int x = startX + cursorCol * slotSize + slotSize / 2;
  uint16_t col = (activePlayer == 1) ? COLOR_P1 : COLOR_P2;
  tft.fillCircle(x, 20, 8, col); 
}

void resetBoard() {
  // Wenn einer bereits 5 Punkte hatte, startet das nächste Spiel bei 0:0
  if (scoreP1 >= 5 || scoreP2 >= 5) {
    scoreP1 = 0;
    scoreP2 = 0;
  }

  tft.fillScreen(COLOR_BG);
  
  // URL unten in der Mitte (Größe 2 = 192px breit -> X=144 für Zentrierung)
  tft.setTextColor(COLOR_TEXT);
  tft.setTextSize(2);
  tft.setCursor(144, 290);
  tft.print("kreativekiste.de");

  drawScores();
  
  for (int c = 0; c < 7; c++) {
    for (int r = 0; r < 6; r++) {
      board[c][r] = 0;
      drawSlot(c, r, COLOR_GRID, false);
    }
  }
  gameOver = false;
  activePlayer = 1;
  drawCursor();
}

void dropPiece() {
  for (int r = 0; r < 6; r++) {
    if (board[cursorCol][r] == 0) {
      board[cursorCol][r] = activePlayer;
      drawSlot(cursorCol, r, (activePlayer == 1) ? COLOR_P1 : COLOR_P2, true);
      
      if (checkWin(activePlayer)) {
        // Punkt vergeben
        if (activePlayer == 1) scoreP1++;
        else scoreP2++;
        
        drawScores(); // Neue Punkte sofort anzeigen
        
        tft.fillRect(40, 140, 400, 40, COLOR_BG); 
        tft.setTextColor(COLOR_TEXT);
        tft.setTextSize(3);
        
        // Check auf Gesamtsieg (5 Punkte)
        if (scoreP1 >= 5 || scoreP2 >= 5) {
          tft.setCursor(51, 150); 
          tft.print("GESAMT-SIEG SPIELER ");
          tft.print(activePlayer);
        } else {
          tft.setCursor(69, 150);
          tft.print("RUNDE AN SPIELER ");
          tft.print(activePlayer);
        }
        gameOver = true;
      } else {
        bool isDraw = true;
        for(int i=0; i<7; i++) if(board[i][5] == 0) isDraw = false;
        if(isDraw) {
          tft.fillRect(70, 140, 340, 40, COLOR_BG);
          tft.setTextColor(COLOR_TEXT);
          tft.setTextSize(3);
          tft.setCursor(114, 150);
          tft.print("UNENTSCHIEDEN!");
          gameOver = true;
        } else {
          activePlayer = (activePlayer == 1) ? 2 : 1;
          drawCursor();
        }
      }
      break;
    }
  }
}

void setup() {
  pinMode(button, INPUT_PULLUP);
  tft.setSpiKludge(false);
  tft.init(); 
  tft.setRotation(3);
  resetBoard();
}

void loop() {
  // 1. Taster abfragen (Kurzer und Langer Druck)
  if (digitalRead(button) == LOW) {
    unsigned long pressStart = millis();
    bool isLongPress = false;
    
    // Warten, solange der Taster gedrückt gehalten wird
    while (digitalRead(button) == LOW) {
      if (millis() - pressStart >= 3000) { 
        isLongPress = true;
        
        // Visuelles Feedback beim Zurücksetzen
        tft.fillRect(70, 140, 340, 40, COLOR_BG); 
        tft.setTextColor(COLOR_TEXT);
        tft.setTextSize(3);
        tft.setCursor(141, 150);
        tft.print("NEUSTART...");
        
        while (digitalRead(button) == LOW); // Warten bis losgelassen wird
        break;
      }
    }

    // A: Langer Druck ausgeführt
    if (isLongPress) {
      scoreP1 = 0;
      scoreP2 = 0;
      resetBoard();
      delay(200);
      return; // Schleife abbrechen und neu starten
    }

    // B: Kurzer Druck ausgeführt
    if (gameOver) {
      resetBoard(); // Startet nächste Runde
      delay(200);
    } else {
      dropPiece();  // Stein fallen lassen
      delay(200);
    }
  }

  // 2. Encoder abfragen (nur wenn das Spiel läuft)
  if (!gameOver) {
    long newPosition = meinEnc.read() / 4;
    if (newPosition != oldPosition) {
      if (newPosition > oldPosition) cursorCol++;
      else cursorCol--;
      
      if (cursorCol < 0) cursorCol = 0;
      if (cursorCol > 6) cursorCol = 6;
      
      drawCursor();
      oldPosition = newPosition;
    }
  }
}

Der Arduino Code für das 4 Gewinnt Spiel ohne Punktestand

#include <SPI.h>
#include <ILI9486_SPI.h>
#include <Encoder.h>

// --- HARDWARE SETUP ---
ILI9486_SPI tft(10, 8, 9); 
Encoder meinEnc(2, 3);
const int button = 4;  

// --- FARBEN (565 Format) ---
#define COLOR_GRID    0xFFFF // Weiß
#define COLOR_BG      0x0000 // Schwarz
#define COLOR_P1      0xF800 // Rot
#define COLOR_P2      0x001F // Blau
#define COLOR_TEXT    0xFFFF // Weiß

// --- GARANTIERT PASSENDES LAYOUT (480x320) ---
const int startX = 100;     // Schiebt das Gitter nach oben
const int startY = 40;      // Schiebt das Gitter nach unten
const int slotSize = 40;    // Feldgröße
const int radius = 17;      // Kreisradius

int board[7][6]; 
int activePlayer = 1;
int cursorCol = 3;
long oldPosition  = -999;
bool gameOver = false;

void drawVerticalText(String text, int x, int y, int size) {
  tft.setTextSize(size);
  tft.setTextColor(COLOR_TEXT);
  for (int i = 0; i < text.length(); i++) {
    tft.setCursor(x, y + (i * size * 8)); 
    tft.print(text[i]);
  }
}

void drawWinLine(int c1, int r1, int c2, int r2) {
  int x1 = startX + c1 * slotSize + slotSize / 2;
  int y1 = startY + (5 - r1) * slotSize + slotSize / 2;
  int x2 = startX + c2 * slotSize + slotSize / 2;
  int y2 = startY + (5 - r2) * slotSize + slotSize / 2;

  uint16_t winColor = (activePlayer == 1) ? COLOR_P1 : COLOR_P2;
  
  for (int i = -2; i <= 2; i++) {
    tft.drawLine(x1 + i, y1, x2 + i, y2, winColor);
    tft.drawLine(x1, y1 + i, x2, y2 + i, winColor);
  }
}

void drawSlot(int c, int r, uint16_t color, bool filled) {
  int x = startX + c * slotSize + slotSize / 2;
  int y = startY + (5 - r) * slotSize + slotSize / 2;
  if (filled) {
    tft.fillCircle(x, y, radius, color);
  } else {
    tft.drawCircle(x, y, radius, color);
  }
}

bool checkWin(int p) {
  for (int r = 0; r < 6; r++) {
    for (int c = 0; c < 4; c++) {
      if (board[c][r] == p && board[c+1][r] == p && board[c+2][r] == p && board[c+3][r] == p) {
        drawWinLine(c, r, c + 3, r); return true;
      }
    }
  }
  for (int c = 0; c < 7; c++) {
    for (int r = 0; r < 3; r++) {
      if (board[c][r] == p && board[c][r+1] == p && board[c][r+2] == p && board[c][r+3] == p) {
        drawWinLine(c, r, c, r + 3); return true;
      }
    }
  }
  for (int c = 0; c < 4; c++) {
    for (int r = 0; r < 3; r++) {
      if (board[c][r] == p && board[c+1][r+1] == p && board[c+2][r+2] == p && board[c+3][r+3] == p) {
        drawWinLine(c, r, c + 3, r + 3); return true;
      }
    }
  }
  for (int c = 0; c < 4; c++) {
    for (int r = 3; r < 6; r++) {
      if (board[c][r] == p && board[c+1][r-1] == p && board[c+2][r-2] == p && board[c+3][r-3] == p) {
        drawWinLine(c, r, c + 3, r - 3); return true;
      }
    }
  }
  return false;
}

void drawCursor() {
  tft.fillRect(90, 8, 300, 24, COLOR_BG); 
  
  int x = startX + cursorCol * slotSize + slotSize / 2;
  uint16_t col = (activePlayer == 1) ? COLOR_P1 : COLOR_P2;
  tft.fillCircle(x, 20, 8, col); 
}

void resetGame() {
  tft.fillScreen(COLOR_BG);
  drawVerticalText("kreativekiste.de", 30, 32, 2); 
  drawVerticalText("4 GEWINNT", 430, 88, 2);
  
  for (int c = 0; c < 7; c++) {
    for (int r = 0; r < 6; r++) {
      board[c][r] = 0;
      drawSlot(c, r, COLOR_GRID, false);
    }
  }
  gameOver = false;
  activePlayer = 1;
  drawCursor();
}

void setup() {
  pinMode(button, INPUT_PULLUP);
  tft.setSpiKludge(false);
  tft.init(); 
  tft.setRotation(3);
  resetGame();
}

void loop() {
  if (gameOver) {
    if (digitalRead(button) == LOW) {
      delay(300);
      resetGame();
    }
    return;
  }

  // Encoder abfragen
  long newPosition = meinEnc.read() / 4;
  if (newPosition != oldPosition) {
    if (newPosition > oldPosition) cursorCol++;
    else cursorCol--;
    
    if (cursorCol < 0) cursorCol = 0;
    if (cursorCol > 6) cursorCol = 6;
    
    drawCursor();
    oldPosition = newPosition;
  }

  // Stein setzen
  if (digitalRead(button) == LOW) {
    delay(50);
    for (int r = 0; r < 6; r++) {
      if (board[cursorCol][r] == 0) {
        board[cursorCol][r] = activePlayer;
        drawSlot(cursorCol, r, (activePlayer == 1) ? COLOR_P1 : COLOR_P2, true);
        
        if (checkWin(activePlayer)) {
          tft.fillRect(70, 140, 340, 40, COLOR_BG); 
          tft.setTextColor(COLOR_TEXT);
          tft.setTextSize(3);
          tft.setCursor(90, 150);
          tft.print("SIEG SPIELER ");
          tft.print(activePlayer);
          gameOver = true;
        } else {
          bool isDraw = true;
          for(int i=0; i<7; i++) if(board[i][5] == 0) isDraw = false;
          if(isDraw) {
            tft.fillRect(70, 140, 340, 40, COLOR_BG);
            tft.setTextColor(COLOR_TEXT);
            tft.setTextSize(3);
            tft.setCursor(90, 150);
            tft.print("UNENTSCHIEDEN!");
            gameOver = true;
          } else {
            activePlayer = (activePlayer == 1) ? 2 : 1;
            drawCursor();
          }
        }
        while(digitalRead(button) == LOW); 
        break;
      }
    }
    delay(200);
  }
}

Ronnie

schwäbischer tüftler und bastler, kraftsportler, neurodivers, 45 Jahre, 1 Frau, 5 Kinder und 1003 Ideen.