CREA GRATIS UN JUEGO ARCADE - ATRAPA LA MANZANA -

Crea gratis tu propio juego Arcade

En nuestro apartado de Academia C3D, os presentamos una práctica sencilla, divertida y gratuita para realizar con Microsoft Arcade. Esta actividad está diseñada para que cualquier persona, sin conocimientos previos de programación, pueda seguirla y disfrutarla desde casa.

Nuestro objetivo es crear un entorno accesible y amigable que elimine el miedo a la programación y anime a todos a profundizar en este apasionante mundo. En esta práctica, vamos a desarrollar un juego arcade en el que comeremos manzanas. Es una manera estupenda de empezar a entender los conceptos básicos y divertirse al mismo tiempo.

Además, si eres maestro o maestra, puedes implementar esta actividad en clase. La programación puede ser una herramienta transversal muy útil para explicar diversos contenidos. Por ejemplo, esta actividad puede servir para explorar la importancia de una alimentación saludable. La ONU destaca la enseñanza de hábitos alimenticios saludables en las escuelas como una medida esencial para el desarrollo y bienestar de los niños.

Esperamos que os guste y lo disfrutéis tanto como nosotros al crearla. ¡Vamos a empezar y a descubrir juntos el emocionante universo de la programación!

Y llévatelo donde quieras con la Arcade de Elecfreaks

La arcade de Elecfreaks si que es un regalo en toda regla. Ya sea para otra persona o para ti. Desafíate con tus propios juegos y desafía a tus amigos en cualquier lugar. Pasa de nivel con tu consola de bolsillo.

Juega y llévate a donde quieras los juegos que programas. Diversión sin límites.

Comprar aquí

ATRAPA LA MANZANA – en video

Te ofrecemos la actividad grabada y mas abajo expolic

ATRAPA LA MANZANA – v1. Sencilla

Lo primero que vamos a hacer es meternos en la web de MakeCode Arcade y crearemos un nuevo proyecto.

Si no conoces la web, no te preocupes, es muy intuitiva.

A la izquierda, puedes previsualizar tu juego. En el centro, tienes el menú de bloques para configurar el juego. A la derecha, está el cuadro de configuración donde trabajarás.

Comencemos, si nunca has hecho nada parecido, no te preocupes, iremos creando nuestro juego de manera sencilla y clara.

1. Crear el Personaje del Jugador

¿Qué es un Sprite?

Un sprite es una imagen o gráfico que se utiliza en videojuegos para representar personajes, objetos y otros elementos visuales. Los sprites pueden moverse, cambiar de apariencia y reaccionar a diferentes eventos en el juego.

Primero, vamos a darle un nombre a nuestro proyecto. Luego, fijaremos una imagen de fondo. Yo voy a elegir un azul claro para que se vea bien.

Para ello nos vamos a ir a Escena y pincharemos la opción de fijar color de fondo a. Veremos un cuadradito gris. Pinchamos sobre él y podemos pintar la escena que queramos en el editor. Podemos irnos a Galería y pinchar una de las escias ya creadas. O podemos irnos a Mis activos y seleccionar una imagen ya creada y guardada anteriormente.

Después, seleccionaremos nuestro personaje. Para ello seleccionaremos en

Pulsaremos en el triángulo invertido para asignarle a la variable que vamos a crear un nombre. Le damos a Nueva variable, en mi caso lo llamaré nuevo jugador. Ahora, al igual que hicimos con el fondo, pulsamos sobre el cuadrado gris y diseñamos nuestro jugador o personaje o seleccionamos a uno de la galería.

En la misma pestaña de objetos seleccionamos el bloque de fijar mySprite permanecer en pantalla con la opciópn activo. Debes de sustituir mySpriter por el nombre que hayas puesto a tu jugardor, en mi caso, jugador.

También es muy importante que podamos controlar al jugador con los botones, así que configuraremos el mando para mover nuestro personaje. Para ello nos iremos a mando y seleccionaremos mover mySprite con botones +. Cambiamos mySprite por el nombre de nuestro personaje, en mi caso jugador.

2. Crear y configurar la manzana

A continuación, vamos a hacer que suceda algo interesante. Para eso nos valdremos en la pestaña juegos de «al actualizar el juego cada 500 ms » Este bloque se utiliza para ejecutar un conjunto de instrucciones repetidamente. Yo lo editare pinchando sobre la cantidad y pondré cada 1000 ms o lo que es lo mismo, le diré que haga algo una vez cada segundo.

¿Para qué sirve este bloque?

