# S1 (U1-L1) - MAKECode Arcade - Laberinto

## RETO MAKECode Arcade <a href="#reto" id="reto"></a>

{% hint style="info" %}
**Hoy** vamos a realizar un juego muy sencillo que consiste en conducir un coche por un laberinto donde deberá recoger en la mayor cantidad de personajes antes de que se agote el tiempo. Nosotros hemos elegido un **mono**

Abre el siguiente enlace <https://arcade.makecode.com/#editor>
{% endhint %}

{% hint style="success" %}
**RETOS ADICIONALES ANTES DE EMPEZAR:**

* *¿PUEDES CAMBIAR LOS OBJETOS POR OBJETOS NAVIDEÑOS?*
* *¿PUEDES CAMBIAR EL PUNTAJE Y/O EL TIEMPO?*
  {% endhint %}

{% embed url="<http://steam.bot/programando-juegos-con-arcade-makecode#juego-1-el-laberinto>" %}
Desarrollo rescatado de la web Steam.bot
{% endembed %}

<figure><img src="/files/gnSFdYQe8l8kTk1RJPUQ" alt=""><figcaption></figcaption></figure>

## 1.- Mover el coche por la pantalla

Crear el objeto

El personaje de nuestro juego es **un coche**, que queremos que aparezca en cuanto se inicie el juego, para ello arrastramos los siguientes bloques:

<figure><img src="/files/MMAeM3SPlu0T9NXUWUkN" alt=""><figcaption></figcaption></figure>

Con el primer bloque creamos un objeto **sprite** que será nuestro personaje principal del juego, y que queremos que se mueva por la pantalla usando los botones de dirección con el segundo bloque **“mover mySprite con botones”**

Haciendo click en el recuadro gris de “sprite” accedemos al editor de imágenes pero en nuestro caso seleccionaremos una imagen prediseñada desde la galería **"Gallery"**

<figure><img src="/files/p69MCVABGCDNkCpF2pMr" alt=""><figcaption><p>El resultado será el siguiente y ya podemos probar nuestro juego desde el simulador</p></figcaption></figure>

El resultado será el siguiente y ya podemos probar nuestro juego desde el simulador

<figure><img src="/files/IJcc2fv8UFKnVEuEtLrM" alt=""><figcaption></figcaption></figure>

## 2.- Tipo de sprite

Los objetos (**Sprites**) se pueden agrupar en categorías y podemos asignar de qué tipo son “**of kind**”

<figure><img src="/files/9j43fnGmLEtFoxGWKhyw" alt=""><figcaption></figcaption></figure>

Ésto es muy útil cuando queremos aplicar una misma acción a todos los tipos objetos de un mismo tipo

## 3.- Mejorar la apariencia

En el paso anterior seleccionamos el nombre de la variable prefijada *“mySprite” y p*ara que el código resulte más legible la renombramos a *“coche”* como se muestra a continuación.

<figure><img src="/files/tPvC5wYI11HzvrROFWaA" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/W1Npg2NXfBubEzcpaNZm" alt=""><figcaption></figcaption></figure>

También cambiaremos el color al fondo

<figure><img src="/files/177NmYPQlFM3tGe7HGNz" alt=""><figcaption></figcaption></figure>

Y podremos probar nuevamente nuestro juego con el emulador

## 4.- 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 cambie dependiendo del botón de dirección pulsado.

Para ello disponemos de varios bloques con los que podemos controlar cuándo hemos pulsado cada botón.

<figure><img src="/files/5Z5bOWwliz0QoiRS5qgX" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %} <mark style="color:orange;">**Observa que hemos modificado la imagen del coche para cada dirección pulsada.**</mark>

<mark style="color:orange;">**Las seleccionaremos desde la galería.**</mark>

<img src="/files/ApprXz0C4LOzXgMDi0Ah" alt="" data-size="original">
{% endhint %}

{% hint style="success" %}
Nos tiene que quedar un resutado como el siguiente y probando el juego veremos que el coche hace un movimiento más natural

<img src="/files/gnSFdYQe8l8kTk1RJPUQ" alt="" data-size="original">
{% endhint %}

## 5.- 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 dónde habrá obstáculos dibujando un mapa de paredes, con el bloque ***"set tilemap" o "fijar mapa de teselas"***

<figure><img src="/files/YJxcnj6PQkJxq6EQVZOv" alt=""><figcaption></figcaption></figure>

Accedemos al editor de mapas

