Dieses Tutorial ist Teil von: ESP32-S3 RGB-LED-Matrix
Ein cooles Projekt zum Nachbauen – sowohl für Spaß als auch für praktische Anwendungen – mit dem ESP32-S3 RGB-Matrix-Modul. Links zu weiteren Videos finden Sie unter diesem Artikel.
ESP32-S3 RGB-LED-Matrix-Projekt 6 - Cible-Spiel
Projekt 6 - Zielspiel (Neigen Sie das Brett, um den Kreis zu treffen)
Projekt 6 ist das finale und interaktivste Projekt dieser ESP32-S3 RGB-LED-Matrix-Serie. Mit dem Onboard-QMI8658C-Bewegungssensor neigen Sie die Platine, um einen Punkt auf der 8×8-Matrix zu bewegen. Eine kreisförmige "Zielzone" befindet sich in der Mitte des Displays. Wenn Ihr Punkt den Kreis berührt, ändert sich die Farbe und (optional) piept ein Summer. Dies schafft ein einfaches, aber überraschend unterhaltsames Balance-/Koordinationsspiel.
Alle sechs Projekte werden in einem einzigen YouTube-Video (eingebettet auf dieser Seite) demonstriert. Der vollständige Game-Code wird automatisch unterhalb dieses Artikels geladen, und Affiliate-Kauf-Links für das Modul erscheinen im Abschnitt des Codes.

ESP32-S3 RGB-LED-Matrixmodul Übersicht
Dieses Modul umfasst:

- ESP32-S3 Mikrocontroller(Wi-Fi + BLE)
- 8×8 RGB-LED-Matrix(64 adressierbare LEDs)
- QMI8658C-Beschleunigungsmesserfür Neigungs- und Orientierungssensorik
- USB-CPort für Strom und Programmierung
- Boot / ZurücksetzenTasten
- VerfügbarGPIO-Pinsfür Add-Ons wie Summer oder Sensoren
Für dieses Spiel ist der Beschleunigungssensor unerlässlich – er meldet kontinuierlich die X/Y-Neigung, wodurch der Punkt basierend auf dem Winkel des Boards sanft bewegt werden kann. Der Videoabschnitt für dieses Projekt zeigt deutlich, wie der Punkt gleitet und reagiert, wenn Sie das Modul nach links/rechts/vorne/hinten neigen.:contentReference[oaicite:0]{index=0}

Im Video behandelte Projekte (Zeitstempel)
- 00:00- Einführung
- 02:01- Installation von ESP32-Boards
- 03:32- Bibliotheken installieren
- 05:32- Projekt 1: Bewegender Punkt
- 11:11- Projekt 2: Textlauf
- 12:59- Projekt 3: HTTP Text
- 16:41- Projekt 4: Tilt Dot
- 18:55- Projekt 5: Pfeil nach oben
- 20:02-Projekt 6: Zielspiel (dieses Projekt)
Dieser Teil des Videos zeigt sowohl die Punktbewegung als auch die Logik zur Kreiserkennung in Aktion, was es einfacher macht zu verstehen, wie sich die Koordinaten verhalten.:contentReference[oaicite:1]{index=1}