Este bloque es útil para realizar acciones que quieres que ocurran de manera constante y regular en tu juego. Por ejemplo, en mi caso quiero que aparezcan nuevas manzanas para el jugador cada segundo.

Necesitamos crear las manzanas. Para ello vamos a objetos y seleccionamos fijar mySprite a objeto del tipo Player. Hacemos clic sobre mySprite y escogemos Nueva variable, le ponemos un nombre, en nuestro caso apple y pulsamos aceptar. Creamos o seleccionamos la imagen en galeria y cambiamos para que en vez de tipo Player sea del tipo Food. Crearemos un nuevo objeto llamado «manzana» y lo elegiremos de la galería. Configuraremos su tipo como «comida».

¿Por qué cambiar el tipo de Sprite en MakeCode Arcade?

En MakeCode Arcade, los sprites pueden tener diferentes tipos, como «Player», «Food», «Enemy», entre otros. Cambiar el tipo de sprite es importante porque define cómo interactuarán esos sprites con otros elementos en el juego. Los sprites de tipo «Player» son generalmente los personajes controlados por nuestro jugador. En este juego, este jugador será el personaje que se mueve y recoge las manzanas.
Los sprites de tipo «Food» suelen ser objetos que el jugador puede recoger.
Vamos a observar como cada sprite tiene comportamientos predefinidos que ayudan a gestionar las interacciones entre ellos. Esto es muy importante para crear eventos o acciones específicas en programación. Por ejemplo, vamos a hacer ahora que Cuando un sprite de tipo «Player» toca un sprite de tipo «Food», se puede programar para que el sprite de tipo «Food» desaparezca y el jugador gane puntos.

Si vemos el simulador, vemos una manzana en mitad de la pantalla asi que en el centro de la pantalla, así que ajustaremos su posición para que caigan desde la parte superior y de forma aleatoria. Para ello, primero pinchamos en objetos la opción de fijar mysprite velocidad a vx 50 vy 50. Cambiamos vx a 0, esto hace que eliminemos el movimiento horizontal. Ahora, la manzana solo se moverá verticalmente desde la parte superior de la pantalla hacia abajo, sin moverse de lado a lado. Recuerda cambiar la opción mySprite por la de apple o la variante que hayas creado.

Volvemos a objetos y seleccionamos el bloque fijar mySprite posición a x 0 y 0. Luego, vamos al bloque de matemáticas y escogemos la opción escoger al azar de 0 a 10. El número 10, lo sustituimos por anchura de pantalla que encontramos en escena . Esto ajusta la posición horizontal de la manzana para que aparezca en diferentes lugares (aleatorio) a lo largo del borde superior dte superior de la pantalla.

3. Crear puntuación

Ahora tenemos otro desafío: cuando el jugador toque una manzana, no pasa nada. Vamos a solucionar esto haciendo que la manzana se destruya cuando el jugador la toque. Para esto, usaremos un evento que detecte la superposición del jugador con la comida, y destruiremos la manzana cuando esto ocurra. También haremos que la puntuación del jugador aumente en 1 cada vez que recoja una manzana.

Nos vamos al bloque de objetos y seleccionamos en overlaps » Cuando el sprite del tipo «Player» se superpone a othersprite del tipo player«. Aquí, cambiamos «Player» por «Food». Lo que tenemos que entender es que los Overlaps son eventos que se activa cuando dos sprites se superponen en la pantalla. OtherSprite se referirá al sprite con el que el principal está interactuando. En nuestro caso lo que haremos con este bloque es programar lo que sucede cuando el sprite del jugador toca una manzana. Dentro de este bloque vamos a arrastrar lo que queremos que pase que es: hacer que la manzana desaparezca y sumar puntos al jugador.

Hacer que la manzana desaparezca: en Objetos seleccionamos «destroy mySprier +». Cambiamos mySpriter por otherSpriter. Esto lo hacemos seleccionando otherSpriter y arrastrándolo hasta myspriter.
Sumar puntos al jugador: Nos vamos a Información y arrastramos el bloque de «cambiar puntaje por«. Podemos personalizar los puntos.

ATRAPA LA MANZANA – v2. Creamos enemigos

Pero el juego sería aburrido sin un enemigo. Así que vamos a crear uno. Duplicaremos el evento de la manzana y crearemos una nueva variable llamada «tarta», de tipo enemigo. Ajustaremos el evento para que cuando el jugador toque una tarta, pierda puntos.

La forma de hacerlo es muy sencilla y rápida. Le daremos a duplicar el bloque «al actualizar el juego» donde creamos la manzana. Aquí crearemos una nueva variable llamada tarta, cambiaremos la imagen del objeto por una tarta y le diremos al juego que va a ser del tipo enemigo. Todo lo demas puede seguir igual si queremos.

