Construye un juego de Tres en Raya con Arduino en pantalla táctil: Tutorial paso a paso

Componentes y suministros

	Arduino UNO	×	1
	Pantalla táctil 2.8"	×	1

Aplicaciones y servicios en línea

Arduino IDE

Sobre este proyecto

¡Hola amigos! Bienvenidos a otro tutorial de Arduino. En esta guía detallada vamos a construir un juego de Tres en Raya (Tic-Tac-Toe) con Arduino. Como veréis, usamos una pantalla táctil y jugamos contra el ordenador. Un juego sencillo como el Tres en Raya es una excelente introducción a la programación de juegos y a la inteligencia artificial. Aunque no usaremos algoritmos de IA complejos, entenderemos por qué son necesarios en juegos más complejos.

Desarrollar juegos para Arduino no es fácil y requiere mucho tiempo. Pero podemos crear algunos juegos simples porque es divertido y nos permite explorar temas de programación más avanzados, como la inteligencia artificial. Es una gran experiencia de aprendizaje y al final tendréis un juego divertido para los niños.

¡Empecemos a construir este proyecto!

Paso 1: Conseguir todos los componentes

Los componentes necesarios para construir este proyecto son:

• Un Arduino Uno
• Una pantalla táctil de 2.8"

El coste del proyecto es muy bajo: solo 15 dólares.

Antes de intentar construir este proyecto, por favor ve el video que he preparado sobre la pantalla táctil haciendo clic en la tarjeta aquí. Os ayudará a entender el código y a calibrar la pantalla táctil.

Paso 2: La pantalla táctil a color de 2.8" para Arduino

Descubrí esta pantalla táctil en banggood.com y decidí comprarla para probarla en algunos de mis proyectos. Como veis, la pantalla es barata, cuesta unos 11 dólares.

Consíguela aquí.

La pantalla ofrece una resolución de 320x240 píxeles y viene como un shield, lo que hace que la conexión con Arduino sea extremadamente fácil. Como podéis ver, la pantalla usa casi todos los pines digitales y analógicos del Arduino Uno. Al usar este shield nos quedan solo 2 pines digitales y 1 analógico para nuestros proyectos. Afortunadamente, la pantalla funciona bien con el Arduino Mega, así que cuando necesitemos más pines podemos usar el Mega en lugar del Uno. Desafortunadamente, esta pantalla no funciona con el Arduino Due ni con la placa Wemos D1 ESP8266. Otra ventaja del shield es que ofrece una ranura para tarjeta micro SD, muy fácil de usar.

Paso 3: Montar el proyecto y probarlo

Después de conectar la pantalla al Arduino Uno, podemos cargar el código y ya estamos listos para jugar.

Al principio, pulsamos el botón "Start Game" y comienza la partida. El Arduino juega primero. Luego podemos hacer nuestra jugada simplemente tocando la pantalla. El Arduino juega su turno y así sucesivamente. El jugador que consiga colocar tres de sus marcas en una fila horizontal, vertical o diagonal gana la partida. Cuando termina el juego, aparece la pantalla de "Game Over". Podemos pulsar el botón "Play Again" para empezar una nueva partida.

El Arduino es muy bueno en este juego. Ganará la mayoría de las partidas, o si sois muy buenos jugadores, la partida terminará en empate. Diseñé intencionadamente el algoritmo para que cometa algunos errores y dar así una oportunidad al jugador humano. Añadiendo dos líneas más al código, podemos hacer que el Arduino sea imposible de vencer. Pero, ¿cómo puede un chip de 2 dólares, la CPU del Arduino, vencer al cerebro humano? ¿Es el programa que desarrollamos más inteligente que el cerebro humano?

Paso 4: El algoritmo del juego

Para responder a esta pregunta, veamos el algoritmo que he implementado.

