Make a Pokemon Game with Python, Google Colab and AI, step by step

I have created an interactive minigame called Pokémon Quiz. The idea arose to combine my love for classic Pokémon with a bit of programming in Python, and I have done it all in Google Colab. It's nothing special, but it's an excellent opportunity to experiment and learn. Furthermore, having the help of ChatGPT helped me organise ideas and structure the code, leaving more room to enjoy the process.

🔧 Tools Used

To put together Pokémon Quiz, I relied on several tools and libraries that helped me make everything work:

• Python🐍: The programming language I used to write the game code.
• Google Colab💻: The online environment where I tested and shared my interactive notebook.
• ipywidgets🎛️: These widgets made it possible to create a simple and fun graphical interface.
• Matplotlib📊: It allowed me to show images and graphics, such as the silhouette of Pokémon.
• Pillow (PIL)🖼️: With this library, I was able to process the images, download them and generate the famous silhouettes.
• PokeAPI🔗: The source of the official Pokémon sprites, so that the game had that authentic touch.

🎨Design and visual style

I wanted the game to not only work well, but also feel authentic and reminiscent of those old days. Therefore, I decided on:

• Retro Typography: I used the font «Press Start 2P« from Google Fonts, perfect to give it that classic look.
• Backgrounds and Colors: I chose a gradient background in yellow and blue tones, very much in the style of Pokémon, and added semi-transparent containers so that the elements stood out.
• Friendly Interface: From the home screen with the “PLAY” button to the selection of the Pokémon generation, each part was designed to make the user feel comfortable and, above all, have fun.

🏗️ How did I do it?

The development process was put together step by step, and here I will tell you about it in a simple way:

1. Project Organization: I started by creating a notebook in Google Colab, where I separated the code into sections: one to import the libraries, another to define the CSS styles, and others for the functions and main logic of the game. This helped me keep everything organized.

2. Preparation of Functions and Data: I developed functions to download images, convert them to the appropriate format for the widgets and generate the silhouettes of the Pokémon. I also defined dictionaries with the sprite URLs of the different generations (Gen 1 to Gen 5), which made adding new Pokémon very easy.

3. Creation of the Interface: I used ipywidgets to assemble each screen of the game:

   • one splash screen with the title and a “PLAY” button.
   • one generation selection screen to choose the group of Pokémon.
   • The game screen, where the silhouette is shown and response options are offered.
   • and one summary screen which shows your score and details of each round.

4. Adjustments and Tests: Not everything went perfectly the first time. There were times when buttons didn't behave as I expected or options didn't update well. With several tests in Colab and some advice from ChatGPT, I fine-tuned every detail to make the experience as fluid as possible.

   💡Prompt to ChatGPT example:
   "El juego ya funciona, pero necesito un último ajuste: que toda la experiencia mantenga un estilo visual unificado con una estética inspirada en Pokémon. Quiero que se sienta como un videojuego, por lo que al iniciar, aparezca una pantalla con un botón 'PLAY' y, al hacer clic en él, comience el juego. ¿Puedes implementar estos cambios para lograr esa coherencia desde el inicio hasta el final?"

5. As a result, ChatGPT suggested the following styling example to give the game a consistent visual design:

