Construisez un jeu Tic-Tac-Toe Arduino sur écran tactile : Tutoriel étape par étape

Composants et fournitures

Composant	Quantité
Arduino UNO	1
Écran tactile 2,8"	1

Applications et services en ligne

• Arduino IDE

À propos de ce projet

Chers amis, bienvenue dans un nouveau tutoriel Arduino ! Dans ce guide détaillé, nous allons construire un jeu Tic-Tac-Toe (Morpion) avec Arduino. Comme vous pouvez le voir, nous utilisons un écran tactile et jouons contre l'ordinateur. Un jeu simple comme le Tic-Tac-Toe est une excellente introduction à la programmation de jeux et à l'intelligence artificielle. Bien que nous n'utilisions pas d'algorithmes d'IA dans ce jeu, nous comprendrons pourquoi ils sont nécessaires pour des jeux plus complexes.

Développer des jeux pour Arduino n'est pas facile et demande beaucoup de temps. Mais nous pouvons créer des jeux simples car c'est amusant et cela nous permet d'explorer des sujets de programmation plus avancés, comme l'intelligence artificielle. C'est une excellente expérience d'apprentissage et à la fin, vous aurez un jeu sympa pour les enfants !

Commençons la construction de ce projet.

Étape 1 : Rassembler tous les composants

Les composants nécessaires pour construire ce projet sont les suivants :

• Un Arduino Uno
• Un écran tactile 2,8"

Le coût du projet est très faible : seulement 15 $.

Avant de tenter de construire ce projet, veuillez regarder la vidéo que j'ai préparée sur l'écran tactile en cliquant sur la carte ici. Cela vous aidera à comprendre le code et à calibrer l'écran tactile.

Étape 2 : L'écran tactile couleur 2,8" pour Arduino

J'ai découvert cet écran tactile sur banggood.com et j'ai décidé de l'acheter pour l'essayer dans certains de mes projets. Comme vous pouvez le voir, l'écran est peu coûteux, il coûte environ 11 $.

Disponible ici.

L'écran offre une résolution de 320x240 pixels et se présente sous forme de shield, ce qui rend la connexion avec l'Arduino extrêmement facile. Comme vous pouvez le constater, l'écran utilise presque toutes les broches numériques et analogiques de l'Arduino Uno. Avec ce shield, il ne nous reste que 2 broches numériques et 1 broche analogique pour nos projets. Heureusement, l'écran fonctionne aussi très bien avec l'Arduino Mega, donc quand nous avons besoin de plus de broches, nous pouvons utiliser l'Arduino Mega au lieu de l'Uno. Malheureusement, cet écran ne fonctionne pas avec l'Arduino Due ou la carte Wemos D1 ESP8266. Un autre avantage du shield est qu'il offre un emplacement pour carte micro SD, très facile à utiliser.

Étape 3 : Construction du projet et test

Après avoir connecté l'écran à l'Arduino Uno, nous pouvons charger le code et nous sommes prêts à jouer.

Au début, on appuie sur le bouton « Démarrer la partie » et le jeu commence. L'Arduino joue en premier. Nous pouvons ensuite jouer notre coup simplement en touchant l'écran. L'Arduino joue ensuite son coup, et ainsi de suite. Le joueur qui réussit à placer trois de ses marques sur une ligne horizontale, verticale ou diagonale gagne la partie. Lorsque la partie est terminée, l'écran « Game Over » apparaît. On peut alors appuyer sur le bouton « Rejouer » pour recommencer.

L'Arduino est très fort à ce jeu. Il gagnera la plupart des parties, ou si vous êtes un très bon joueur, la partie se terminera par une égalité. J'ai intentionnellement conçu cet algorithme pour qu'il fasse quelques erreurs afin de donner une chance au joueur humain de gagner. En ajoutant deux lignes de code supplémentaires, nous pouvons rendre l'Arduino impossible à battre. Mais comment une puce à 2 $, le processeur de l'Arduino, peut-elle battre le cerveau humain ? Le programme que nous avons développé est-il plus intelligent que le cerveau humain ?

Étape 4 : L'algorithme du jeu

Pour répondre à cette question, examinons l'algorithme que j'ai implémenté.

L'ordinateur joue toujours en premier. Cette décision seule rend le jeu beaucoup plus facile à gagner pour l'Arduino. Le premier coup est toujours un coin. Le deuxième coup de l'Arduino est également un coin aléatoire parmi ceux qui restent, sans tenir compte du coup du joueur. À partir de ce moment, l'Arduino vérifie d'abord si le joueur peut gagner au coup suivant et bloque ce coup. Si le joueur ne peut pas gagner en un seul coup, il joue un coup de coin s'il est disponible, ou un coup aléatoire parmi ceux qui restent. C'est tout : cet algorithme simple peut battre le joueur humain à chaque fois, ou au pire des cas, la partie se terminera par une égalité. Ce n'est pas le meilleur algorithme pour le Tic-Tac-Toe, mais l'un des plus simples.