El ordenador siempre juega primero. Esta decisión por sí sola hace que el juego sea mucho más fácil de ganar para el Arduino. El primer movimiento es siempre una esquina. El segundo movimiento del Arduino es también una esquina aleatoria de las restantes, sin importar la jugada del jugador. A partir de este momento, el Arduino primero comprueba si el jugador puede ganar en el siguiente movimiento y bloquea esa jugada. Si el jugador no puede ganar en un solo movimiento, juega una esquina si está disponible o una jugada aleatoria de las restantes. Eso es todo: este algoritmo simple puede vencer al jugador humano siempre o, en el peor de los casos, la partida termina en empate. No es el mejor algoritmo para el Tres en Raya, pero uno de los más simples.

Este algoritmo se puede implementar en Arduino fácilmente porque el Tres en Raya es muy simple y podemos analizarlo y resolverlo con facilidad. Si diseñamos el árbol del juego podemos descubrir estrategias ganadoras e implementarlas en código, o dejar que la CPU calcule el árbol en tiempo real y elija la mejor jugada. Por supuesto, el algoritmo que usamos es muy simple porque el juego es simple. Si intentamos diseñar un algoritmo ganador para el ajedrez, incluso con el ordenador más rápido no podríamos calcular el árbol del juego en mil años. Para juegos como ese necesitamos otro enfoque: algoritmos de inteligencia artificial y, por supuesto, un gran poder de procesamiento. Más sobre esto en un futuro video.

Paso 5: Código del proyecto

Echemos un vistazo rápido al código del proyecto. Necesitamos tres librerías para que el código compile:

• Adafruit TFTLCD modificada
• Adafruit GFX
• Touchscreen

Como veis, incluso un juego simple como este requiere más de 600 líneas de código. El código es complejo, así que no intentaré explicarlo en un tutorial corto. Os mostraré la implementación del algoritmo para los movimientos del Arduino.

Primero, jugamos dos esquinas aleatorias.

int firstMoves[]={0,2,6,8}; // usaremos estas posiciones primero
for(counter=0;counter<4;counter++) // Contar primeros movimientos jugados
{
  if(board[firstMoves[counter]]!=0) // Primer movimiento jugado por alguien
  {
    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;
    }
  }

Luego, en cada ronda comprobamos si el jugador puede ganar en el siguiente movimiento.

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 es así, bloqueamos ese movimiento, la mayoría de las veces. No bloqueamos todos los movimientos para dar al jugador humano una oportunidad de ganar. ¿Podéis encontrar qué movimientos no se bloquean? Después de bloquear, jugamos una esquina restante o un movimiento aleatorio. Podéis estudiar el código e implementar vuestro propio algoritmo invencible fácilmente. Como siempre, podéis encontrar el código del proyecto adjunto en este tutorial.

NOTA: Como Banggood ofrece la misma pantalla con dos controladores diferentes, si el código anterior no funciona, cambiad la función initDisplay a la siguiente:

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

graphics.c TicTacToeEasy.ino

Paso 6: Reflexiones finales y mejoras

Como veis, incluso con un Arduino Uno podemos construir un algoritmo invencible para juegos simples. Este proyecto es genial porque es fácil de construir y al mismo tiempo una gran introducción a la inteligencia artificial y la programación de juegos. Intentaré construir proyectos más avanzados con inteligencia artificial en el futuro usando la más potente Raspberry Pi, ¡así que estad atentos! Me encantaría conocer vuestra opinión sobre este proyecto.

Por favor, publicad vuestros comentarios abajo y no olvidéis dar like al tutorial si os parece interesante. ¡Gracias!

Código

• Fragmento de código #1
• Fragmento de código #2

Fragmento de código #1Texto plano

<p>int firstMoves[]={0,2,6,8}; // will use these positions first</p><p> for(counter=0;counter<4;counter++) //Count first moves played { if(board[firstMoves[counter]]!=0) // First move is played by someone { 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; } }</p>

Fragmento de código #2Texto plano

<p>int checkOpponent()<br>{ 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; }</p>

GitHub

https://github.com/adafruit/Adafruit-GFX-Library
https://github.com/adafruit/Adafruit-GFX-Library

GitHub

https://github.com/adafruit/Touch-Screen-Library
https://github.com/adafruit/Touch-Screen-Library