Este tutorial es parte de: Matriz de LED RGB ESP32-S3
Proyecto genial para crear aplicaciones prácticas y divertidas con el módulo de matriz RGB ESP32-S3. Encontrará enlaces a otros videos debajo de este artículo.
Proyecto de Matriz LED RGB ESP32-S3 6 - Juego de Cible
Proyecto 6 - Juego de Objetivo (Inclina la Tabla para Golpear el Círculo)
El Proyecto 6 es el proyecto final y más interactivo de esta serie de matrices LED RGB ESP32-S3. Usando el sensor de movimiento QMI8658C incorporado, inclinas la placa para mover un punto alrededor de la matriz de 8×8. Una "zona objetivo" circular se encuentra en el medio de la pantalla. Cuando tu punto toca el círculo, el color cambia y (opcionalmente) un zumbador suena. Esto crea un juego de equilibrio/coordinación simple pero sorprendentemente divertido.
Los seis proyectos se muestran en un solo video de YouTube (incrustado en esta página). El código completo del juego se carga automáticamente debajo de este artículo, y los enlaces de compra de afiliados para el módulo aparecen debajo de la sección de código.

Descripción general del módulo de matriz de LED RGB ESP32-S3
Este módulo incluye:

- microcontrolador ESP32-S3(Wi-Fi + BLE)
- matriz LED RGB de 8×8(64 LED direccionables)
- Acelerómetro QMI8658Cpara la detección de inclinación y orientación
- USB-Cpuerto para energía y programación
- Arrancar / Reiniciarbotones
- Disponiblepines GPIOpara complementos como timbres o sensores
Para este juego, el acelerómetro es esencial: informa continuamente la inclinación X/Y, lo que permite que el punto se mueva suavemente según el ángulo de la tabla. La sección de video de este proyecto muestra claramente cómo el punto se desliza y reacciona a medida que inclinas el módulo a la izquierda/derecha/adelante/atrás.:contentReference[oaicite:0]{index=0}

Proyectos cubiertos en el video (marcas de tiempo)
- 00:00- Introducción
- 02:01- Instalando placas ESP32
- 03:32- Instalando bibliotecas
- 05:32- Proyecto 1: Punto Móvil
- 11:11- Proyecto 2: Desplazamiento de texto
- 12:59- Proyecto 3: Texto HTTP
- 16:41- Proyecto 4: Tilt Dot
- 18:55- Proyecto 5: Flecha Arriba
- 20:02-Proyecto 6: Juego de Objetivos (este proyecto)
Esta porción del video muestra tanto el movimiento del punto como la lógica de detección del círculo en acción, lo que facilita entender cómo se comportan las coordenadas.:contentReference[oaicite:1]{index=1}

