Battle City Remake en GameGo con Makecode Arcade: 4 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

GameGo es una consola portátil de juegos retro compatible con Microsoft Makecode desarrollada por TinkerGen STEM education. Se basa en el chip STM32F401RET6 ARM Cortex M4 y está hecho para educadores STEM o simplemente para personas a las que les gusta divertirse creando videojuegos retro. Puedes seguir este tutorial y probar el juego en el simulador Makecode Arcade y luego ejecutarlo en GameGo.

En este artículo vamos a intentar recrear un clásico juego de disparos de tanques de Battle City, originalmente producido y publicado en 1985 por Namco para Nintendo Entertainment System (NES). En el juego original, el jugador controla un tanque y dispara proyectiles para destruir los tanques enemigos. Los tanques enemigos intentan destruir la base del jugador, así como el tanque del jugador en sí. Haremos algunas modificaciones en el juego para acomodar mejor las prácticas de programación de bloques con GameGo, pero nuestro remake aún mantendrá mucha similitud con el juego original. ¡Vamos a empezar!

Suministros

GameGo

Paso 1: Nuestro Alter-ego - Tanque Amarillo

Abra Makecode Arcade en https://arcade.makecode.com/ y haga clic en nuevo proyecto. Comenzaremos a hacer de nuestro alter-ego el tanque amarillo. Elija Establecer mySprite en un bloque de sprite de tipo jugador y dibuje un tanque amarillo mirando hacia arriba como nuestro sprite de inicio, coloque ese bloque dentro del bloque de inicio. Agregue mover mySprite con bloque de botones. ¡Ahora tenemos un tanque que podemos mover con botones en simulación! Genial, pero siempre está mirando en la misma dirección, incluso cuando nos movemos hacia abajo o hacia los lados …

Para corregir eso, agreguemos cuatro bloques más, uno para cada botón de dirección. Cree una nueva variable, llamada dirección - guardaremos la dirección de movimiento de nuestro tanque en ella, 100 corresponderá a abajo, -100 corresponderá a arriba, 200 para la derecha y -200 para la izquierda. ¿Por qué estos números? Verás más adelante, cuando agreguemos los proyectiles que disparará nuestro tanque. La lógica dentro de cada cuatro de estos bloques es muy simple: verificamos si la nueva dirección (al presionar el botón) es la misma que la dirección anterior. Si es así, básicamente no hacemos ningún cambio. Si no es así, cambiamos el sprite del tanque y, en caso de que la dirección sea hacia abajo e izquierda, volteamos la imagen del sprite para evitar dibujar sprites adicionales. Finalmente, asignemos el valor inicial de dirección a -100 (tanque hacia arriba), ya que así es como nuestro tanque inicia el juego. Intenta mover el tanque amarillo ahora, ¡el sprite cambiará de acuerdo con la dirección del movimiento ahora! Excelente, ahora agreguemos viñetas.

Dispararemos balas con proyectil a proyectil (dibuje un pequeño cuadrado plateado para ese sprite) desde mySprite con velocidades vx vy. Dentro del bloque presionado del botón A, debemos verificar el valor absoluto de dirección para ver si el tanque amarillo está mirando hacia arriba / abajo de izquierda / derecha. Luego procedemos a disparar el proyectil con la velocidad de la variable de dirección; por eso teníamos -100 / 100 / -200 / 200 para los valores de dirección.

Ahora tenemos un tanque amarillo que puede disparar proyectiles y moverse. Si los tanques simulados amarillos pudieran tener la sensación, seguramente se sentiría solo en este vacío en blanco sin enemigos y cosas que hacer. Entonces, para el siguiente paso agreguemos enemigos para que pase el tiempo.

Paso 2: saca a los enemigos

Comenzaremos este paso creando un montón de nuevas variables: dos matrices (una para contener sprites enemigos y otra para mantener direcciones enemigas), variable de tiempo de generación para almacenar el período de tiempo entre engendros, recuento de enemigos para almacenar el número máximo de enemigos al mismo tiempo. También agregaremos dos proyectiles (proyectil y proyectil enemigo) disparando en el bloque de inicio, que nos ayudarán a evitar un error más adelante.

