Tutorial ini adalah bagian dari: Matriks LED RGB ESP32-S3
Proyek keren untuk dibuat untuk bersenang-senang dan aplikasi praktis menggunakan modul matriks RGB ESP32-S3. Tautan ke video lain ada di bawah artikel ini.
Proyek Matriks LED RGB ESP32-S3 6 - Permainan Cible
Proyek 6 – Permainan Target (Miringkan Papan untuk Mengenai Lingkaran)
Proyek 6 adalah proyek terakhir dan paling interaktif dalam seri ESP32-S3 RGB LED Matrix ini. Menggunakan sensor gerak QMI8658C bawaan, Anda memiringkan papan untuk menggerakkan titik di sekitar matriks 8×8. Sebuah “zona target” berbentuk lingkaran berada di tengah layar. Saat titik Anda menyentuh lingkaran, warnanya berubah dan (opsional) buzzer berbunyi. Ini menciptakan permainan keseimbangan/koordinasi yang sederhana namun sangat menyenangkan.
Keenam proyek didemonstrasikan dalam satu video YouTube (tertanam di halaman ini). Kode permainan lengkap dimuat secara otomatis di bawah artikel ini, dan tautan pembelian afiliasi untuk modul muncul di bawah bagian kode.

Ikhtisar Modul ESP32-S3 RGB LED Matrix
Modul ini mencakup:

- Mikrokontroler ESP32-S3 (Wi-Fi + BLE)
- Matriks LED RGB 8×8 (64 LED yang dapat dialamatkan)
- Akselerometer QMI8658C untuk penginderaan kemiringan dan orientasi
- Port USB-C untuk daya dan pemrograman
- Tombol Boot / Reset
- Pin GPIO yang tersedia untuk tambahan seperti buzzer atau sensor
Untuk permainan ini, akselerometer sangat penting—alat ini terus-menerus melaporkan kemiringan X/Y, memungkinkan titik bergerak dengan mulus berdasarkan sudut papan. Bagian video untuk proyek ini dengan jelas menunjukkan bagaimana titik meluncur dan bereaksi saat Anda memiringkan modul ke kiri/kanan/depan/belakang.

Proyek yang Dicakup dalam Video (Stempel Waktu)
- 00:00 – Pendahuluan
- 02:01 – Menginstal papan ESP32
- 03:32 – Menginstal pustaka
- 05:32 – Proyek 1: Titik Bergerak
- 11:11 – Proyek 2: Gulir Teks
- 12:59 – Proyek 3: Teks HTTP
- 16:41 – Proyek 4: Titik Kemiringan
- 18:55 – Proyek 5: Panah ke Atas
- 20:02 – Proyek 6: Permainan Target (proyek ini)
Bagian video ini menunjukkan pergerakan titik dan logika deteksi lingkaran secara langsung, sehingga lebih mudah untuk memahami bagaimana koordinat berperilaku.

