Ce tutoriel fait partie de: Matrice LED RGB ESP32-S3
Projet amusant et pratique à réaliser avec le module matrice RGB ESP32-S3. Vous trouverez des liens vers d'autres vidéos ci-dessous.
Projet de matrice LED RGB ESP32-S3 6 - Jeu cible
Projet 6 - Jeu de Cible (Inclinez le Plateau pour Toucher le Cercle)
Le projet 6 est le dernier et le plus interactif des projets de cette série de matrice LED RGB ESP32-S3. En utilisant le capteur de mouvement QMI8658C intégré, vous inclinez la carte pour déplacer un point dans la matrice 8×8. Une "zone cible" circulaire se trouve au milieu de l'écran. Lorsque votre point touche le cercle, la couleur change et (en option) un buzzer sonne. Cela crée un jeu d'équilibre/coordination simple mais étonnamment amusant.
Tous les six projets sont démontrés dans une seule vidéo YouTube (intégrée sur cette page). Le code complet du jeu est chargé automatiquement en dessous de cet article, et les liens d'achat affilié pour le module apparaissent sous la section de code.

Aperçu du module matrice LED RVB ESP32-S3
Ce module comprend :

- microcontrôleur ESP32-S3(Wi-Fi + BLE)
- matrice LED RVB 8×8(64 LEDs adressables)
- Accéléromètre QMI8658Cpour la détection d'inclinaison et d'orientation
- USB-Cport pour l'alimentation et la programmation
- Démarrer / Réinitialiserboutons
- Disponiblebroches GPIOpour des accessoires comme des buzzers ou des capteurs
Pour ce jeu, l'accéléromètre est essentiel : il indique en permanence l'inclinaison X/Y, permettant au point de se déplacer de manière fluide en fonction de l'angle de la planche. La section vidéo de ce projet montre clairement comment le point glisse et réagit lorsque vous inclinez le module à gauche/droite/avant/arrière.:contentReference[oaicite:0]{index=0}

Projets couverts dans la vidéo (horodatages)
- 00:00- Introduction
- 02:01- Installation des cartes ESP32
- 03:32- Installation des bibliothèques
- 05:32- Projet 1 : Point en mouvement
- 11:11- Projet 2 : Défilement de texte
- 12:59- Projet 3 : Texte HTTP
- 16:41- Projet 4 : Tilt Dot
- 18:55- Projet 5 : Flèche vers le haut
- 20:02-Projet 6 : Jeu de Cible (ce projet)
Cette portion de la vidéo montre à la fois le mouvement du point et la logique de détection des cercles en action, facilitant ainsi la compréhension du comportement des coordonnées.:contentReference[oaicite:1]{index=1}