## 6.- 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 nuestro laberinto**&#x20;

{% hint style="danger" %}
¡¡¡ **OJO**, que si probamos el juego nos damos cuenta de que el coche puede pasar por encima de cada pared!!!
{% endhint %}

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 )&#x20;

Así que tendremos que **marcar qué objetos de los dibujados serán paredes**

Marcar las paredes

<figure><img src="/files/lFDx835DomtYE0tICPjE" alt=""><figcaption></figcaption></figure>

Para ello seleccionamos la herramienta de **“Pared”** que es la que está marcada y dibujamos con ella por encima las paredes que conforman nuestro laberinto.

<figure><img src="/files/MiulXnzxVeoSRT7bPJ0z" alt=""><figcaption><p>Si ejecutas el juego comprobarás que el coche ya colisiona con cada pared</p></figcaption></figure>

## 7.- 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.](#user-content-fn-1)[^1]

<figure><img src="/files/nUKBFJAzob1rC446gmWM" alt=""><figcaption></figcaption></figure>

## 8.- Posicionando el coche dentro del laberinto

#### Centrar cámara <a href="#centrar-camara" id="centrar-camara"></a>

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 sigue al objeto”*** que se encuentra en la categoría ***“scene”*** y le indicamos que debe seguir a nuestro **coche.**

<figure><img src="/files/s5YM3Mm10mar4CKWtFlP" alt=""><figcaption></figcaption></figure>

**Posición aletoria**

Puede ser muy aburrido que nuestro juego siempre empiece con el coche en el mismo punto de partida dentro del laberinto, a demá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 donde se crea nuestro sprite

<figure><img src="/files/0LgW9BOniu9eMhjsH6gO" alt=""><figcaption></figcaption></figure>

Posicionamos el coche de forma aleatoria encima de cualquier baldosa de nuestro mapa que no sea una pared

Tenemos que seleccionar la primera imagen ya que en nuestro mapa sólo hemos dibujado paredes.\
Puedes probar a crear zonas en el mapa con una imagen prediseñada ( por ejemplo hierba ) y verás como el coche se posiciona de forma aleatoria sólo en esas zonas

## 9.- Recoger princesas (o monos)

El objetivo de nuestro juego es recoger el mayor número de princesas con nuestro coche, así que necesitamos lo siguiente:

1. Añadir una princesa de forma aleatoria al laberinto. En nuestro caso hemos añadido un mono.
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 de juego)

Creamos un nuevo *“sprite”* al que le llamamos *“mono”,* lo seleccionamos de la galería y marcaremos que es de tipo *“Food”* ( comida )

#### &#x20;<a href="#h.vehnjhomtxoh" id="h.vehnjhomtxoh"></a>

<figure><img src="/files/bLrwr2RBjdtaeBvr1t1B" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/h5IVaMqll35t6T4341hb" alt=""><figcaption></figcaption></figure>

Este bloque se encuentra en la categoría ***“Sprites u Objetos”*** 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.

## 10.- Marcador de puntos 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 <a href="#puntuacion" id="puntuacion"></a>

Vamos a crear un contador de puntos que empezará en “0” cuando empiece el juego y lo incrementaremos cada vez que recojamos a una princesa.

Nuestro código queda de la siguiente forma

<figure><img src="/files/sEQW7Ss3CEG77bIpj11Y" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CaCiklJkpi8WqkSen6MZ" alt=""><figcaption><p>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. </p></figcaption></figure>

## 11.- Temporizador y Game Over

El temporizador hay que inicializarlo con el tiempo que queramos y una vez se termine el tiempo podemos finalizar el juego con el típico “Game Over”

<figure><img src="/files/ZwdXvmXD2afmmv9KPVAT" alt=""><figcaption></figcaption></figure>

**RETOS ADICIONALES**&#x20;

{% hint style="warning" %}
**1.- PRUEBA A MODIFICAR LOS OBJETOS POR OTROS (MONO QUE COME PLÁTANOS)**

**2.- CAMBIA EL TIEMPO DE JUEGO Y EL VALOR DE LOS PUNTOS**

**3.- PRUEBA A INCORPORAR OTRO ELEMENTO QUE PERJUDIQUE EL JUEGO**

**(UNA PARED QUE SE CIERRA, UN OBJETO QUE APARECE Y NOS QUITA PUNTOS....)**
{% endhint %}

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://educarobot.gitbook.io/+8-roboninja/makecode-arcade/s1-u1-l1-makecode-arcade-laberinto.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.