Universidad Autónoma
del Estado de México
DISEÑO DE SISTEMAS
Título: Microsoft MakeCode
Prof. FLORES VAZQUEZ CARLOS
ALBERTO
Alumno: Torres Olivares
Johan Reymundo
ICOI8
19/11/2021
I
INDICE GENERAL
Contenido
INTRODUCCION ........................................................................................................................................... 1
• ¿QUÉ ES MICROSOFT MAKECODE? ...................................................................................................... 1
• ¿QUÉ ES LA PROGRAMACIÓN POR BLOQUES? ..................................................................................... 3
• ENTORNO DE PROGRAMACIÓN ........................................................................................................... 3
EL EMULADOR .................................................................................................................................................... 4
EL ÁREA DE CÓDIGO ............................................................................................................................................. 5
EDITOR DE SPRITES (IMÁGENES) ............................................................................................................................. 5
DESCARGA TU JUEGO ........................................................................................................................................... 6
EJEMPLO DE JUEGO PARA COMPRENDER EL FUNCIONAMIENTO DE MACKECODE ARCADE ......................... 6
JUEGO 1 - EL LABERINTO ...................................................................................................................................... 6
Mover el coche por la pantalla ................................................................................................................. 6
Mejorar la apariencia ............................................................................................................................... 8
Hacer que el coche mire hacia donde se mueva ...................................................................................... 9
Editor de mapas ...................................................................................................................................... 11
Posicionando del coche dentro del laberinto ......................................................................................... 13
Recoger princesas ................................................................................................................................... 14
Marcador de punto y cuenta atrás ......................................................................................................... 15
ELABORACIÓN DEL JUEGO COMO PROYECTO FINAL .................................................................................. 16
JUEGO: LABERINTO-TIBURÓN .............................................................................................................................. 16
¿De qué trata? ......................................................................................................................................... 16
CONCLUSION ............................................................................................................................................. 22
BIBLIOGRAFÍA ............................................................................................................................................ 22
II
INDICE DE FIGURAS
Figura 1. Ejemplo de simulador .......................................................................................................................... 1
Figura 2. Ejemplo de editor de bloques .............................................................................................................. 2
Figura 3. Ejemplo de editor de JavaScript ........................................................................................................... 2
Figura 4. Entorno de programación.................................................................................................................... 3
Figura 5. Emulador ............................................................................................................................................. 4
Figura 6. Paleta de bloques ................................................................................................................................ 4
Figura 7. Área de código ..................................................................................................................................... 5
Figura 8. Editor de Sprites................................................................................................................................... 5
Figura 9. Creando el objeto ................................................................................................................................ 6
Figura 10. Seleccionando la imagen prediseñada .............................................................................................. 7
Figura 11. Probando en el simulador .................................................................................................................. 8
Figura 12. Asignando categoría.......................................................................................................................... 8
Figura 13. Renombrando la variable mySprite ................................................................................................... 8
Figura 14. Cambiando color de fondo ................................................................................................................ 9
Figura 15. Insertando bloque para cuando se pulse cada botón ........................................................................ 9
Figura 16. Insertando imagen .......................................................................................................................... 10
Figura 17. Resultado de los botones ................................................................................................................. 11
Figura 18. Asignando set tilemap to ................................................................................................................. 12
Figura 19. Coche colisiona con la pared ........................................................................................................... 12
Figura 20. Dimensiones del mapa .................................................................................................................... 13
Figura 21. Indicando que debe seguir a nuestro coche .................................................................................... 13
Figura 22. Posicionando auto aleatoriamente ................................................................................................. 14
Figura 23. Creando un nuevo Sprite ................................................................................................................. 14
Figura 24. Detectando que ha recogido a la princesa ...................................................................................... 14
Figura 25. Asignando bloque de score .............................................................................................................. 15
Figura 26. Score va incrementando .................................................................................................................. 16
Figura 27. Temporizador y Game Over ............................................................................................................. 16
Figura 28. Bloque on start ................................................................................................................................ 16
Figura 29.Editando on start .............................................................................................................................. 17
Figura 30. Editando on start ............................................................................................................................. 17
Figura 31. Editando on start ............................................................................................................................. 18
Figura 32. Editando on start ............................................................................................................................. 18
Figura 33. Editando on start ............................................................................................................................. 18
Figura 34. Editando on start, bloque del mapa ................................................................................................ 19
Figura 35. Editando on start, diseño del mapa. ................................................................................................ 19
Figura 36. Editando parte final de on start ...................................................................................................... 19
Figura 37. Diseño del tiburón dependiendo su movimiento al oprimir una tecla ............................................. 20
Figura 38. Simular que se come al pescado y aumentar score ......................................................................... 20
Figura 39. Ciclo de enemigos ............................................................................................................................ 21
Figura 40. Destrucción del cactus al tocar con tiburón .................................................................................... 21
Figura 41. Obstáculo lava ................................................................................................................................. 21
Figura 42. Bloque de puntaje para ganar ......................................................................................................... 22
Figura 43. Bloque del tiempo regresivo ............................................................................................................ 22
III
INTRODUCCION
El editor MakeCode de Microsoft es la forma perfecta de comenzar a programar y crear con el BBC
micro:bit. Los bloques con código de colores resultan familiares para cualquiera que haya usado
Scratch, y lo suficientemente potentes como para acceder a todas las funciones de este pequeño
ordenador. También puedes cambiar a JavaScript para ver el código de texto equivalente a los
bloques.
También vamos a introducir el concepto de “programación por bloques”, que es sumamente
utilizado en el proceso de inicio de los estudiantes al mundo de la programación ya que permite
comprender los conceptos básicos de programación de una manera sencilla y gráfica.
• ¿Qué es Microsoft MakeCode?
Microsoft MakeCode es una plataforma gratuita de código abierto para la creación de experiencias
atractivas de aprendizaje de la informática que ayudan a progresar hacia la programación real.
Simulador
Un simulador interactivo ofrece a los alumnos información inmediata sobre la ejecución de sus
programas y facilita las pruebas y la depuración del código.
Figura 1. Ejemplo de simulador
Editor de bloques
Los alumnos que no sepan programación pueden comenzar con bloques de colores que pueden
arrastrar y colocar en su espacio de trabajo para crear sus programas.
1
Figura 2. Ejemplo de editor de bloques
Editor de JavaScript
Cuando estén listos, los alumnos pueden utilizar un editor completo de JavaScript con fragmentos
de código, información sobre herramientas y detección de errores.
Figura 3. Ejemplo de editor de JavaScript
2
• ¿Qué es la Programación por Bloques?
La programación por bloques es una metodología desarrollada para introducir conceptos de
programación a temprana edad. Esta metodología nos permite desarrollar la escritura de una
secuencia lógica y ordenada de instrucciones mediante el uso y aplicación de comandos en forma de
conexiones gráficas, fáciles de acoplar para encontrar una solución exitosa y efectiva a un problema
determinado.
Los bloques son figuras que representan eventos o funciones individuales que se conectan entre sí
para crear la secuencia de instrucciones o programa.
Actualmente, existen muchos programas y plataformas para introducir el concepto de
programación a través de la programación por bloques, tales como: Minecraft Code Builder,
Microsoft Makecode, Code.org, Tynker, Microbit, Arcade y Python.
• Entorno de programación
Figura 4. Entorno de programación
El entorno de desarrollo está basado en bloques y también es posible usar otros lenguajes como
JavaScript o Python.
3
El emulador
Figura 5. Emulador
No hace falta que dispongas de una consola física para poder aprender a programar tus juegos ya
que Mackecode Arcade dispone de un emulador donde podrás probar tu juego.
La paleta de bloques:
Figura 6. Paleta de bloques
4
Dispones de una amplia paleta de bloques categorizados para poder controlar todos los aspectos
de tu juego.
El área de código
Figura 7. Área de código
Esta es la zona donde podrás arrastrar los bloques que formarán parte de tu juego, al igual que
cualquier otro entorno de programación por bloques o basado tipo Scratch.
Editor de Sprites (imágenes)
Figura 8. Editor de Sprites
5
Dispone de un editor de sprites (imágenes) donde podrás mostrar tu lado más creativo dibujando
por pixeles tus personajes, o incluso las texturas de las paredes o suelos.
Y si todavía no te claves al crear tus propios gráficos no te preocupes ya que desde la parte superior
del editor podrás acceder a una galería de imágenes prediseñadas que son más que suficientes para
que aprendas a programar juegos muy variados.
Descarga tu juego
Si dispones de una consola compatible con Mackecode Arcade, podrás descargarte el juego en la
misma y llevar tu juego donde quieras, tan sólo tienes que hacer clic en el botón “download” y
seleccionar el procesador de tu consola.
Ejemplo de juego para comprender el funcionamiento de Mackecode
Arcade
Juego 1 - El Laberinto
Vamos a realizar un juego muy sencillo que consiste en conducir un coche por un laberinto donde
deberán recoger la mayor cantidad de princesas antes de que se agote el tiempo.
Mover el coche por la pantalla
Crear el objeto
El personaje de nuestro juego es un coche, que queremos que aparezca en cuanto se inicia el juego,
para ello arrastramos los siguientes bloques:
Figura 9. Creando el objeto
Con el primer bloque y creamos un objeto ”sprite” ese era nuestro personaje principal del juego, y
que queremos que se mueva por la pantalla usando los botones de dirección con el segundo bloque
“move mySprite with buttons”.
6
Haciendo clic en el recuadro gris de “Sprite” editor de imágenes, pero en nuestro caso
seleccionaremos una imagen prediseñada desde la galería “Gallery”.
Figura 10. Seleccionando la imagen prediseñada
El resultado el siguiente y ya podemos probar nuestro juego desde el simulador.
7
Figura 11. Probando en el simulador
Tipo de sprite
Los objetos (Sprites) se pueden agrupar en categorías y podemos asignar de qué tipo son “of kind”.
Figura 12. Asignando categoría
Esto es muy útil cuando queremos aplicar una misma acción a todos los tipos objeto de un mismo
tipo.
Mejorar la apariencia
En el paso anterior seleccionamos el nombre de la variable prefijada ”mySprite” y para que el código
resulte más legible la renombramos a “coche” como se muestra a continuación:
Figura 13. Renombrando la variable mySprite
8
También cambiaremos el color de fondo.
Figura 14. Cambiando color de fondo
Y podremos probar nuevamente nuestro juego con el emulador.
Hacer que el coche mire hacia donde se mueva
Ya sabemos hacer que se mueva el coche por la pantalla, pero necesitamos que nuestro coche mire
hacia donde se dirija, así que tenemos que hacer que la imagen del coche cambia dependiendo del
botón de dirección pulsado.
Para ello disponemos de varios bloques con los que podemos controlar cuando hemos pulsado cada
botón.
Figura 15. Insertando bloque para cuando se pulse cada botón
9
Ahora sólo tenemos que modificar la imagen del coche para cada dirección pulsada, que la
seleccionaremos desde la galería.
Figura 16. Insertando imagen
10
Nos tiene que quedar un resultado como el siguiente probando el juego veremos que el coche hace
un movimiento más natural.
Figura 17. Resultado de los botones
Editor de mapas
Necesitamos crear las paredes del laberinto ya que es la temática de nuestro juego y queremos
recorrerlo con nuestro coche.
Primero indicamos donde habrá obstáculos dibujando un mapa de paredes, con el bloque “set
tilemap”.
11
Figura 18. Asignando set tilemap to
Accedemos al editor de mapas.
Dibujar el escenario
Podemos crear nuestras propias “baldosas” desde “My Tiles” o podremos seleccionar baldosas y
paredes prediseñadas seleccionando una temática desde “Gallery” y con esas baldosas dibujamos
el laberinto.
Si probamos el juego nos damos cuenta de que el coche puede pasar por encima de cada pared.
Esto es debido a que el editor de mapas nos permite dibujar tanto paredes como otros detalles del
escenario (por ejemplo, flores u otros elementos decorativos). Así que tendremos que marcar que
objetos que los dibujamos eran paredes.
Marcar las paredes
Para ello seleccionamos la herramienta de “pared” y dibujamos con ella por encima las paredes que
conforman nuestro laberinto.
Ejecuta el juego y comprobarás que el coche ya colisiona con cada pared.
Figura 19. Coche colisiona con la pared
12
Tamaño del escenario
Podemos modificar el tamaño de nuestro escenario por ejemplo si queremos que nuestro laberinto
sea muy grande y por lo tanto más complejo de resolver.
Para ello basta que modifiquemos las dimensiones del mismo desde la esquina inferior izquierda del
editor de mapas.
Figura 20. Dimensiones del mapa
Posicionando del coche dentro del laberinto
Centrar Cámara
Con la última mejora de nuestro juego vimos que el laberinto es más grande que la pantalla de
nuestra consola y el coche se pierde por tanto necesitamos seguirlo.
Arrastramos la instrucción “camera follow Sprite” que se encuentra en la categoría “scene” y le
indicamos que debes seguir nuestro coche.
Figura 21. Indicando que debe seguir a nuestro coche
Posición aleatoria
Puede ser muy aburrido que nuestro juego siempre empieza con el coche en el mismo punto de
partida dentro del laberinto, además es probable que hayamos detectado que nuestro coche
empieza encima de una pared, si la hemos dibujado por el centro de la pantalla que es por donde
se crea nuestro Sprite.
Posicionamos el coche de forma aleatoria encima de cualquier baldosa de nuestro mapa que no sea
una pared.
13
Figura 22. Posicionando auto aleatoriamente
Tenemos que seleccionar la primera imagen ya que nuestro mapa sólo hemos dibujado paredes.
puedes probar a crear zonas en el mapa con una imagen prediseñada (por ejemplo, hierba) verás
cómo el coche se posiciona de forma aleatoria sólo en esas zonas.
Recoger princesas
El objetivo de nuestro juego es recoger al mayor número de princesas con nuestro coche, así que
necesitamos lo siguiente:
1. Añadir una princesa de forma aleatoria al laberinto.
2. Programar la acción de recogerla, y añadir otra princesa en otra posición aleatoria (este
punto se repetirá hasta que se agote el tiempo del juego).
Creamos un nuevo “sprite” al que le llamamos “princesa”, la seleccionamos de la galería y
marcaremos que es de tipo “Food” (comida).
Figura 23. Creando un nuevo Sprite
Ahora tenemos que detectar cuando nuestro coche se posiciona encima de una princesa para hacer
el efecto de que la hemos recogido y volver a emplazar otra princesa en otro lugar.
Figura 24. Detectando que ha recogido a la princesa
14
Este bloque se encuentra en la categoría “Sprites” y básicamente funciona para detectar cuando un
objeto de un tipo concreto se ha superpuesto sobre otro tipo de objeto.
Una vez detectada esta colisión, emplazamos a la princesa en otra coordenada aleatoria de nuestro
laberinto.
Marcador de punto y cuenta atrás
Es interesante ofrecer un poco de dificultad en cada juego a la vez que introducimos un componente
de reto o marca personal en modo de puntuación máxima conseguida.
Puntuación
Vamos a crear un contador de puntos que empezará en “0” cuando empieza el juego y lo
incrementaremos cada vez que recojamos a una princesa.
Nuestro código queda de la siguiente forma:
Figura 25. Asignando bloque de score
Si probamos el juego podremos ver en la esquina superior izquierda el marcador de puntos y cómo
va incrementando cada vez que recogemos una princesa.
15
Figura 26. Score va incrementando
Temporizador y Game Over
El temporizador hay que iniciarlo con el tiempo que queramos una vez que se termine el tiempo
podemos finalizar el juego con el típico “Game Over”.
Figura 27. Temporizador y Game Over
Elaboración del juego como proyecto final
Juego: Laberinto-tiburón
¿De qué trata?
Deberás comer 15 pescados antes de un minuto para ganar, no pasar donde hay cactus ya que
perderás una vida, cuentas con 3 vidas!!! Cuidado al tocar la lava pierdes!!!
• Iniciamos colocando un on start, este bloque es el inicio, es un evento especial que se
ejecuta cuando se inicia el programa, antes que cualquier otro evento. Utilice este evento
para inicializar su programa.
Figura 28. Bloque on start
16
• Dentro del bloque on start añadimos set background color to que permkte colocar un color
de fondo en el juego, después un show long text que permite poner un mensaje inicial
donde escribiremos las instrucciones del juego, por último, un set life to que permite
colocar un número de vidas con las que iniciara el juego.
Figura 29.Editando on start
• Dentro del bloque on start añadimos un set y crearemos una variable tiburón to sprite,
creamos nuestro personaje o usar un diseño de la plataforma of King y seleccionamos Player
lo que significa que es nuestro jugador principal. Después el bloque move seleccionas la
variable tiburón with buttons vx vy que nos permite definir a qué velocidad se desplazara
nuestro jugador. El bloque place on top of random nos permite colocar a nuestro personaje
en una posición aleatoria en el mapa.
Figura 30. Editando on start
• Crearemos otro personaje como en el paso anterior, pero en este caso será la comida y
crearemos otra variable que se llamará pescadito, haremos nuestro personaje o escoger un
diseño, en este caso no se selecciona como Player, sino que creamos otra variable para
identificar a cada pescadito y también lo posicionamos en el mapa aleatoriamente,
necesitaremos 8 pescaditos, puedes ocupar los mismos diseños, pero diferentes variables para
cada pescadito. Quedaría de la siguiente manera:
17
Figura 31. Editando on start
Figura 32. Editando on start
• Ahora crearemos otros personajes que serán enemigos y necesitaremos 4, pero en este caso
con set position x y nos permite colocarlos en una posición especifica en el mapa.
Figura 33. Editando on start
18
• Con set tilemap to nos permite crear el diseño de nuestro mapa, que haremos como un
laberinto. Las rocas las seleccionamos para que sean paredes y no pueda pasar el personaje
principal sobre encima de las rocas.
Figura 34. Editando on start, bloque del mapa
• Diseño del mapa en set tilemap to.
Figura 35. Editando on start, diseño del mapa.
• Con el bloque camera follow Sprite indicamos que la cámara vaya siempre enfocando a
donde se mueva el personaje principal. El bloque start countdown (s) permite mostrar en
pantalla una cuenta regresiva de tiempo en segundos, loop sound es un bucle de sonido
que permite estar repitiendo un sonido todo el tiempo. Set volume permite ajustar el
volumen del sonido y set score to permite colocar el score en el numero que deseamos en
este caso -8 porque al iniciar el juego los 8 pescaditos aparecen en la misma posición del
tiburón y como al comer un pescadito se suma 1, para que el score en total al iniciar el juego
quedaría en 0.
Figura 36. Editando parte final de on start
19
• Con on up button pressed indicamos que, al presionar la tecla de la flecha hacia arriba el
tiburón, cambiaria su diseño para arriba al avanzar, y así con las demás flechas para simular
que se mueve al dar vuelta, en cada set tiburon image to se cambia el diseño del tiburón
respecto hacia donde moverá.
Figura 37. Diseño del tiburón dependiendo su movimiento al oprimir una tecla
• Con on sprite of King Player overlaps otherSprite of kind pes se indica que cuando el
jugador principal (tiburón) toque a otro personaje en este caso a un pescado, el pescado se
posicionara en otro lado del mapa aleatoriamente con place pescadito on top of random
pero se simula como que si el tiburón se lo hubiera comido, change score by 1 incrementara
en 1 al total del score, play sound reproduce el sonido. Todo esto se activa cuando se come
a un pescadito. Esto se repite para los 8 pescadito
Figura 38. Simular que se come al pescado y aumentar score
20
• Con on game update every 5000 ms permite crear un bucle que cada 5 segundos aparecerá
un enemigo en el mapa, dentro del bloque del bucle creamos otro personaje que será un
cactus y seleccionamos que sea de tipo enemigo y le indicamos que se posicione en el mapa
aleatoriamente.
Figura 39. Ciclo de enemigos
• On Sprite of kind Player overlaps otherSprite of kind Enemy nos permite que cuando el
jugar principal (tiburón) toque a un enemigo (cactus) se ejecute lo que esta dentro del
bloque, primero con destroy ohterSprite indicamos que se destruya el enemigo (cactus),
with fire effect for 100 ms indicamos que tenga una animación tras su destrucción, change
life by -1 le restara una vida al total de vidas, play sound small crash es un sonido que sonara
al tocar al cactus.
Figura 40. Destrucción del cactus al tocar con tiburón
• On sprite of kind Player overlaps otherSprite of kind lava1 nos permite que cuando el jugar
principal (tiburón) toque a la lava se ejecute lo que está dentro del bloque, game over LOSE
indicamos que perdió y with dissolve le agregamos una animación, en total son 4 lavas en
el mapa y hacemos lo mimo para las 4 lavas.
Figura 41. Obstáculo lava
21
• Forever es un bucle que siempre estará en ejecución lo que este dentro del bloque, if score
>= 15 then es una condición cuando se haya comido 15 pescados tendrá un score de 15 y
entrara en esta condición y al entrar al bloque del if se ejecutara, stop all sounds permite
parar todos los sonidos, stop countdown permite parar el tiempo, game over WIN
indicamos al jugador que ha ganado con una animación que es with confetti.
Figura 42. Bloque de puntaje para ganar
• On countdown end permite ejecutar lo que hay dentro del bloque cuando se acabe el
tiempo regresivo, stop all sounds permite parar todos los sonidos, game over LOSE
indicamos que perdió y with dissolve le agregamos una animación.
Figura 43. Bloque del tiempo regresivo
CONCLUSION
Makecode Arcade es una fantástica herramienta para aprender programación que permite
programar sin tener mucho conocimiento sobre el tema, no sólo programar en la web, sino también
crear videojuegos independientes que pueden ser jugados en miniconsolas, lo que aumenta la
diversión y las ganas de programar por parte de los jóvenes. Aprendiendo también la programación
por bloques lo que facilita la programación y hace que sea más entendible la programación.
Bibliografía
Microsoft. (23 de octubre de 2021). MakeCode. Obtenido de https://www.microsoft.com/es-
es/makecode/about
Robotopia. (2019). academy.bot. Obtenido de http://academy.bot/programando-juegos-con-
arcade-makecode#caer-y-saltar
22