Luego, duplicamos el bloque «cuando el sprite del tipo Player se superpone a otherSprite del tipo Player». En este bloque, cambiamos el segundo «Player» por «Enemy». Esto hará que, cuando el jugador toque la tarta (el enemigo), pierda puntos. Puedes ajustar la cantidad de puntos que se pierden según prefieras.

ATRAPA LA MANZANA – v3. Creamos una cuenta atrás

Ahora que tenemos esto, el juego todavía puede parecer fácil si tenemos todo el tiempo del mundo para jugar. Así que estableceremos un límite de tiempo. Iremos a la sección de información , seleccionamos «start countdown 10 (s) «y configuraremos una cuenta atrás, en nuestro caso de 30 segundos.

Finalmente, debemos definir qué sucede cuando se acaba el tiempo. Utilizaremos lógica para ello: si la puntuación es mayor o igual a 20, el jugador gana; de lo contrario, el jugador pierde. Configuraremos el juego para mostrar «Game Over: Ganaste» o «Game Over: Perdiste» según corresponda.

Para hacerlo, seleccionamos el bloque «Cuando termine la cuenta regresiva». Luego, vamos a la categoría de «Lógica» y elegimos el bloque «si verdadero entonces si no -«. En lugar de «verdadero», utilizamos una comparación, que se encuentra en el mismo grupo de bloques lógicos . Cambiamos el primer 0 por «puntuación» (que se encuentra en la categoría de «Información»), el símbolo «=» por «>» (mayoro igual), y el segundo 0 por 20 (la puntuación que queremos alcanzar para ganar).

Después, arrastramos el bloque «game over ganaste» de la categoría de «Juegos» y lo colocamos debajo del «si». Debajo del «sino», arrastramos el bloque «game over ganaste», también de la categoría de «Juegos» pero lo cambiamos por Perdiste.

¿Qué es la lógica?

La lógica en programación es como el cerebro del juego: decide qué hacer en función de ciertas condiciones. En términos simples, el bloque de lógica permite que el juego tome decisiones basadas en si algo es verdadero o falso. Por ejemplo, si queremos que el juego determine si el jugador ha ganado o perdido al finalizar el tiempo, usamos este bloque para comparar la puntuación del jugador con un valor objetivo, como 20 puntos. Si la puntuación es igual o mayor a 20, el juego muestra un mensaje de victoria; si no, muestra un mensaje de derrota. Este bloque ayuda a que el juego responda de manera inteligente a lo que sucede, creando una experiencia interactiva y coherente.

Si necesitas el código, aquí te lo mostramos.

controller.right.onEvent(ControllerButtonEvent.Pressed, function () {

jugador.setImage(img`

. . . . . . . c c c c c . . . .

. . . . . . c 5 5 5 5 5 c c . .

. . . . . c 5 5 f 1 5 5 5 5 c .

. . . . c 5 5 5 f f 5 5 5 5 5 c

. . . c 5 5 5 5 5 5 5 5 5 5 5 c

. . . c 5 5 5 5 5 5 b 1 b b c c

. . c d 5 5 5 5 5 5 5 3 3 3 5 c

. . c d d d 5 5 5 5 5 3 3 3 5 c

. . c d d d 5 5 5 b 5 5 5 5 c .

. . c d d d d b 5 5 c b b c . .

c c c d d d d b b 5 5 c b b c .

c d d d d d d d d c c c c c c .

. c d d d b 5 5 b c c c . . . .

. . c c c b b 5 5 d c . . . . .

. . . . . c c c c c c c . . . .

. . . . . . . c b b b c . . . .

})

controller.left.onEvent(ControllerButtonEvent.Pressed, function () {

jugador.setImage(img`

. . . . c c c c c . . . . . . .

. . c c 5 5 5 5 5 c . . . . . .

. c 5 5 5 5 1 f 5 5 c . . . . .

c 5 5 5 5 5 f f 5 5 5 c . . . .

c 5 5 5 5 5 5 5 5 5 5 5 c . . .

c c b b 1 b 5 5 5 5 5 5 c . . .

c 5 3 3 3 5 5 5 5 5 5 5 d c . .

c 5 3 3 3 5 5 5 5 5 d d d c . .

. c 5 5 5 5 b 5 5 5 d d d c . .

. . c b b c 5 5 b d d d d c . .

. c b b c 5 5 b b d d d d c c c

. c c c c c c d d d d d d d d c

. . . . c c c b 5 5 b d d d c .

. . . . . c d 5 5 b b c c c . .

. . . . c c c c c c c . . . . .

. . . . c b b b c . . . . . . .

})

info.onCountdownEnd(function () {

if (info.score() >= 20) {

game.gameOver(true)

} else {

game.gameOver(false)

}

})

sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {

sprites.destroy(otherSprite)

info.changeScoreBy(1)

})

sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {

sprites.destroy(otherSprite)

info.changeScoreBy(-2)

})

let tarta: Sprite = null

let apple: Sprite = null

let jugador: Sprite = null

jugador = sprites.create(img`

. . . . c c c c c . . . . . . .

. . c c 5 5 5 5 5 c . . . . . .

. c 5 5 5 5 1 f 5 5 c . . . . .

c 5 5 5 5 5 f f 5 5 5 c . . . .

c 5 5 5 5 5 5 5 5 5 5 5 c . . .

c c b b 1 b 5 5 5 5 5 5 c . . .

c 5 3 3 3 5 5 5 5 5 5 5 d c . .

c 5 3 3 3 5 5 5 5 5 d d d c . .

. c 5 5 5 5 b 5 5 5 d d d c . .

. . c b b c 5 5 b d d d d c . .

. c b b c 5 5 b b d d d d c c c

. c c c c c c d d d d d d d d c

. . . . c c c b 5 5 b d d d c .

. . . . . c d 5 5 b b c c c . .

. . . . c c c c c c c . . . . .

. . . . c b b b c . . . . . . .

`, SpriteKind.Player)

jugador.setStayInScreen(true)

controller.moveSprite(jugador)

scene.setBackgroundImage(img`

9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999

info.startCountdown(30)

game.onUpdateInterval(1000, function () {

apple = sprites.create(img`

. . . . . . . e c 7 . . . . . .

. . . . e e e c 7 7 e e . . . .

. . c e e e e c 7 e 2 2 e e . .

. c e e e e e c 6 e e 2 2 2 e .

. c e e e 2 e c c 2 4 5 4 2 e .

c e e e 2 2 2 2 2 2 4 5 5 2 2 e

c e e 2 2 2 2 2 2 2 2 4 4 2 2 e

c e e 2 2 2 2 2 2 2 2 2 2 2 2 e

c e e 2 2 2 2 2 2 2 2 2 2 4 2 e

. e e e 2 2 2 2 2 2 2 2 2 4 e .

. 2 e e 2 2 2 2 2 2 2 2 4 2 e .

. . 2 e e 2 2 2 2 2 4 4 2 e . .

. . . 2 2 e e 4 4 4 2 e e . . .

. . . . . 2 2 e e e e . . . . .

`, SpriteKind.Food)

apple.setVelocity(0, 50)

apple.setPosition(randint(0, scene.screenWidth()), 0)

})

game.onUpdateInterval(1000, function () {

tarta = sprites.create(img`

. . . . . . . . . . b b b . . .

. . . . . . . . b e e 3 3 b . .

. . . . . . b b e 3 2 e 3 a . .

. . . . b b 3 3 e 2 2 e 3 3 a .

. . b b 3 3 3 3 3 e e 3 3 3 a .

b b 3 3 3 3 3 3 3 3 3 3 3 3 3 a

b 3 3 3 d d d d 3 3 3 3 3 d d a

b b b b b b b 3 d d d d d d 3 a

b d 5 5 5 5 d b b b a a a a a a

b 3 d d 5 5 5 5 5 5 5 d d d d a

b 3 3 3 3 3 3 d 5 5 5 d d d d a

b 3 d 5 5 5 3 3 3 3 3 3 b b b a

b b b 3 d 5 5 5 5 5 5 5 d d b a

. . . b b b 3 d 5 5 5 5 d d 3 a

. . . . . . b b b b 3 d d d b a

. . . . . . . . . . b b b a a .

`, SpriteKind.Enemy)

tarta.setVelocity(0, 50)

tarta.setPosition(randint(0, scene.screenWidth()), 0)

})

CREA GRATIS UN JUEGO ARCADE – ATRAPA LA MANZANA

Crea gratis tu propio juego Arcade

Y llévatelo donde quieras con la Arcade de Elecfreaks

ATRAPA LA MANZANA – en video

ATRAPA LA MANZANA – v1. Sencilla

1. Crear el Personaje del Jugador

¿Qué es un Sprite?

2. Crear y configurar la manzana

3. Crear puntuación

ATRAPA LA MANZANA – v2. Creamos enemigos

ATRAPA LA MANZANA – v3. Creamos una cuenta atrás

Descubre todo lo que tenemos para ti en nuestra tienda