Instalando placas ESP32 en Arduino IDE
Si ya has completado los proyectos anteriores, la instalación de la placa está hecha. De lo contrario, sigue:
File > Preferences→ Agregar URL de la placa ESP32.Tools > Board > Boards Manager…→ Instalar "ESP32".- Selecciona la placa ESP32-S3 en
Tools > Board. - Seleccione el puerto COM correcto bajo
Tools > Port.
Instalando las bibliotecas requeridas
Este juego usa:
Adafruit NeoMatrixAdafruit NeoPixelAdafruit GFXQMI8658(sensor de movimiento)
Instálalos a través de:
Sketch > Include Library > Manage Libraries…- Buscar:NeoMatrix→ Instalar
- Instalar dependenciasGFX+NeoPixel)
- Buscar e instalarQMI8658
Cómo funciona el juego del objetivo
El acelerómetro QMI8658C proporciona valores de inclinación X e Y. Estos se asignan a las coordenadas LED (0-7 en ambas direcciones). Tu punto se mueve a través de la matriz basado en el ángulo de la placa.
Se dibuja un círculo (o anillo) en la pantalla como el "área objetivo". Ganas un "impacto" siempre que el punto se superponga al círculo. En ese momento:
- El color objetivo cambia (aleatoriamente o predefinido)
- Un zumbador opcional suena (si está conectado)
Dado que la matriz es pequeña, el círculo se dibuja utilizando una simple verificación de radio. El juego se ejecuta continuamente, por lo que puedes inclinarte hacia adelante y hacia atrás para golpear el círculo repetidamente.
Proyecto 6 - Configuración de Código (Juego Objetivo)
A continuación se presentan los principales ajustes ajustables por el usuario que se encuentran en la parte superior del boceto. El código completo se incluye automáticamente a continuación de este artículo.
Configuración de la Matriz
// Matrix configuration
const int MATRIX_PIN = 14;
const int MATRIX_WIDTH = 8;
const int MATRIX_HEIGHT = 8;
La matriz RGB está cableada directamente al GPIO 14—no cambies esto.
Brillo
uint8_t matrixBrightness = 40; // 0–255
Para uso en interiores, 30-60 es ideal.
Color del punto
// Dot color (R, G, B)
uint8_t dotRed = 255;
uint8_t dotGreen = 255;
uint8_t dotBlue = 255;
Este es el punto que mueves al inclinar la tabla.
Color del círculo (aleatorio o fijo)
// 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;
ConjuntorandomCircleColor = false;si quieres un color fijo.
Radio del Círculo
// Target size (radius)
int targetRadius = 3; // 3 fits well on 8×8 matrix
Los radios más grandes facilitan el juego; los más pequeños lo dificultan.
Sensibilidad de inclinación
// Sensitivity of tilt mapping
float tiltScale = 4.0f; // increase = faster movement across screen
Si el punto se mueve demasiado rápido o salta, reduce este número.
Configuración del zumbador (Opcional)
// Buzzer pin (optional)
int buzzerPin = 6; // connect buzzer + to pin 6, – to GND
bool useBuzzer = true; // set false to disable sound
Si no conectas un zumbador, simplemente configura.useBuzzer = false;
Resumen
El Proyecto 6 combina todo lo aprendido de proyectos anteriores: dibujo de matrices, entrada de acelerómetro, control de color, suavizado de movimiento y sonido opcional. Inclinar la placa mueve el punto, y tocar el círculo cambia su color y (opcionalmente) activa un beep. Es una divertida demostración de detección de movimiento en una pantalla RGB compacta.
El código completo del "Juego de Objetivos" se muestra automáticamente debajo de este artículo. También puedes ver la parte del Proyecto 6 del video para observar cómo se mueve el punto y cómo se detectan los golpes. Si deseas construir tu propio juego, los enlaces de afiliados para comprar el módulo de matriz LED RGB ESP32-S3 aparecen debajo de la sección de código.
Este tutorial es parte de: Matriz de LED RGB ESP32-S3
- Proyectos con Matriz LED RGB para ESP32-S3 (Juego de Inclinación, Texto, Flecha, Demostración WiFi)
- Proyecto 2 de matriz de LED RGB ESP32-S3 - Texto en desplazamiento
- Proyecto de matriz LED RGB ESP32-S3 3 - Texto desde teléfono móvil
- Proyecto de matriz de LED RGB ESP32-S3 4 - Punto inclinado
- Proyecto de Matriz LED RGB ESP32-S3 5 - Flecha siempre arriba
- Proyecto de reloj básico con matriz LED RGB ESP32-S3 Wi-Fi + hora NTP -1
- Proyecto de Reloj por Internet con Matriz LED RGB ESP32-S3 - Pantalla de Hora y Fecha multicolor de 2 Relojes
- Proyecto de Reloj de Internet con Matriz de LED RGB ESP32-S3 - 3 Colores Nocturnos con Fecha
- Proyecto de reloj de internet con matriz de LED RGB ESP32-S3 - 5 colores del arcoíris
- Proyecto de reloj en Internet con matriz de LED RGB ESP32-S3 - 4 colores aleatorios
- Prueba de matriz LED RGB ESP32-S3 para configuración RGB, GRB
/*
* Proyecto 6: Juego de Círculo Inclinado - Matriz LED RGB ESP32-S3 (Waveshare)
*
* Este boceto lee la inclinación del IMU QMI8658C y mueve suavemente un punto en la matriz LED RGB de 8×8 según la orientación de la placa.
*
* ▶️ Tutorial en Video:
* https://youtu.be/JKLuYrRcLMI
*
* 📚⬇️ Recursos y Página de Código:
* 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> // por Lahav Gahali
// -------- CONFIGURACIÓN DE MATRIZ LED --------
#define MATRIX_PIN 14
#define MATRIX_WIDTH 8
#define MATRIX_HEIGHT 8
// Pin del zumbador - cámbialo por el GPIO de tu zumbador real.
const int BUZZER_PIN = 6; // TODO: establece tu pin del timbre
// Brillo de la matriz (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
);
// -------- CONFIGURACIÓN DEL IMU --------
QMI8658 imu;
// -------- CONFIGURACIÓN DEL JUEGO --------
// Con qué frecuencia se permite mover el punto (ms).
// Más grande = movimiento más lento.
const uint16_t MOVE_INTERVAL_MS = 150; // intenta 120-250
// ¿Cuánto inclinación (m/s^2) antes de que el punto se mueva?
// Aumenta si se siente demasiado sensible.
const float ACC_TILT_THRESHOLD = 2.0f; // aproximadamente ~0.2 g
// Color base del punto (RGB)
const uint8_t DOT_R = 255;
const uint8_t DOT_G = 255;
const uint8_t DOT_B = 255;
// Geometría de círculos (centrado en 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; // +- grosor alrededor del radio
// -------- ESTADO DEL JUEGO --------
// Posición del punto en la cuadrícula 8x8 (0..7)
int dotX = 3;
int dotY = 3;
// Colores (colores NeoMatrix de 16 bits)
uint16_t dotColor;
uint16_t circleColor;
// Para detectar "círculo recién tocado" frente a "todavía en el círculo"
bool wasOnCircle = false;
// Temporizador para limitar el movimiento
unsigned long lastMoveTime = 0;
// -------- FUNCIONES AYUDANTES --------
// Rueda de colores NeoPixel clásica (0-255 -> arcoíris)
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);
}
}
// ¿Está un píxel dado aproximadamente en el círculo?
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);
}
// Dibuja un círculo + un punto
void drawScene() {
matrix.fillScreen(0);
// Dibuja un círculo
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);
}
}
}
// Dibuja un punto (en la parte superior)
matrix.drawPixel(dotX, dotY, dotColor);
matrix.show();
}
// Beep de bloqueo simple (corto)
void buzzOnce() {
digitalWrite(BUZZER_PIN, HIGH);
delay(40);
digitalWrite(BUZZER_PIN, LOW);
}
// Utiliza el acelerómetro para decidir el movimiento del punto.
void updateDotFromTilt(float ax, float ay) {
unsigned long now = millis();
if (now - lastMoveTime < MOVE_INTERVAL_MS) {
return; // demasiado pronto, espera
}
int dx = 0;
int dy = 0;
// En esta placa, la inclinación Y se siente como "izquierda/derecha" en la matriz.
// y la inclinación X se siente como "arriba/abajo" → así que intercambiamos.
// --- Movimiento horizontal desde AY (inclinación izquierda/derecha) ---
if (ay > ACC_TILT_THRESHOLD) {
dx = 1; // inclina hacia la derecha → mueve el punto hacia la derecha
} else if (ay < -ACC_TILT_THRESHOLD) {
dx = -1; // inclina hacia la izquierda → mueve el punto hacia la izquierda
}
// --- Movimiento vertical desde AX (inclinar hacia adelante/atrás) ---
// Esto fue invertido. Cambiamos los signos:
// ax > umbral = inclinar "hacia adelante" (lejos) → mover punto ARRIBA (dy = -1)
// ax < -umbral = inclinación "hacia atrás" (hacia) → mover punto ABAJO (dy = 1)
if (ax > ACC_TILT_THRESHOLD) {
dy = -1; // estaba +1 antes
} else if (ax < -ACC_TILT_THRESHOLD) {
dy = 1; // era -1 antes
}
if (dx != 0 || dy != 0) {
dotX = constrain(dotX + dx, 0, MATRIX_WIDTH - 1);
dotY = constrain(dotY + dy, 0, MATRIX_HEIGHT - 1);
lastMoveTime = now;
}
}
// -------- CONFIGURACIÓN Y BUCLE --------
void setup() {
Serial.begin(115200);
delay(100);
// Inicialización de matriz
matrix.begin();
matrix.setBrightness(MATRIX_BRIGHTNESS);
matrix.fillScreen(0);
matrix.show();
// Inicialización del temporizador
pinMode(BUZZER_PIN, OUTPUT);
digitalWrite(BUZZER_PIN, LOW);
// IMU inicializar
if (!imu.begin(11, 12)) {
Serial.println("Failed to initialize QMI8658!");
while (1) {
delay(100);
}
}
// Usa m/s^2 y dps (opcional, pero agradable)
imu.setAccelUnit_mps2(true);
imu.setGyroUnit_dps(true);
imu.setDisplayPrecision(3);
Serial.println("QMI8658 initialized.");
// Estado inicial del juego
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() {
// Leer acelerómetro
float ax, ay, az;
if (imu.readAccelMPS2(ax, ay, az)) {
// Depurar si es necesario:
// Serial.print("AX: "); Serial.print(ax);
// Serial.print(" AY: "); Serial.print(ay);
// Serial.print(" AZ: "); Serial.println(az);
updateDotFromTilt(ax, ay);
}
// Comprobar colisión con círculo
bool onCircle = isOnCircle(dotX, dotY);
if (onCircle && !wasOnCircle) {
// Solo tocar el círculo: cambiar color + sonido beep
circleColor = wheel(random(256));
buzzOnce();
}
wasOnCircle = onCircle;
// Redibujar
drawScene();
// Pequeño retraso para no perjudicar demasiado el I2C.
delay(10);
}
Cosas que podrías necesitar
-
Amazonas
-
eBay
-
AliExpressCompra ESP32-S3 Matriz RGB en AliExpress (2)s.click.aliexpress.com
-
AliExpressCompra la matriz RGB ESP32-S3 en AliExpress.s.click.aliexpress.com
Recursos y referencias
-
Interno🎨 Herramienta de selección de colorrobojax.com
Archivos📁
Archivo de Fritzing
-
parte fritzing esp32-S3-supermini-tht
esp32-S3-supermini-tht.fzpz0.02 MB