Installation des cartes ESP32 dans l'IDE Arduino
Si vous avez déjà terminé les projets antérieurs, l'installation du tableau est terminée. Sinon, suivez :
File > Preferences→ Ajouter l'URL de la carte ESP32.Tools > Board > Boards Manager…→ Installer "ESP32".- Sélectionnez la carte ESP32-S3 sous
Tools > Board. - Sélectionnez le port COM correct sous
Tools > Port.
Installation des bibliothèques requises
Ce jeu utilise :
Adafruit NeoMatrixAdafruit NeoPixelAdafruit GFXQMI8658(capteur de mouvement)
Installez-les via :
Sketch > Include Library > Manage Libraries…- Recherche :NeoMatrix→ Installer
- Installer les dépendancesGFX+NeoPixel)
- Recherchez et installezQMI8658
Comment fonctionne le jeu Target
L'accéléromètre QMI8658C fournit des valeurs d'inclinaison X et Y. Celles-ci sont mappées aux coordonnées LED (0-7 dans les deux directions). Votre point se déplace à travers la matrice en fonction de l'angle de la carte.
Un cercle (ou anneau) est tracé sur l'écran comme la "zone cible." Vous remportez un "coup" chaque fois que le point se superpose au cercle. À ce moment-là :
- La couleur cible change (aléatoire ou prédéfinie)
- Un buzzer optionnel émet un bip (s'il est connecté)
Étant donné que la matrice est petite, le cercle est tracé en utilisant un simple contrôle de rayon. Le jeu fonctionne en continu, vous pouvez donc incliner d'avant en arrière pour toucher le cercle de manière répétée.
Projet 6 - Paramètres de code (Jeu cible)
Voici les principaux paramètres ajustables par l'utilisateur situés en haut du croquis. Le code complet est automatiquement inclus en dessous de cet article.
Configuration de la matrice
// Matrix configuration
const int MATRIX_PIN = 14;
const int MATRIX_WIDTH = 8;
const int MATRIX_HEIGHT = 8;
La matrice RGB est câblée en dur à GPIO 14 - ne changez pas cela.
Luminosité
uint8_t matrixBrightness = 40; // 0–255
Pour une utilisation intérieure, 30-60 est idéal.
Couleur du point
// Dot color (R, G, B)
uint8_t dotRed = 255;
uint8_t dotGreen = 255;
uint8_t dotBlue = 255;
C'est le point que vous déplacez en inclinant le plateau.
Couleur du cercle (aléatoire ou fixe)
// 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;
DéfinirrandomCircleColor = false;si vous voulez une couleur fixe.
Rayon du cercle
// Target size (radius)
int targetRadius = 3; // 3 fits well on 8×8 matrix
Des rayons plus grands rendent le jeu plus facile ; des rayons plus petits le rendent plus difficile.
Sensibilité d'inclinaison
// Sensitivity of tilt mapping
float tiltScale = 4.0f; // increase = faster movement across screen
Si le point se déplace trop vite ou saute, réduisez ce nombre.
Paramètres de la sonnerie (optionnel)
// Buzzer pin (optional)
int buzzerPin = 6; // connect buzzer + to pin 6, – to GND
bool useBuzzer = true; // set false to disable sound
Si vous ne connectez pas de buzzer, il vous suffit de régler.useBuzzer = false;
Résumé
Le projet 6 combine tout ce qui a été appris lors des projets précédents : dessin matriciel, entrée d'accéléromètre, contrôle des couleurs, lissage des mouvements et son optionnel. Incliner la planche déplace le point, et toucher le cercle change sa couleur et déclenche (optionnellement) un bip. C'est une démonstration amusante de détection de mouvement sur un affichage RGB compact.
Le code complet du "Jeu Cible" est affiché automatiquement sous cet article. Vous pouvez également regarder la partie Project 6 de la vidéo pour voir comment le point se déplace et comment les hits sont détectés. Si vous souhaitez créer votre propre jeu, des liens d'affiliation pour acheter le module matriciel LED RGB ESP32-S3 apparaissent sous la section code.
Ce tutoriel fait partie de: Matrice LED RGB ESP32-S3
- Projets de Matrice LED RGB ESP32-S3 (Jeu d'Inclinaison, Texte, Flèche, Démo WiFi)
- Projet 2 de matrice LED RGB ESP32-S3 - Texte défilant
- Projet de matrice LED RGB ESP32-S3 3 - Texte provenant du téléphone mobile
- Projet de matrice LED RGB ESP32-S3 4 - Point incliné
- Projet de matrice LED RGB ESP32-S3 5 - Flèche toujours vers le haut
- Projet d'horloge de base ESP32-S3 Matrice LED RGB Wi-Fi + Horloge NTP - 1
- Projet d'Horloge Internet avec Matrice LED RGB ESP32-S3 - Affichage de l'heure et de la date en multi-couleurs
- Projet d'horloge Internet avec matrice LED RGB ESP32-S3 - 3 couleurs de nuit avec date
- Projet d'horloge Internet avec matrice LED RGB ESP32-S3 - 5 couleurs arc-en-ciel
- Projet d'horloge Internet avec matrice LED RVB ESP32-S3 - 4 couleurs aléatoires
- Test de matrice LED RGB ESP32-S3 pour réglage RGB, GRB
/*
Project 6: Tilt Circle Game – ESP32-S3 RGB LED Matrix (Waveshare)
This sketch reads tilt from the QMI8658C IMU and smoothly moves a dot
on the 8×8 RGB LED matrix based on board orientation.
▶️ Video Tutorial:
https://youtu.be/JKLuYrRcLMI
📚⬇️ Resources & Code Page:
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> // by Lahav Gahali
// -------- LED MATRIX SETUP --------
#define MATRIX_PIN 14
#define MATRIX_WIDTH 8
#define MATRIX_HEIGHT 8
// Buzzer pin – change this to your actual buzzer GPIO.
const int BUZZER_PIN = 6; // TODO: set to your buzzer pin
// Matrix brightness (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 SETUP --------
QMI8658 imu;
// -------- GAME CONFIG --------
// How often the dot is allowed to move (ms).
// Bigger = slower movement.
const uint16_t MOVE_INTERVAL_MS = 150; // try 120–250
// How much tilt (m/s^2) before the dot moves.
// Increase if it feels too sensitive.
const float ACC_TILT_THRESHOLD = 2.0f; // about ~0.2 g
// Dot base color (RGB)
const uint8_t DOT_R = 255;
const uint8_t DOT_G = 255;
const uint8_t DOT_B = 255;
// Circle geometry (centered on 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; // +- thickness around radius
// -------- GAME STATE --------
// Dot position on the 8x8 grid (0..7)
int dotX = 3;
int dotY = 3;
// Colors (16-bit NeoMatrix colors)
uint16_t dotColor;
uint16_t circleColor;
// To detect “just touched circle” vs “still on circle”
bool wasOnCircle = false;
// Timer for rate-limiting movement
unsigned long lastMoveTime = 0;
// -------- HELPER FUNCTIONS --------
// Classic NeoPixel color wheel (0-255 -> rainbow)
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);
}
}
// Is a given pixel approximately on the circle?
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);
}
// Draw circle + dot
void drawScene() {
matrix.fillScreen(0);
// Draw circle
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);
}
}
}
// Draw dot (on top)
matrix.drawPixel(dotX, dotY, dotColor);
matrix.show();
}
// Simple blocking beep (short)
void buzzOnce() {
digitalWrite(BUZZER_PIN, HIGH);
delay(40);
digitalWrite(BUZZER_PIN, LOW);
}
// Use accelerometer to decide dot movement
void updateDotFromTilt(float ax, float ay) {
unsigned long now = millis();
if (now - lastMoveTime < MOVE_INTERVAL_MS) {
return; // too soon, wait
}
int dx = 0;
int dy = 0;
// On this board, Y tilt feels like "left/right" on the matrix,
// and X tilt feels like "up/down" → so we swap.
// --- Horizontal movement from AY (tilt left/right) ---
if (ay > ACC_TILT_THRESHOLD) {
dx = 1; // tilt to the right → move dot to the right
} else if (ay < -ACC_TILT_THRESHOLD) {
dx = -1; // tilt to the left → move dot to the left
}
// --- Vertical movement from AX (tilt forward/back) ---
// This was inverted. We flip the signs:
// ax > threshold = tilt "forward" (away) → move dot UP (dy = -1)
// ax < -threshold = tilt "back" (toward)→ move dot DOWN(dy = 1)
if (ax > ACC_TILT_THRESHOLD) {
dy = -1; // was +1 before
} else if (ax < -ACC_TILT_THRESHOLD) {
dy = 1; // was -1 before
}
if (dx != 0 || dy != 0) {
dotX = constrain(dotX + dx, 0, MATRIX_WIDTH - 1);
dotY = constrain(dotY + dy, 0, MATRIX_HEIGHT - 1);
lastMoveTime = now;
}
}
// -------- SETUP & LOOP --------
void setup() {
Serial.begin(115200);
delay(100);
// Matrix init
matrix.begin();
matrix.setBrightness(MATRIX_BRIGHTNESS);
matrix.fillScreen(0);
matrix.show();
// Buzzer init
pinMode(BUZZER_PIN, OUTPUT);
digitalWrite(BUZZER_PIN, LOW);
// IMU init
if (!imu.begin(11, 12)) {
Serial.println("Failed to initialize QMI8658!");
while (1) {
delay(100);
}
}
// Use m/s^2 and dps (optional, but nice)
imu.setAccelUnit_mps2(true);
imu.setGyroUnit_dps(true);
imu.setDisplayPrecision(3);
Serial.println("QMI8658 initialized.");
// Game initial state
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() {
// Read accelerometer
float ax, ay, az;
if (imu.readAccelMPS2(ax, ay, az)) {
// Debug if needed:
// Serial.print("AX: "); Serial.print(ax);
// Serial.print(" AY: "); Serial.print(ay);
// Serial.print(" AZ: "); Serial.println(az);
updateDotFromTilt(ax, ay);
}
// Check collision with circle
bool onCircle = isOnCircle(dotX, dotY);
if (onCircle && !wasOnCircle) {
// Just touched circle: change color + beep
circleColor = wheel(random(256));
buzzOnce();
}
wasOnCircle = onCircle;
// Redraw
drawScene();
// Small delay so we don’t hammer I2C too hard
delay(10);
}
Ce dont vous pourriez avoir besoin
-
Amazon
-
eBay
-
AliExpressAchetez le matrix RGB ESP32-S3 sur AliExpress.s.click.aliexpress.com
-
AliExpressAchetez une matrice RGB ESP32-S3 sur AliExpress (2)s.click.aliexpress.com
Ressources et références
-
InterneOutil de sélection de couleurrobojax.com
Fichiers📁
Fichier Fritzing
-
partie fritzing esp32-S3-supermini-tht
esp32-S3-supermini-tht.fzpz0.02 MB