Menginstal Papan ESP32 di Arduino IDE
Jika Anda telah menyelesaikan proyek sebelumnya, instalasi papan sudah selesai. Jika tidak, ikuti langkah berikut:
File > Preferences→ Tambahkan URL papan ESP32.Tools > Board > Boards Manager…→ Instal “ESP32”.- Pilih papan ESP32-S3 di bawah
Tools > Board. - Pilih port COM yang benar di bawah
Tools > Port.
Menginstal Pustaka yang Diperlukan
Permainan ini menggunakan:
Adafruit NeoMatrixAdafruit NeoPixelAdafruit GFXQMI8658(sensor gerak)
Instal melalui:
Sketch > Include Library > Manage Libraries…- Cari: NeoMatrix → Instal
- Instal dependensi (GFX + NeoPixel)
- Cari dan instal QMI8658
Cara Kerja Permainan Target
Akselerometer QMI8658C menyediakan nilai kemiringan X dan Y. Nilai-nilai ini dipetakan ke koordinat LED (0–7 di kedua arah). Titik Anda bergerak melintasi matriks berdasarkan sudut papan.
Sebuah lingkaran (atau cincin) digambar di layar sebagai “area target.” Anda mendapatkan “hit” setiap kali titik tumpang tindih dengan lingkaran. Pada saat itu:
- Warna target berubah (acak atau telah ditentukan sebelumnya)
- Buzzer opsional berbunyi (jika terhubung)
Karena matriksnya kecil, lingkaran digambar menggunakan pemeriksaan radius sederhana. Permainan berjalan terus menerus, sehingga Anda dapat memiringkan bolak-balik untuk mengenai lingkaran berulang kali.
Proyek 6 – Pengaturan Kode (Permainan Target)
Di bawah ini adalah pengaturan utama yang dapat disesuaikan pengguna yang terletak di bagian atas sketsa. Kode lengkap disertakan secara otomatis di bawah artikel ini.
Konfigurasi Matriks
// Konfigurasi matriks
const int MATRIX_PIN = 14;
const int MATRIX_WIDTH = 8;
const int MATRIX_HEIGHT = 8;
Matriks RGB terhubung langsung ke GPIO 14—jangan ubah ini.
Kecerahan
uint8_t matrixBrightness = 40; // 0–255
Untuk penggunaan di dalam ruangan, 30–60 adalah ideal.
Warna Titik
// Warna titik (R, G, B)
uint8_t dotRed = 255;
uint8_t dotGreen = 255;
uint8_t dotBlue = 255;
Ini adalah titik yang Anda gerakkan dengan memiringkan papan.
Warna Lingkaran (Acak atau Tetap)
// Warna lingkaran (target)
uint8_t circleRed = 0;
uint8_t circleGreen = 0;
uint8_t circleBlue = 255;
// Jika benar, pilih warna acak baru setiap kali titik mengenai
bool randomCircleColor = true;
Atur randomCircleColor = false; jika Anda ingin warna tetap.
Radius Lingkaran
// Ukuran target (radius)
int targetRadius = 3; // 3 cocok dengan baik pada matriks 8×8
Radius yang lebih besar membuat permainan lebih mudah; yang lebih kecil membuatnya lebih sulit.
Sensitivitas Kemiringan
// Sensitivitas pemetaan kemiringan
float tiltScale = 4.0f; // naikkan = gerakan lebih cepat di layar
Jika titik bergerak terlalu cepat atau melompat, kurangi angka ini.
Pengaturan Buzzer (Opsional)
// Pin buzzer (opsional)
int buzzerPin = 6; // hubungkan buzzer + ke pin 6, – ke GND
bool useBuzzer = true; // set false untuk menonaktifkan suara
Jika Anda tidak menghubungkan buzzer, cukup atur useBuzzer = false;
Ringkasan
Proyek 6 menggabungkan semua yang dipelajari dari proyek sebelumnya: menggambar matriks, input akselerometer, kontrol warna, penghalusan gerakan, dan suara opsional. Memiringkan papan menggerakkan titik, dan mengenai lingkaran mengubah warnanya dan (opsional) memicu bunyi bip. Ini adalah demonstrasi yang menyenangkan dari penginderaan gerakan pada layar RGB yang ringkas.
Kode lengkap “Target Game” ditampilkan secara otomatis di bawah artikel ini. Anda juga dapat menonton bagian Proyek 6 dari video untuk melihat bagaimana titik bergerak dan bagaimana benturan dideteksi. Jika Anda ingin membuat game sendiri, tautan afiliasi untuk membeli modul ESP32-S3 RGB LED Matrix muncul di bawah bagian kode.
Tutorial ini adalah bagian dari: Matriks LED RGB ESP32-S3
- Proyek Matriks LED RGB ESP32-S3 1- Titik Dasar
- Proyek Matriks LED RGB ESP32-S3 2 - Teks Berjalan
- Proyek Matriks LED RGB ESP32-S3 3 - Teks dari ponsel
- Proyek Matriks LED RGB ESP32-S3 4 - Titik miring
- Proyek Matriks LED RGB ESP32-S3 5 - Panah selalu ke atas
- Proyek Jam Wi-Fi + NTP dengan Matriks LED RGB ESP32-S3 -1 Jam Dasar
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 2 Jam Tampilan Waktu & Tanggal Multi Warna
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 3 Warna Malam dengan Tanggal
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 5 Warna Pelangi
- Proyek Jam Internet Matriks LED RGB ESP32-S3 - 4 Warna acak
- ESP32-S3 RGB LED Matrix test for RGB, GRB setting
/*
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);
}
Hal-hal yang mungkin Anda butuhkan
-
Amazon
-
eBay
-
AliExpressPurchase ESP32-S3 RGB Matrix from AliExpresss.click.aliexpress.com
-
AliExpressPurchase ESP32-S3 RGB Matrix from AliExpress (2)s.click.aliexpress.com
Sumber daya & referensi
-
Internal🎨 Color picker Toolrobojax.com
Berkas📁
File Fritzing
-
esp32-S3-supermini-tht fritzing part
esp32-S3-supermini-tht.fzpz0.02 MB