Carte de Visite PCB Tic-Tac-Toe 4×4 Personnalisée – Guide de Conception, Fabrication et Programmation

Vue d'ensemble

Ce tutoriel vous guide dans la création d'une carte de visite au format PCB qui fait également office de jeu Tic-Tac-Toe 4×4. Le recto affiche le logo EDISON SCIENCE CORNER, des icônes de réseaux sociaux et un QR code vers une chaîne YouTube. Au verso, un circuit de jeu entièrement fonctionnel alimenté par un ATmega328, des LEDs NeoPixel et des interrupteurs tactiles.

Composants et Fournitures

Article	Qté
Microchip ATmega328P‑AU	1
Bande LED NeoPixel RGB (WS2812B)	16 (4×4)
Interrupteurs tactiles, actionnement par le dessus	16
PCB personnalisé (JLCPCB)	1
Arduino UNO (pour la programmation)	1
Connecteur USB Micro‑Femelle	1
Condensateurs 22 pF (0805)	2
Condensateurs 100 nF (0805)	2
Résistances 1 kΩ (0805)	3
Résistance 10 kΩ (0805)	1
Quartz 16 MHz	1
LEDs (CMS 0805)	2

Outils et Machines Nécessaires

• Fer à souder (standard)
• Fil à souder sans plomb
• Flux à souder
• Kit de fils de liaison (5 cm, 10 pièces)

Applications et Services en Ligne

• Arduino IDE
• EasyEDA – Plateforme de conception PCB
• JLCPCB – Fabrication PCB à bas coût (dès 2 $ pour 5 cartes)

Étape 1 : Conception et Fabrication du PCB

Avec EasyEDA, j'ai conçu une carte de 89 mm × 50 mm (format carte de visite standard) et routé une matrice 4×4 pour le Tic-Tac-Toe. Le schéma utilise un ATmega328 comme microcontrôleur principal et intègre 16 LEDs WS2812B et 16 interrupteurs tactiles. Après finalisation du layout, j'ai exporté les fichiers Gerber et les ai envoyés à JLCPCB. Avec une épaisseur de 0,8 mm et un masque noir, les PCB reçus sous deux semaines correspondaient à la qualité attendue pour des projets amateurs.

Étape 2 : Rassembler les Composants

Reportez-vous à la liste ci-dessus. Toutes les pièces sont courantes, peu coûteuses et disponibles chez des distributeurs comme Digi‑Key, Mouser ou AliExpress.

Étape 3 : Soudure

Commencez par souder le connecteur USB micro‑femelle, puis placez l'ATmega328 et ses composants passifs. Soudez ensuite la bande NeoPixel en alignant chaque LED face à son interrupteur tactile correspondant. Soudez soigneusement les 16 interrupteurs en respectant leur orientation. L'assemblage complet prend environ une heure pour un amateur expérimenté.

Étape 4 : Programmation

Connectez la carte au PC via USB. Téléversez le sketch suivant avec l'Arduino IDE :

Télécharger le Code

Le sketch initialise le tableau de 16 LEDs, gère les appuis sur la matrice clavier 4×4 et implémente une détection de victoire simple. Le joueur 1 utilise les LEDs vertes, le joueur 2 les LEDs bleues. En cas de victoire, la carte clignote dans la couleur du gagnant ; si la grille se remplit sans vainqueur, elle clignote en rouge.

Étape 5 : Jouer et Profiter

Retournez la carte pour révéler le côté jeu. Chaque pression allume la LED correspondante. Les règles suivent le Tic-Tac-Toe classique mais sur une grille 4×4 avec indicateurs de couleur. Profitez d'un jeu portable unique qui fait sensation lors de conférences et événements networking.

Code Source

Voici le sketch Arduino complet (C/C++) utilisé dans ce projet. Il inclut la gestion du clavier, le contrôle des LEDs et la logique de victoire.

#include <Keypad.h>
#include <FastLED.h>
#define LED_PIN 5
#define NUM_LEDS 16
#define LED_TYPE WS2812B
#define COLOR_ORDER GBR
#define BRIGHTNESS 30
CRGB leds[NUM_LEDS];
int player = 1;
char board[16] = {'1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16'};
char key;
int moveCount = 0;
const byte ROWS = 4;
const byte COLS = 4;
char hexaKeys[ROWS][COLS] = {{'1','2','3','A'},{'4','5','6','B'},{'7','8','9','C'},{'*','0','#','D'}};
byte rowPins[ROWS] = {A0,A1,A2,A3};
byte colPins[COLS] = {A4,A5,2,3};
Keypad customKeypad = Keypad(makeKeymap(hexaKeys), rowPins, colPins, ROWS, COLS);

void setup(){
  Serial.begin(9600);
  LEDS.addLeds<LED_TYPE, LED_PIN, COLOR_ORDER>(leds, NUM_LEDS);
  FastLED.setBrightness(BRIGHTNESS);
  // Test : allume toutes les LEDs en vert puis bleu
  for(int i=0;i<3;i++){
    for(int j=0;j<NUM_LEDS;j++) leds[j] = (i%2==0) ? CRGB::Green : CRGB::Blue;
    FastLED.show();
    delay(500);
  }
  FastLED.clear();
}

void loop(){
  key = customKeypad.getKey();
  if(key && player==1){
    int idx = keyToIndex(key);
    leds[idx] = CRGB::Green;
    FastLED.show();
    board[idx] = 'X';
    if(checkWinner('X')){ announceWinner(1); }
    player = 2;
    delay(1000);
  }
  if(key && player==2){
    int idx = keyToIndex(key);
    leds[idx] = CRGB::Blue;
    FastLED.show();
    board[idx] = 'O';
    if(checkWinner('O')){ announceWinner(2); }
    player = 1;
    moveCount++;
    delay(1000);
  }
  if(moveCount==8){ announceDraw(); }
}

int keyToIndex(char k){
  switch(k){
    case '1': return 0; case '2': return 1; case '3': return 2; case 'A': return 3;
    case '4': return 4; case '5': return 5; case '6': return 6; case 'B': return 7;
    case '7': return 8; case '8': return 9; case '9': return 10; case 'C': return 11;
    case '*': return 12; case '0': return 13; case '#': return 14; case 'D': return 15;
  }
  return -1;
}

bool checkWinner(char mark){
  const int lines[10][4] = {{0,1,2,3},{4,5,6,7},{8,9,10,11},{12,13,14,15},
    {0,4,8,12},{1,5,9,13},{2,6,10,14},{3,7,11,15},
    {0,5,10,15},{3,6,9,12}};
  for(auto &line: lines){
    if(board[line[0]]==mark && board[line[1]]==mark && board[line[2]]==mark && board[line[3]]==mark){
      return true;
    }
  }
  return false;
}

void announceWinner(int p){
  CRGB color = (p==1) ? CRGB::Green : CRGB::Blue;
  while(true){
    for(int i=0;i<NUM_LEDS;i++) leds[i] = color;
    FastLED.show(); delay(500);
    FastLED.clear(); FastLED.show(); delay(500);
  }
}

void announceDraw(){
  while(true){
    for(int i=0;i<NUM_LEDS;i++) leds[i] = CRGB::Red;
    FastLED.show(); delay(1000);
    FastLED.clear(); FastLED.show(); delay(500);
  }
}

Schémas

Tous les fichiers de conception, la nomenclature (BOM) et le code sont disponibles en téléchargement.