De Mario a Programador: Creando un Videojuego Educativo para Aprender Programación

Introducción

El aprendizaje de la programación puede ser un desafío para muchas personas, especialmente cuando se basa en métodos tradicionales. La necesidad de encontrar formas más interactivas y entretenidas para enseñar conceptos de programación ha llevado al desarrollo de enfoques innovadores, como el uso de videojuegos educativos. En este contexto, se creó “De Mario a Programador”, un videojuego basado en mecánicas de plataformas que incorpora preguntas de programación para reforzar el aprendizaje de una manera dinámica e interactiva.

Este informe detalla el proceso de creación del videojuego, desde su concepción hasta su implementación final, incluyendo la metodología utilizada, las herramientas de desarrollo y el papel de la inteligencia artificial en su diseño. Además, se analizan las ventajas pedagógicas del videojuego, sus funcionalidades y posibles mejoras futuras.

Contexto educativo y tecnológico

El panorama actual de la educación en programación enfrenta diversos retos. Los métodos tradicionales, basados principalmente en clases magistrales y ejercicios escritos, a menudo resultan insuficientes para captar el interés de los estudiantes modernos, quienes están cada vez más habituados a experiencias interactivas y estimulantes. Según estudios recientes en educación tecnológica, los estudiantes retienen aproximadamente un 20% de lo que escuchan, pero hasta un 90% de lo que experimentan activamente.

La gamificación, definida como la aplicación de elementos propios de los juegos en contextos no lúdicos, ha demostrado ser una estrategia eficaz para incrementar la motivación y el compromiso. En el ámbito de la enseñanza de programación, esta aproximación resulta particularmente valiosa, ya que permite a los estudiantes practicar conceptos abstractos en entornos concretos y visualmente atractivos.

“De Mario a Programador” surge como respuesta a esta necesidad, inspirándose en videojuegos clásicos de plataformas que gozan de gran popularidad y reconocimiento intergeneracional, para crear una experiencia educativa que resulte familiar y atractiva.

Objetivo del videoJuego

El objetivo principal del juego “De Mario a Programador” es proporcionar una herramienta de aprendizaje efectiva para estudiantes de programación, combinando entretenimiento con educación. A través de la mecánica de recolección de monedas y la resolución de preguntas, se busca reforzar conceptos clave mientras el usuario se divierte explorando niveles de plataformas.

El videojuego está diseñado para atender a diferentes perfiles de aprendizaje, desde principiantes que apenas comienzan a familiarizarse con los conceptos básicos de programación, hasta estudiantes más avanzados que buscan desafíos adicionales para consolidar sus conocimientos. La progresión de dificultad está cuidadosamente calibrada para mantener un equilibrio entre el desafío y la accesibilidad, evitando tanto la frustración como el aburrimiento.

Fundamentos pedagógicos

La creación de “De Mario a Programador” se basa en principios pedagógicos sólidos que sustentan su eficacia como herramienta educativa:

Aprendizaje Activo

El juego promueve que los estudiantes participen activamente en el proceso de aprendizaje, tomando decisiones, resolviendo problemas y aplicando conocimientos en tiempo real. Esta participación activa contrasta con los métodos pasivos tradicionales y favorece una mayor retención y comprensión de los conceptos.

Retroalimentación inmediata

Cada respuesta proporcionada por el jugador recibe una evaluación instantánea, permitiéndole identificar sus errores y aciertos inmediatamente. Esta retroalimentación inmediata es fundamental para el proceso de aprendizaje, ya que refuerza las conexiones neuronales asociadas con las respuestas correctas y facilita la corrección de conceptos erróneos.

Aprendizaje basado en juegos

La estructura lúdica del videojuego aprovecha la predisposición natural humana hacia la diversión y la competición. Al convertir el aprendizaje en una actividad placentera, se reduce la resistencia cognitiva y emocional hacia conceptos que podrían percibirse como complejos o aburridos en un contexto tradicional.

Personalización del aprendizaje

Los diferentes niveles de dificultad y la variedad de preguntas permiten que cada estudiante avance a su propio ritmo, enfocándose en las áreas donde necesita más práctica y evitando la redundancia en conceptos ya dominados.

Inteligencia artificial en el desarrollo

La inteligencia artificial (IA) jugó un papel clave en la optimización del desarrollo del videojuego. Se utilizó Claude, un modelo de IA generativa, para asistir en la generación de código, solución de errores y estructuración del sistema de preguntas. Algunos de los prompts utilizados fueron:

• “Genera un sistema de preguntas aleatorias con tres niveles de dificultad.”
• “Crea un sistema de colisiones para plataformas y enemigos.”
• “Diseña un temporizador con cambio de color según el tiempo restante.”

Gracias a estas interacciones con la IA, se logró optimizar el tiempo de desarrollo y mejorar la implementación de mecánicas clave, permitiendo iteraciones rápidas y mejorando la experiencia de juego

La colaboración con sistemas de IA no solo aceleró el proceso de desarrollo, sino que también aportó soluciones innovadoras que quizás no habrían surgido en un proceso de programación convencional. Por ejemplo, el sistema de generación de preguntas implementa algoritmos que aseguran una distribución equilibrada de los temas y niveles de dificultad, evitando la repetición excesiva y manteniendo el interés del jugador.

Además, la IA contribuyó a la optimización del rendimiento del juego, sugiriendo mejoras en la estructura del código que redujeron significativamente los tiempos de carga y mejoraron la fluidez de la experiencia en diferentes dispositivos y navegadores.

Características del Videojuego

El videojuego cuenta con una serie de funcionalidades diseñadas para garantizar una experiencia de aprendizaje efectiva y divertida:

1. Sistema de Preguntas

• Temporizador con cambio de color según el tiempo restante, que añade un elemento de presión controlada para simular situaciones reales de resolución de problemas.
• Verificación de respuestas correctas e incorrectas con explicaciones detalladas para cada respuesta, facilitando el aprendizaje incluso a partir de los errores.
• Puntuación basada en la dificultad seleccionada y el tiempo de respuesta, incentivando tanto la precisión como la rapidez en la resolución de problemas.
• Preguntas aleatorias con tres niveles de dificultad, categorizadas en temas fundamentales de programación como sintaxis, estructuras de control, algoritmos básicos y conceptos de programación orientada a objetos.
  

2. Mecánicas del Juego

• Sistema de colisiones con plataformas, monedas y enemigos, implementado mediante algoritmos de detección de hitbox optimizados.
• Física de salto y gravedad que simula de manera realista el movimiento del personaje, proporcionando una sensación de control satisfactoria.
• Movimiento de enemigos con cambio de dirección basado en patrones predefinidos y detección de obstáculos.
  

3. Gráficos y Animación

• Diseño de personajes, plataformas, monedas y enemigos inspirados en juegos clásicos, pero con identidad propia.
• Animación básica del personaje con ciclos de movimiento, salto, caída e interacción con elementos del escenario.
• Efectos visuales dinámicos como partículas, destellos y cambios de iluminación que proporcionan retroalimentación visual inmediata a las acciones del jugador.
• Interfaz de usuario intuitiva y accesible, diseñada siguiendo principios de experiencia de usuario (UX) para minimizar la curva de aprendizaje.
  
  

4. Sistema de Niveles

• Carga de diferentes niveles con configuraciones únicas en términos de diseño, dificultad y elementos interactivos.
• Selección aleatoria de preguntas según la dificultad para garantizar variedad en sucesivas partidas.
• Progresión gradual de dificultad tanto en las mecánicas de plataformas como en la complejidad de las preguntas.
• Niveles temáticos que introducen nuevos conceptos de programación de manera contextualizada y coherente.
  

5. Gestión del Juego

• Sistema de pausa con tecla “P” que permite al jugador tomar un descanso sin perder su progreso.
• Condiciones de Game Over y reinicio del juego con opciones para conservar el progreso o comenzar desde cero.
  

Metodología de Desarrollo

El desarrollo del videojuego se llevó a cabo utilizando un enfoque ágil, lo que permitió realizar iteraciones rápidas y mejoras continúas basadas en pruebas y retroalimentación. Se trabajó con ciclos de desarrollo cortos, asegurando que cada funcionalidad fuera probada y optimizada antes de avanzar a la siguiente fase.

El proceso de desarrollo se estructuró en sprints de dos semanas, siguiendo los principios de Scrum adaptados al contexto del proyecto. Cada sprint comenzaba con una sesión de planificación donde se seleccionaban las historias de usuario a implementar, y concluía con una revisión del trabajo completado y una retrospectiva para identificar oportunidades de mejora en el proceso.