Cet algorithme peut être implémenté facilement sur Arduino, car le jeu Tic-Tac-Toe est très simple et nous pouvons facilement l'analyser et le résoudre. Si nous concevons l'arbre de jeu, nous pouvons découvrir des stratégies gagnantes et les implémenter facilement dans le code, ou nous pouvons laisser le processeur calculer l'arbre de jeu en temps réel et choisir le meilleur coup par lui-même. Bien sûr, l'algorithme que nous utilisons dans ce jeu est très simple, car le jeu l'est. Si nous essayons de concevoir un algorithme gagnant pour les échecs, même avec l'ordinateur le plus rapide, nous ne pourrions pas calculer l'arbre de jeu en mille ans ! Pour de tels jeux, nous avons besoin d'une autre approche : nous avons besoin d'algorithmes d'intelligence artificielle et bien sûr d'une puissance de traitement énorme. Nous en reparlerons dans une future vidéo.

Étape 5 : Code du projet

Jetons un rapide coup d'œil au code du projet. Nous avons besoin de trois bibliothèques pour que le code compile :

• Adafruit TFTLCD modifié
• Adafruit GFX
• Touchscreen

Comme vous pouvez le voir, même un jeu simple comme celui-ci nécessite plus de 600 lignes de code. Le code est complexe, je ne vais donc pas essayer de l'expliquer dans un court tutoriel. Je vais vous montrer l'implémentation de l'algorithme pour les coups de l'Arduino.

Au début, nous jouons deux coins aléatoires.

int firstMoves[]={0,2,6,8}; // positions initiales
for(counter=0; counter<4; counter++) {
  if(board[firstMoves[counter]]!=0) {
    movesPlayed++;
  }
}
do {
  if(moves<=2) {
    int randomMove = random(4);
    int c = firstMoves[randomMove];
    if (board[c]==0) {
      delay(1000);
      board[c]=2;
      Serial.print(firstMoves[randomMove]);
      Serial.println();
      drawCpuMove(firstMoves[randomMove]);
      b=1;
    }
  }

Ensuite, à chaque tour, nous vérifions si le joueur peut gagner au coup suivant.

int checkOpponent() {
  if(board[0]==1 && board[1]==1 && board[2]==0) return 2;
  else if(board[0]==1 && board[1]==0 && board[2]==1) return 1;
  else if (board[1]==1 && board[2]==1 && board[0]==0) return 0;
  else if (board[3]==1 && board[4]==1 && board[5]==0) return 5;
  else if (board[4]==1 && board[5]==1 && board[3]==0) return 3;
  else if (board[3]==1 && board[4]==0 && board[5]==1) return 4;
  else if (board[1]==0 && board[4]==1 && board[7]==1) return 1;
  else return 100;
}

Si oui, nous bloquons ce coup, la plupart du temps. Nous ne bloquons pas tous les coups afin de donner une chance au joueur humain de gagner. Saurez-vous trouver quels coups ne sont pas bloqués ? Après avoir bloqué le coup, nous jouons un coin restant ou un coup aléatoire. Vous pouvez étudier le code et implémenter votre propre algorithme imbattable facilement. Comme toujours, vous trouverez le code du projet joint à ce tutoriel.

NOTE : Comme Banggood propose le même écran avec deux pilotes d'affichage différents, si le code ci-dessus ne fonctionne pas, modifiez la fonction initDisplay comme suit :

void initDisplay() {
  tft.reset();
  tft.begin(0x9341);
  tft.setRotation(3);
}

graphics.c TicTacToeEasy.ino

Étape 6 : Réflexions finales et améliorations

Comme vous pouvez le voir, même avec un Arduino Uno, nous pouvons construire un algorithme imbattable pour des jeux simples. Ce projet est génial car il est facile à construire et constitue en même temps une excellente introduction à l'intelligence artificielle et à la programmation de jeux. J'essaierai de construire des projets plus avancés avec l'intelligence artificielle à l'avenir en utilisant le Raspberry Pi plus puissant, alors restez à l'écoute ! J'aimerais connaître votre avis sur ce projet.

Veuillez poster vos commentaires ci-dessous et n'oubliez pas de liker le tutoriel si vous l'avez trouvé intéressant. Merci !

Code

Extrait de code #1

int firstMoves[]={0,2,6,8}; // will use these positions first
for(counter=0; counter<4; counter++) {
  if(board[firstMoves[counter]]!=0) {
    movesPlayed++;
  }
}
do {
  if(moves<=2) {
    int randomMove = random(4);
    int c = firstMoves[randomMove];
    if (board[c]==0) {
      delay(1000);
      board[c]=2;
      Serial.print(firstMoves[randomMove]);
      Serial.println();
      drawCpuMove(firstMoves[randomMove]);
      b=1;
    }
  }

Extrait de code #2

int checkOpponent() {
  if(board[0]==1 && board[1]==1 && board[2]==0) return 2;
  else if(board[0]==1 && board[1]==0 && board[2]==1) return 1;
  else if (board[1]==1 && board[2]==1 && board[0]==0) return 0;
  else if (board[3]==1 && board[4]==1 && board[5]==0) return 5;
  else if (board[4]==1 && board[5]==1 && board[3]==0) return 3;
  else if (board[3]==1 && board[4]==0 && board[5]==1) return 4;
  else if (board[1]==0 && board[4]==1 && board[7]==1) return 1;
  else return 100;
}

Ressources GitHub

• Adafruit GFX Library
• Touch Screen Library