Chisme del Lince 185: Atrapa la fruta, tu primer videojuego MakeCode Arcade
La escena
Recreo del martes en el aula TIC. El Lince de la Noche ha llegado con una mochila llena de ideas y un portátil abierto en Unity.
—Hoy vamos a programar un videojuego en 3D con físicas, enemigos con inteligencia artificial y tres niveles —anuncia, muy serio.
La Gata Montesa mira el reloj de la pared.
—Lince, tienen doce años y el recreo dura veinticinco minutos. ¿Cuántos de esos minutos se va a pasar Unity instalándose?
El Lince se rasca la oreja. La barra de progreso sigue en el 4 %.
—Vale. ¿Y si empezamos por algo que funcione hoy, que puedan enseñar a su familia esta tarde y que el martes que viene puedan mejorar? —propone la Gata—. Un pato, una manzana y treinta segundos.
Introducción
En este chisme creamos el primer videojuego MakeCode Arcade de los Recreos Activos STEAM del IES Monterroso: un personaje que se mueve con las flechas y atrapa fruta antes de que se acabe el tiempo.
MakeCode Arcade es un editor gratuito de Microsoft que funciona en el navegador. Se programa con bloques, como en la micro:bit, y el juego se prueba al momento en una consola dibujada en la pantalla.
No hace falta cuenta ni instalar nada. En un solo recreo cada pareja termina un videojuego MakeCode Arcade que funciona.
Por qué este chisme
Queríamos que el alumnado de 2º de ESO creara videojuegos desde el primer día, sin escribir código y sin perder el recreo en instalaciones.
MakeCode Arcade cumple las tres condiciones que buscábamos: es gratis, no pide datos personales y usa los mismos bloques que ya conocen de la micro:bit. Si ya habéis hecho la pizarra de LEDs con micro:bit o el LED con micro:bit, los cajones de bloques os sonarán.
Cómo funciona
Un videojuego MakeCode Arcade está hecho de objetos (sprites) que tienen un tipo. Nuestro pato es de tipo Player y la manzana de tipo Food.
El programa tiene dos partes:
- al iniciar: lo que pasa una sola vez al empezar (fondo, personajes, puntos, cuenta atrás).
- un evento: lo que pasa cada vez que el pato toca la manzana (sumar un punto y mover la manzana a un sitio al azar).
Esta idea de “cuando pase esto, haz aquello” es la programación por eventos. Es la base de casi todos los videojuegos.
Qué necesitamos
- Un ordenador con Chrome o Edge.
- La dirección arcade.makecode.com/?lang=es-ES (ese final pone el editor en español).
- Una pareja: uno maneja el ratón y otro lee los pasos. A mitad se cambian.
Construcción del juego
- Entra en la web y pulsa Nuevo proyecto.
- Escribe el nombre Atrapa la fruta y pulsa Crear.
A la izquierda está la consola, donde se prueba el juego. En el centro están los cajones de bloques. A la derecha, la zona de trabajo con el bloque verde al iniciar.
Arrastra estos bloques dentro de al iniciar, en este orden:
| Paso | Qué haces | Cajón | Bloque |
|---|---|---|---|
| 1 | Pinta el fondo de verde | Escena | fijar color de fondo a |
| 2 | Crea tu personaje (Player) | Objetos | fijar jugador a objeto del tipo Player |
| 3 | Muévelo con las flechas | Mando | mover jugador con botones |
| 4 | Que no se salga de la pantalla | Objetos | permanecer en pantalla ACTIVADO |
| 5 | Crea la fruta (Food) | Objetos | fijar fruta a objeto del tipo Food |
| 6 | Pon la fruta en un sitio al azar | Objetos + Matemática | posición x, y con escoger al azar |
| 7 | Puntos a cero y 30 segundos | Información | fijar puntaje a 0 y start countdown 30 |
| 8 | Al tocar la fruta: +1 y la fruta salta | Objetos + Información | cuando el sprite de tipo Player se superpone otherSprite del tipo Food |
Tres trucos para que salga a la primera:
- Dos objetos, dos nombres. En el paso 5, abre el desplegable del nombre y elige Nueva variable. Llámala fruta.
- El tipo importa. Si el pato y la manzana son los dos Player, el paso 8 no funciona.
- El paso 8 va suelto. Es un evento: se coloca fuera de al iniciar.
Así queda el programa completo:
El código
Este es el mismo programa en JavaScript. Se puede pegar en la pestaña JavaScript del editor y, al volver a Bloques, aparecen los bloques de la imagen.
// PARTE 1 · lo importante: el escenario y los personajes
scene.setBackgroundColor(7)
let jugador = sprites.create(sprites.duck.duck1, SpriteKind.Player)
controller.moveSprite(jugador)
jugador.setStayInScreen(true)
let fruta = sprites.create(sprites.food.smallApple, SpriteKind.Food)
fruta.setPosition(randint(10, 150), randint(10, 110))
// PARTE 2 · las reglas del juego: puntos y tiempo
info.setScore(0)
info.startCountdown(30)
// PARTE 3 · el evento: qué pasa al tocar la fruta
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
info.changeScoreBy(1)
otherSprite.setPosition(randint(10, 150), randint(10, 110))
})Cómo probarlo
Antes de abrir MakeCode puedes ensayar en el simulador del chisme 185: lleva el mismo programa a la vista y un botón de demo automática.
Pulsa sobre la consola y mueve el pato con las flechas del teclado. Cada manzana suma un punto arriba a la derecha. A los 30 segundos se acaba la partida y sale la puntuación.
Lee y predice antes de cambiar nada:
- ¿Qué pasará si cambias el 30 por 10?
- ¿Y si pones la manzana con “escoger al azar de 10 a 20”?
- ¿Qué ocurre si la fruta también es de tipo Player?
Dibuja tu personaje
Pulsa la imagen del pato dentro del bloque. Se abre el editor de dibujo: con el lápiz y la paleta dibujas tu propio personaje en píxeles, o eliges otro en Galería. Pulsa Listo para guardarlo.
Guarda tu juego
Sin cuenta, el juego se guarda solo en el navegador de ese ordenador. Para llevártelo, pulsa el botón del disquete junto al nombre del proyecto. Se descarga un archivo con el juego dentro.
El próximo recreo, en la página de inicio, pulsa Importar y elige ese archivo.
Qué estamos haciendo realmente
Un videojuego es una simulación: un mundo con reglas que se repiten muchas veces por segundo. Cada vez que la consola se redibuja, MakeCode comprueba si el pato y la manzana se tocan.
“Escoger al azar” no es magia. El ordenador usa un generador de números pseudoaleatorios: una fórmula que da números que parecen al azar. Por eso cada partida es distinta.
Para el aula
- Duración: un recreo de unos 25 minutos. Los retos dan continuidad a las sesiones siguientes.
- Sin cuentas ni datos personales. Compartir un juego crea un enlace público, así que es mejor guardarlo con el disquete.
- DUA · representación: pasos en tabla, en texto, con imágenes y con el mismo programa en JavaScript.
- DUA · acción y expresión: trabajo en pareja con roles que rotan; se juega con teclado o con los botones de la consola en pantalla. La rueda dentada tiene un modo de lector de pantalla.
- DUA · implicación: cada alumno elige personaje y reto; el reto con mensaje conecta el juego con su entorno.
- Quien llega tarde empieza por el paso 1 o se une a una pareja como lector.
Retos
- Cambia el color del fondo y dibuja tu personaje.
- Cambia la manzana por otra comida de la Galería.
- Baja el tiempo a 15 segundos.
- Añade un sonido al atrapar la fruta (cajón Música).
- Crea un enemigo de tipo Enemy que te quite una vida al tocarte.
- Reto con mensaje: convierte el juego en algo con sentido. El pato recoge basura en la playa de Estepona en vez de fruta, o una abeja poliniza flores. ¿Qué aprende quien lo juega?
Qué hemos aprendido
- Un videojuego MakeCode Arcade se construye con objetos que tienen un tipo.
- “al iniciar” se ejecuta una vez; un evento se ejecuta cada vez que pasa algo.
- El azar del ordenador es pseudoaleatorio.
- En un recreo se puede pasar de la idea a un juego que funciona.
Escena final
—Treinta y dos manzanas —presume la Gata, enseñando la consola.
El Lince ha dibujado un lince en lugar del pato. Le ha salido con una oreja más grande que la otra.
—El martes que viene —dice— mi lince recoge plásticos en la playa. Y el que pierda, recoge los de verdad.
Para seguir investigando
- MakeCode Arcade: el editor y sus tutoriales oficiales.
- Generador de números pseudoaleatorios en Wikipedia.
- Pizarra de LEDs con micro:bit: los mismos bloques, en una placa.
También te puede interesar