A continuación, creamos la actualización del juego cada bloque … ms, inserta la variable spawn_time allí. La lógica dentro del bloque es simple: si el número total de enemigos en el campo de batalla es menor que el número máximo permitido de enemigos, agrega un enemigo a la lista de enemigos_sprite y agrega 200 (yendo a la derecha) en dirección a ese enemigo.

A continuación, en el objeto creado del bloque Enemy, agregamos algunos efectos gráficos, lo colocamos en un mosaico vacío aleatorio y llamamos a la función pick_direction para este objeto. En un sprite del tipo Enemy hits wall, llamamos a la misma función, pick_direction.

¿Qué hay en esa función? Aquí es donde las cosas comienzan a complicarse un poco, así que espera. Hay un 50 por ciento de posibilidades de que el tanque enemigo suba y el 50 por ciento baje; cambiamos el sprite en consecuencia. El único truco aquí es que también necesitamos cambiar el valor correspondiente a ese tanque enemigo en particular en Enemigo_directions_list a su nueva dirección, para que tengamos que disparar balas en la dirección correcta. Para eso, encontramos el índice de sprite enemigo en Enemigo_sprite_list y cambiamos el valor de ese elemento en la lista Enemigo_direcciones.

Finalmente, agreguemos disparos. Agregamos otra actualización del juego cada bloque de 500 ms y colocamos un elemento for en Enemigo_sprite_list. Con un 30% de probabilidad, un sprite enemigo disparará proyectiles enemigos en su dirección de movimiento.

Si lanzamos el juego en simulación ahora, podemos ver que nuestro tanque amarillo y los tanques enemigos aparecen en el mismo punto y se dirigen al espacio vacío. Podemos disparar y ellos pueden disparar a nuestro tanque amarillo, pero no pasaría nada. Todavía se siente tan desprovisto de significado:) Agreguemos las decoraciones y la mecánica del juego como último paso.

Paso 3:42 del juego

Comenzaremos este paso agregando vida y puntuación desde la pestaña Información y estableciendo la vida en 10 y la puntuación en cero. Luego agregamos mapa de mosaicos de conjunto de bloques a…. Dibuja el mapa del archivo para que se parezca a lo que ves en la captura de pantalla anterior. ¡No olvides agregar las paredes!

Agreguemos un sprite de tipo El proyectil se superpone a otro Sprite de tipo Jugador: aquí es cuando las balas del enemigo golpean nuestro tanque amarillo. Necesitamos asegurarnos de que estos proyectiles sean balas del enemigo y no nuestras, por lo que agregaremos que si la condición está dentro del bloque y si se evalúa como Verdadero, restamos uno del recuento de vidas. De manera similar, en otro bloque de sprite de tipo Proyectil superpuesto a otro Sprite de tipo Enemy nos aseguramos de que el proyectil sea un proyectil del tanque amarillo y si esta condición se evalúa como Verdadera, destruimos otro Sprite (el tanque enemigo), lo eliminamos de la lista. de Enemigo_sprite_list y agregue uno para anotar.

Lo último son las condiciones de victoria y derrota: para la victoria, comprobaremos si la puntuación es mayor o igual a 10 en el bloque para siempre. Si es así, mostramos la pantalla de victoria. Y en el bloque Life Zero mostramos la pantalla Game Over.

Ahora pruébelo en la simulación para ver si el juego se está ejecutando como se esperaba. ¡Luego cárgalo en GameGo y disfruta aplastando tanques enemigos!

Paso 4: juego sin fin y mejoras

En nuestro repositorio de GitHub, puede descargar dos archivos para Makecode arcade: uno es exactamente el mismo que obtendría si sigue estas instrucciones y el otro es una versión mejorada, que ha generado una progresión de nivel aleatoria. Tiene 10 niveles, cada uno se genera aleatoriamente con un mayor número de enemigos en cada nivel sucesivo.

Y, por supuesto, ¡hay más cosas que tú o tus alumnos pueden agregar al juego además de eso! ¡Hay mejor música, muros rompibles, diferentes condiciones de victoria, etc.!

Si creas una versión mejorada del juego, ¡compártela en los comentarios a continuación! Para obtener más información sobre GameGo y otro hardware para fabricantes y educadores STEM, visite nuestro sitio web, https://tinkergen.com/ y suscríbase a nuestro blog.

¡TinkerGen ha iniciado una campaña de Kickstarter para MARK (Make A Robot Kit), un kit de robot para enseñar codificación, robótica, IA!