La metodología ágil resultó particularmente valiosa para este proyecto, ya que permitió adaptar rápidamente el desarrollo a los descubrimientos realizados durante las pruebas con usuarios. Por ejemplo, después de observar que algunos jugadores encontraban dificultades con la sincronización entre las mecánicas de plataformas y la aparición de preguntas, se implementó un sistema de “zona segura” que garantizaba que las preguntas solo aparecieran cuando el personaje estaba en una posición estable.

Para la implementación del videojuego, se utilizaron tecnologías web, específicamente HTML, CSS y JavaScript.

• HTML se utilizó para estructurar los elementos del juego, como el lienzo donde se renderizan los gráficos y los contenedores de la interfaz de usuario.
• CSS permitió definir el estilo visual de los elementos, asegurando una experiencia atractiva y coherente en distintas pantallas y dispositivos.
• JavaScript fue el núcleo del desarrollo, manejando la lógica del juego, la detección de colisiones, la física de los personajes y la interacción del usuario.

El código fue desarrollado en el entorno de desarrollo integrado Visual Studio Code, aprovechando sus herramientas avanzadas como resaltado de sintaxis, extensiones para JavaScript, herramientas de depuración y gestión de sersiones con GitHub:

• Resaltado de sintaxis y autocompletado, facilitando la escritura del código.
• Extensiones especializadas, como ESLint para mejorar la calidad del código JavaScript y Live Server para visualizar los cambios en tiempo real.
• Herramientas de depuración, permitiendo identificar y corregir errores de manera eficiente.
• Integración con Git y GitHub, lo que permitió gestionar versiones del código y trabajar de forma colaborativa.
  

Funcionalidad del Juego “De Mario a Programador”

El objetivo del juego “De Mario a Programador” es que el jugador se desplace a través de un mundo de plataformas mientras aprende conceptos clave de programación. Para ello, el personaje principal puede moverse y saltar, y cada vez que recoge una moneda, se le presenta una pregunta relacionada con programación. Si responde correctamente, obtiene puntos y continúa avanzando; si responde incorrectamente, recibe una penalización o pierde una oportunidad. El desafío es completar el nivel respondiendo la mayor cantidad de preguntas de forma correcta mientras supera los obstáculos del escenario.

Explicación del Código

El desarrollo de “De Mario a Programador” fue impulsado con tecnologías web estándar, utilizando HTML para la estructura del juego, CSS para el diseño visual y JavaScript para la lógica de interacción. El código fue desarrollado en el entorno de desarrollo integrado (IDE) Visual Studio Code, aprovechando su capacidad para gestionar proyectos web.

Jugabilidad

• Escenario: Un mundo de plataformas donde el personaje se desplaza.
• Movimiento: El personaje puede moverse a la izquierda y derecha, así como saltar para esquivar obstáculos.
• Interacción: Cada vez que el jugador recoge una moneda, se activa una pregunta de programación.
• Objetivos: Completar los niveles respondiendo correctamente la mayor cantidad de preguntas posibles.
  

Estructura del Código

HTML

• <head>: Configura el título de la página, los estilos y los scripts necesarios.
• <body>: Contiene el contenedor del juego, la interfaz de usuario (barra de puntuación, temporizador) y el modal de preguntas.
  

CSS

• Define los estilos del escenario, el personaje, las monedas y los obstáculos.
• Establece animaciones y transiciones para los movimientos y efectos visuales.
  

JavaScript

• Cargar el juego: Espera a que el DOM esté completamente cargado antes de ejecutar el código.
• Definición de variables:
  • gameContainer: Contenedor del juego en el HTML.
    
    
  • score, level: Variables que almacenan la puntuación y el nivel actual.
  • questionModal: Referencia al modal donde aparecen las preguntas.
    
• Funciones principales:
  • initializeGame(): Configura el juego al inicio.
  • moveCharacter(): Controla el movimiento del personaje en pantalla.
  • checkCollisions(): Detecta cuando el personaje recoge una moneda.
  • showQuestion(): Muestra una pregunta aleatoria en un modal.
  • validateAnswer(): Verifica si la respuesta del usuario es correcta o incorrecta.
  • updateScore(): Actualiza la puntuación del jugador.
    
    

Impacto Educativo

Los videojuegos educativos han demostrado ser herramientas efectivas para el aprendizaje debido a su capacidad para involucrar activamente a los jugadores.

“De mario a Programador” tiene un impacto positivo en los estudiantes al:

• Mejorar la retención de conceptos: La interacción constante con preguntas refuerza el aprendizaje de programación
• Incrementar la motivación: La gamificación y la obtención de puntos generan un ambiente de superación personal
• Fomentar la resolución de problemas: Responder preguntas bajo tiempo límite mejora la capacidad analítica y de toma de decisiones

Posibles mejoras y futuras implementaciones

Si bien el videojuego ya cumple con su objetivo educativo, existen varias mejoras que podrían implementarse en versiones futuras entre ellas:

• Expansión de la base de preguntas: Incluir una mayor variedad de preguntas y niveles de dificultad más personalizados
• Implementación de multijugador: Permitir que varios jugadores compitan en la resolución de preguntas
• Compatibilidad con dispositivos móviles: Adaptar los controles y la interfaz para una mejor experiencia en teléfonos y tabletas (responsive)
• Uso de machine learning: Analizar el desempeño del usuario para ajustar la dificultad de las preguntas de forma dinámica

Conclusiones

“De Mario a Programador” es una solución innovadora que combina entretenimiento con educación para facilitar el aprendizaje de la programación. Su enfoque interactivo y basado en mecánicas de plataformas permite a los jugadores aprender de manera efectiva mientras disfrutan del juego. Gracias al uso de inteligencia artificial, metodologías ágiles y tecnologías web modernas, se logró desarrollar un producto funcional que podría expandirse y mejorarse a futuro para llegar a un público más amplio.

Este videojuego representa un ejemplo del potencial que tienen los videojuegos educativos para transformar la forma en que se enseñan disciplinas complejas como la programación, haciendo el proceso de aprendizaje más accesible, interactivo y motivador.

Créditos

Autor: Mónica Natalia Gallego Gómez

Editor: Andrés Céspedes

Código: UCVS-9

Universidad: Universidad Central

Fuentes

Becker, K. (2021). What is a game? Revisiting game definitions for educational game design and development. Educational Technology Research and Development, 69, 583-608. https://doi.org/10.1007/s11423-021-09984-5

Demir, Ö., & Seferoglu, S. S. (2021). A comparison of programming teaching tools: Students' perspectives on Alice, Scratch, and App Inventor. Journal of Educational Computing Research, 59(1), 29-55. https://doi.org/10.1177/0735633120973430

Godovykh, M., & Tasci, A. D. (2020). Timing and relevance of secondary tasks impact multitasking performance: A meta-analysis. Computers & Education, 161, 104078. https://www.sciencedirect.com/science/article/abs/pii/S0360131520302761?via%3Dihub

Tsai, C. Y., & Hsu, H. J. (2020). Comparison of approaches for programming education in K-12 schools: Computational thinking vs. coding. Education and Information Technologies, 25, 4331-4348. https://link.springer.com/article/10.1007/s10639-020-10166-8

Anthropic. (s.f.). [Logo de Claude con nodos interconectados] [Imagen]. AI Glossary: What is Claude? https://www.theainavigator.com/blog/what-is-claude

Gallego, M. N. (2025). [Contenedor del juego en HTML] [Figura]. Colección personal.

Gallego, M. N. (2025). [Modal de preguntas] [Figura]. Colección personal.

Gómez, M. N. (2025). [Videojuego de MarioBros y la programación] [Imagen generada por IA]. Generada con Microsoft Copilot.

Gómez, M. N. (2025, 09 Marzo). Explicación del videojuego de Mario a Programador [Video]. Microsoft OneDrive. https://ucentraleduco-my.sharepoint.com/:v:/g/personal/mgallegog_ucentral_edu_co/EfK2hmxxzv1Mp_f3ipyo4zgBCfGJev7JRqvm2l_e7EWKpw?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0NvcHkifX0&e=LznAmj

Abdul Jabbar, A. I., & Felicia, P. (2015). Gameplay engagement and learning in game-based learning: A systematic review. Review of Educational Research, 85(4), 740-779. https://journals.sagepub.com/doi/10.3102/0034654315577210

Brown, Q., Mongan, W., Kusic, D., Garbarine, E., Fromm, E., & Fontecchio, A. (2013). Computer aided instruction as a vehicle for problem solving: Scratch programming environment in the middle years classroom. Conference Proceedings of the American Society for Engineering Education Annual Conference & Exposition, 1-16. https://peer.asee.org/deepening-conceptual-understanding-in-an-introductory-material-science-course-through-active-learning-strategies