# Estilos de ejemplo para el cuaderno de Pokémon Quiz
display(HTML('''
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
  background: linear-gradient(135deg, #FFCB05, #3D7DCA);
  font-family: 'Press Start 2P', cursive;
  color: #FFF;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Asegura que el cuerpo ocupe toda la altura de la ventana */
}
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 20px;
}
/* Estilo para el splash con fondo y bordes */
.splash {
  border: 5px solid #3D7DCA;
  border-radius: 20px;
  background-color: rgba(255,203,5,0.8);
  width: 600px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Clase para el título Pokémon Quiz */
.pokemon-quiz-title {
  font-family: 'Press Start 2P', cursive;
  font-size: 36px;
  color: #3D7DCA;
  text-shadow: 2px 2px #FFCB05;
}

/* Clase para el botón PLAY con tipografía retro */
.play-button {
  background-color: #3D7DCA;
  border: none;
  border-radius: 10px;
  width: 150px;
  height: 60px;
  color: #FFCB05;
  font-family: 'Press Start 2P', cursive;
  font-size: 20px;
  cursor: pointer;
}

/* Clase para la sección de selección de generación */
.gen-selection-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ocupa todo el ancho de la pantalla */
  margin: 20px 0; /* Añade un margen arriba y abajo */
}

/* Estilos para el dropdown de generaciones */
.widget-dropdown select {
  font-family: 'Press Start 2P', cursive !important;
  font-size: 16px !important; /* Aumenta el tamaño de la fuente */
  background-color: #3D7DCA !important; /* Fondo azul */
  color: #FFCB05 !important; /* Texto amarillo */
  border: 2px solid #FFCB05 !important; /* Borde amarillo */
  border-radius: 10px !important; /* Bordes redondeados */
  padding: 5px !important; /* Relleno interno */
  width: auto !important;
  appearance: none; /* Elimina el estilo por defecto del dropdown */
  -webkit-appearance: none; /* Safari y Chrome */
  -moz-appearance: none; /* Firefox */
  cursor: pointer; /* Cambia el cursor a "pointer" */
}

/* Estilos para el botón "Iniciar Juego" */
.start-button-style{
    background-color: #3D7DCA;
    border: none;
    border-radius: 10px;
    width: 150px;
    height: 40px;
    color: #FFCB05;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    cursor: pointer;
}

/* Se asegura que todos los demás botones utilicen la tipografía retro */
.widget-button {
  font-family: 'Press Start 2P', cursive !important;
  font-size: 14px !important;
}

/* Estilo para imágenes decorativas si se necesitan */
.decor-image {
  width: 100px;
  height: auto;
  margin: 0 20px;
}

/* Ajustes para los dropdown*/
.widget-dropdown .dropdown-label {
    font-family: 'Press Start 2P', cursive;
}
.widget-dropdown .dropdown-options {
    font-family: 'Press Start 2P', cursive;
}
/* Estilos para las opciones del dropdown */
.widget-dropdown select option {
  background-color: #3D7DCA !important; /* Fondo azul */
  color: #FFCB05 !important; /* Texto amarillo */
  font-family: 'Press Start 2P', cursive !important; /* Tipografía retro */
  font-size: 14px !important; /* Tamaño de fuente */
  border: 2px solid #FFCB05 !important; /* Borde amarillo */
  border-radius: 10px !important;
}
</style>
<script>
  // Este script de JavaScript es para intentar modificar el comportamiento del dropdown
  // Esto es necesario porque no podemos acceder a todos los elementos del dropdown con CSS
  // y tenemos que usar JavaScript para cambiar su comportamiento.
  // Se inyecta JavaScript para que se ejecute en el navegador del cliente.

  // Esperar a que el DOM (Document Object Model) esté completamente cargado
  window.addEventListener('DOMContentLoaded', (event) => {
    // Buscar todos los elementos <select> (dropdowns) en la página
    document.querySelectorAll('select').forEach(select => {
      // Añadir un event listener para el evento 'focus' (cuando el dropdown se abre)
      select.addEventListener('focus', () => {
        // Aumentar el z-index (capa) del dropdown para que se muestre encima de otros elementos
        select.style.zIndex = '100'; // Ajusta este valor si tienes otros elementos con z-index alto
      });

      // Añadir un event listener para el evento 'blur' (cuando el dropdown se cierra)
      select.addEventListener('blur', () => {
        // Restaurar el z-index del dropdown a su valor normal
        select.style.zIndex = 'auto';
      });
    });
  });
</script>
'''))

🎯 Conclusion

Pokémon Quiz is the result of putting into practice ideas and tools that, although simple, were combined to create something entertaining and nostalgic. It's not just about code, it's about enjoying the process, learning from mistakes, and experimenting with creativity.

If you feel like taking a look or even trying and modifying the code, go ahead! Every change is an opportunity to learn and have fun.

🚀Try it yourself!

Would you like to experiment with the code?

👉Click here to open the notebook in Google Colab and try the game Pokémon Quiz.