ESP32-Boards im Arduino IDE installieren
Wenn Sie die früheren Projekte bereits abgeschlossen haben, ist die Montage des Boards erledigt. Andernfalls folgen Sie:
File > Preferences→ Fügen Sie die ESP32-Board-URL hinzu.Tools > Board > Boards Manager…→ Installiere "ESP32".- Wählen Sie das ESP32-S3-Board aus unter
Tools > Board. - Wählen Sie den richtigen COM-Port aus unter
Tools > Port.
Installation der erforderlichen Bibliotheken
Dieses Spiel verwendet:
Adafruit NeoMatrixAdafruit NeoPixelAdafruit GFXQMI8658(Bewegungsmelder)
Installieren Sie sie über:
Sketch > Include Library > Manage Libraries…- Suche:NeoMatrix→ Installieren
- Abhängigkeiten installieren (GFX+NeoPixel)
- Suchen und installierenQMI8658
Wie das Zielspiel funktioniert
Der QMI8658C-Beschleunigungssensor liefert X- und Y-Neigewerte. Diese werden auf LED-Koordinaten (0-7 in beide Richtungen) abgebildet. Ihr Punkt bewegt sich über die Matrix basierend auf dem Winkel der Platine.
Ein Kreis (oder Ring) wird auf dem Display als die "Zielfläche" gezeichnet. Sie gewinnen einen "Treffer", wenn der Punkt den Kreis überlappt. In diesem Moment:
- Die Zielfarbe ändert sich (zufällig oder vordefiniert)
- Ein optionaler Summer piept (wenn angeschlossen)
Da die Matrix klein ist, wird der Kreis mithilfe einer einfachen Radiusüberprüfung gezeichnet. Das Spiel läuft kontinuierlich, sodass Sie hin und her kippen können, um den Kreis wiederholt zu treffen.
Projekt 6 - Code-Einstellungen (Zielspiel)
Unten sind die wichtigsten benutzeranpassbaren Einstellungen aufgeführt, die sich oben im Sketch befinden. Der vollständige Code wird automatisch unter diesem Artikel angezeigt.
Matrix-Konfiguration
// Matrix configuration
const int MATRIX_PIN = 14;
const int MATRIX_WIDTH = 8;
const int MATRIX_HEIGHT = 8;
Die RGB-Matrix ist fest mit GPIO 14 verbunden - ändern Sie dies nicht.
Helligkeit
uint8_t matrixBrightness = 40; // 0–255
Für den Innenbereich ist 30-60 ideal.
Punkfarbe
// Dot color (R, G, B)
uint8_t dotRed = 255;
uint8_t dotGreen = 255;
uint8_t dotBlue = 255;
Das ist der Punkt, den du durch Kippen des Bretts bewegst.
Kreisfarbe (Zufällig oder Fest)
// Circle (target) color
uint8_t circleRed = 0;
uint8_t circleGreen = 0;
uint8_t circleBlue = 255;
// If true, choose a new random color each time the dot hits
bool randomCircleColor = true;
SetrandomCircleColor = false;wenn Sie eine feste Farbe möchten.
Kreisradius
// Target size (radius)
int targetRadius = 3; // 3 fits well on 8×8 matrix
Größere Radien erleichtern das Spiel; kleinere erschweren es.
Neigungsempfindlichkeit
// Sensitivity of tilt mapping
float tiltScale = 4.0f; // increase = faster movement across screen
Wenn der Punkt zu schnell bewegt wird oder springt, verringern Sie diese Zahl.
Buzzer-Einstellungen (Optional)
// Buzzer pin (optional)
int buzzerPin = 6; // connect buzzer + to pin 6, – to GND
bool useBuzzer = true; // set false to disable sound
Wenn Sie keinen Summer anschließen, stellen Sie einfach einuseBuzzer = false;
Zusammenfassung
Projekt 6 kombiniert alles, was aus früheren Projekten gelernt wurde: Matrizenzeichnung, Beschleunigungssensor-Eingabe, Farbsteuerung, Bewegungsglättung und optionale Geräusche. Das Neigen der Platine bewegt den Punkt, und das Berühren des Kreises ändert seine Farbe und (optional) löst einen Signalton aus. Es ist eine unterhaltsame Demonstration der Bewegungserkennung auf einem kompakten RGB-Display.
Der vollständige "Zielspiel"-Code wird automatisch unter diesem Artikel angezeigt. Sie können sich auch den Abschnitt über Projekt 6 im Video ansehen, um zu sehen, wie sich der Punkt bewegt und wie Treffer erkannt werden. Wenn Sie Ihr eigenes Spiel erstellen möchten, finden Sie unter dem Code-Bereich Affiliate-Links zum Kauf des ESP32-S3 RGB LED-Matrixmoduls.
Dieses Tutorial ist Teil von: ESP32-S3 RGB-LED-Matrix
- ESP32-S3 RGB-LED-Matrix-Projekte (Kippspiel, Text, Pfeil, WiFi-Demo)
- ESP32-S3 RGB-LED-Matrix-Projekt 2 - Lauftext
- ESP32-S3 RGB-LED-Matrix-Projekt 3 - Text vom Mobiltelefon
- ESP32-S3 RGB-LED-Matrix-Projekt 4 - Neigungspunkt
- ESP32-S3 RGB-LED-Matrix-Projekt 5 - Pfeil immer nach oben
- ESP32-S3 RGB-LED-Matrix Wi-Fi + NTP-Uhrzeit-Projekt - 1 Grundlegende Uhr
- ESP32-S3 RGB-LED-Matrix-Internet-Uhrprojekt - 2-Uhr mehrfarbige Zeit- und Datumsanzeige
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr-Projekt - 3 Nachtfarben mit Datum
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr-Projekt - 5 Regenbogenfarben
- ESP32-S3 RGB-LED-Matrix-Internet-Uhr Projekt - 4 Zufallsfarben
- ESP32-S3 RGB-LED-Matrix-Test für RGB-, GRB-Einstellung
/*
* Projekt 6: Tilt Circle Game - ESP32-S3 RGB LED Matrix (Waveshare)
*
* Dieses Sketch liest die Neigung vom QMI8658C IMU und bewegt einen Punkt
* sanft auf der 8×8 RGB LED-Matrix basierend auf der Ausrichtung des Boards.
*
* ▶️ Video-Tutorial:
* https://youtu.be/JKLuYrRcLMI
*
* 📚⬇️ Ressourcen & Code-Seite:
* https://robojax.com/RJT829
*
* QMI8658_RGB_2
*/
#include <Arduino.h>
#include <math.h>
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>
#include <QMI8658.h> // von Lahav Gahali
// -------- LED MATRIX EINRICHTUNG --------
#define MATRIX_PIN 14
#define MATRIX_WIDTH 8
#define MATRIX_HEIGHT 8
// Buzzer-Pin - ändern Sie dies auf Ihr tatsächliches Buzzer-GPIO.
const int BUZZER_PIN = 6; // TODO: Setzen Sie Ihren Buzzer-Pin.
// Matrix-Helligkeit (0-255)
const uint8_t MATRIX_BRIGHTNESS = 10;
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(
MATRIX_WIDTH, MATRIX_HEIGHT, MATRIX_PIN,
NEO_MATRIX_TOP + NEO_MATRIX_LEFT +
NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE,
NEO_GRB + NEO_KHZ800
);
// -------- IMU EINSTELLUNG --------
QMI8658 imu;
// -------- SPIELKONFIGURATION --------
// Wie oft der Punkt sich bewegen darf (ms).
// Größer = langsameres Bewegung.
const uint16_t MOVE_INTERVAL_MS = 150; // versuchen 120-250
// Wie viel Neigung (m/s^2) bevor sich der Punkt bewegt.
// Erhöhe, wenn es sich zu empfindlich anfühlt.
const float ACC_TILT_THRESHOLD = 2.0f; // etwa ~0,2 g
// Punkt Grundfarbe (RGB)
const uint8_t DOT_R = 255;
const uint8_t DOT_G = 255;
const uint8_t DOT_B = 255;
// Kreisgeometrie (zentrisch auf 8x8)
const float CIRCLE_CENTER_X = (MATRIX_WIDTH - 1) / 2.0f; // 3,5
const float CIRCLE_CENTER_Y = (MATRIX_HEIGHT - 1) / 2.0f; // 3,5
const float CIRCLE_RADIUS = 3.0f;
const float CIRCLE_THICKNESS = 0.8f; // +- Dicke um den Radius
// -------- SPIELSTATUS --------
// Punktposition im 8x8-Raster (0..7)
int dotX = 3;
int dotY = 3;
// Farben (16-Bit NeoMatrix Farben)
uint16_t dotColor;
uint16_t circleColor;
// Um "gerade berührt Kreis" von "immer noch auf Kreis" zu unterscheiden
bool wasOnCircle = false;
// Timer zur Begrenzung der Bewegung
unsigned long lastMoveTime = 0;
// -------- HILFSFUNKTIONEN --------
// Klassisches NeoPixel-Farbrad (0-255 -> Regenbogen)
uint16_t wheel(byte pos) {
if (pos < 85) {
return matrix.Color(pos * 3, 255 - pos * 3, 0);
} else if (pos < 170) {
pos -= 85;
return matrix.Color(255 - pos * 3, 0, pos * 3);
} else {
pos -= 170;
return matrix.Color(0, pos * 3, 255 - pos * 3);
}
}
// Liegt ein gegebener Pixel ungefähr auf dem Kreis?
bool isOnCircle(int x, int y) {
float dx = x - CIRCLE_CENTER_X;
float dy = y - CIRCLE_CENTER_Y;
float d2 = dx * dx + dy * dy;
float rMin = CIRCLE_RADIUS - CIRCLE_THICKNESS;
float rMax = CIRCLE_RADIUS + CIRCLE_THICKNESS;
return (d2 >= rMin * rMin) && (d2 <= rMax * rMax);
}
// Kreis + Punkt zeichnen
void drawScene() {
matrix.fillScreen(0);
// Kreis zeichnen
for (int y = 0; y < MATRIX_HEIGHT; y++) {
for (int x = 0; x < MATRIX_WIDTH; x++) {
if (isOnCircle(x, y)) {
matrix.drawPixel(x, y, circleColor);
}
}
}
// Punkt zeichnen (oben)
matrix.drawPixel(dotX, dotY, dotColor);
matrix.show();
}
// Einfacher Blockierpiepton (kurz)
void buzzOnce() {
digitalWrite(BUZZER_PIN, HIGH);
delay(40);
digitalWrite(BUZZER_PIN, LOW);
}
// Verwenden Sie den Beschleunigungssensor, um die Bewegung des Punkts zu bestimmen.
void updateDotFromTilt(float ax, float ay) {
unsigned long now = millis();
if (now - lastMoveTime < MOVE_INTERVAL_MS) {
return; // zu früh, warte
}
int dx = 0;
int dy = 0;
// Auf diesem Board fühlt sich Y-Neigung wie "links/rechts" auf der Matrix an,
// und X-Neigung fühlt sich an wie "hoch/runter" → also tauschen wir.
// --- Horizontale Bewegung von AY (Neigung nach links/rechts) ---
if (ay > ACC_TILT_THRESHOLD) {
dx = 1; // neigen Sie nach rechts → bewegen Sie den Punkt nach rechts
} else if (ay < -ACC_TILT_THRESHOLD) {
dx = -1; // neigen nach links → Punkt nach links bewegen
}
// --- Vertikale Bewegung von AX (Vorwärts-/Rückneigung) ---
// Das wurde invertiert. Wir drehen die Vorzeichen um:
// ax > Schwelle = Neigung "vorwärts" (weg) → Punkt nach OBEN bewegen (dy = -1)
// ax < -Schwelle = Neigung "zurück" (nach)→ Punkt nach UNTEN bewegen (dy = 1)
if (ax > ACC_TILT_THRESHOLD) {
dy = -1; // war +1 zuvor
} else if (ax < -ACC_TILT_THRESHOLD) {
dy = 1; // war vorher -1
}
if (dx != 0 || dy != 0) {
dotX = constrain(dotX + dx, 0, MATRIX_WIDTH - 1);
dotY = constrain(dotY + dy, 0, MATRIX_HEIGHT - 1);
lastMoveTime = now;
}
}
// -------- EINRICHTUNG & SCHLEIFE --------
void setup() {
Serial.begin(115200);
delay(100);
// Matrix-Initialisierung
matrix.begin();
matrix.setBrightness(MATRIX_BRIGHTNESS);
matrix.fillScreen(0);
matrix.show();
// Buzzer-Init
pinMode(BUZZER_PIN, OUTPUT);
digitalWrite(BUZZER_PIN, LOW);
// IMU-Initialisierung
if (!imu.begin(11, 12)) {
Serial.println("Failed to initialize QMI8658!");
while (1) {
delay(100);
}
}
// Verwenden Sie m/s^2 und dps (optional, aber schön)
imu.setAccelUnit_mps2(true);
imu.setGyroUnit_dps(true);
imu.setDisplayPrecision(3);
Serial.println("QMI8658 initialized.");
// Spielanfangszustand
randomSeed((uint32_t)micros());
dotX = MATRIX_WIDTH / 2;
dotY = MATRIX_HEIGHT / 2;
dotColor = matrix.Color(DOT_R, DOT_G, DOT_B);
circleColor = wheel(random(256));
drawScene();
}
void loop() {
// Beschleunigungsmesser lesen
float ax, ay, az;
if (imu.readAccelMPS2(ax, ay, az)) {
// Debuggen Sie bei Bedarf:
// Serial.print("AX: "); Serial.print(ax);
// Serial.print(" AY: "); Serial.print(ay);
// Serial.print(" AZ: "); Serial.println(az);
updateDotFromTilt(ax, ay);
}
// Kollision mit dem Kreis überprüfen
bool onCircle = isOnCircle(dotX, dotY);
if (onCircle && !wasOnCircle) {
// Gerade berührter Kreis: Farbe ändern + Piepton
circleColor = wheel(random(256));
buzzOnce();
}
wasOnCircle = onCircle;
// Neu zeichnen
drawScene();
// Kleine Verzögerung, damit wir I2C nicht zu sehr belasten.
delay(10);
}
Dinge, die Sie vielleicht brauchen
-
Amazon
-
eBay
-
AliExpressESP32-S3 RGB-Matrix von AliExpress kaufen (2)s.click.aliexpress.com
-
AliExpressKaufen Sie das ESP32-S3 RGB-Matrix von AliExpress.s.click.aliexpress.com
Ressourcen & Referenzen
-
Intern🎨 Farbauswahlwerkzeugrobojax.com
Dateien📁
Fritzing-Datei
-
esp32-S3-supermini-tht Fritzing-Teil
esp32-S3-supermini-tht.fzpz0.02 MB