Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Maze 01 - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 5 de noviembre de 2023 por Juan Carlos A.

25 visualizaciones

Más información Transcripción

Descargar la transcripción

Hello, in this video tutorial I'm going to show you how to start making a simple game 00:00:00
in which your character has to go through a maze 00:00:07
so for that I'm going to need a maze 00:00:10
so you just google for some picture and download it 00:00:12
I've already done so 00:00:16
and I'm going to upload it from my computer 00:00:18
this is the picture 00:00:21
now, you see this is too small so I'm going to make it this bigger 00:00:23
I select it 00:00:33
no, I'm sorry 00:00:36
this is... let's undone it 00:00:38
so I have to click here 00:00:42
and then I can select it 00:00:45
and I'm going to drag and drop from the handles there 00:00:50
something like that 00:00:56
maybe even bigger 00:01:01
wow, something like that 00:01:04
so then I'm going to remove this arrow here 00:01:06
because this is the eraser 00:01:10
instead of eraser I'm going to paint it white 00:01:14
I'm going to pick this color from here 00:01:20
and I'm just painting it white 00:01:24
that's it 00:01:35
I will leave the other arrow so I can use this color 00:01:38
as a way to know that I've already finished the maze 00:01:46
so first of all I will place my character at the beginning 00:01:51
and I will make it smaller 00:01:56
so it can fit inside the maze 00:01:59
so at the beginning 00:02:02
I will set size to 00:02:05
let's say, try 50% 00:02:09
it's not enough 00:02:16
so let's say 30% 00:02:19
no, it's still too big 00:02:22
let's say 20% 00:02:25
now it fits 00:02:29
and now I will place it here at the beginning 00:02:31
so I will use a goat 00:02:34
now, as I want to control the motion 00:02:38
we will be doing it with simple blocks 00:02:41
like when right arrow press 00:02:45
point right and move 00:02:49
same thing duplicating for the left motion 00:02:54
like left arrow pointing left 00:03:00
then duplicate again 00:03:04
up arrow pointing upwards 00:03:07
and then down arrow 00:03:12
point downwards 00:03:17
now, as always if we don't want our cat to be upside down when moving left 00:03:23
we have to select the rotation style left right here 00:03:30
that's it 00:03:40
and now we can move it up down left and right 00:03:42
now, see what's happening here 00:03:48
well 00:03:52
we want to go through the maze without touching the walls 00:03:54
if touching the walls 00:03:59
we would like it to get back to the starting point 00:04:01
so we are going to use an if 00:04:05
touching color under sensing 00:04:09
and we select the color with the color picker 00:04:15
like this 00:04:19
so if touching the black wall 00:04:26
then go to the beginning 00:04:30
this is the starting position 00:04:33
so we put it like that 00:04:36
that has to be inside forever 00:04:41
so we keep asking if it is touching or not 00:04:44
we can place it under the green block 00:04:48
and now 00:04:53
if we move 00:04:55
let's say we try 00:04:58
to go through that one 00:05:02
it's quite difficult, why? 00:05:09
because our motion is in 10 steps 00:05:11
so every time we hit an arrow 00:05:15
the cat will change position by 10 00:05:18
and so if it is close to a wall 00:05:23
it will jump 10 pixels 00:05:26
and then will go into the wall 00:05:29
so we want more precision 00:05:32
and for that we have to make the motion shorter 00:05:35
so we will change this into 2 steps at a time 00:05:40
so we can make a shorter motion every time 00:05:45
and be more accurate 00:05:51
so that way it's going slower 00:05:54
but we can actually fit inside 00:05:58
now, the animation is missing 00:06:03
so we are going to program the animation 00:06:07
and as we don't want it to interfere with the motion 00:06:11
we will be doing it at a separate thread 00:06:14
there we use the next custom 00:06:19
and wait 00:06:24
not one second, that's too much 00:06:30
let's say 0.1 00:06:32
and then that will be inside our frame 00:06:34
right 00:06:38
now it's animated on time 00:06:41
and we can move it through that maze 00:06:46
if touching the wall it goes back 00:06:51
now if we don't want it to move its legs 00:06:54
when it's not actually changing position 00:06:57
we can make this happen only if 00:07:02
we are hitting a key 00:07:08
so if under ascension key press any 00:07:14
then animate 00:07:21
if we are not hitting any key 00:07:25
it will remain with its legs unmoving 00:07:27
so now we remove it and animate 00:07:32
and that way we can make a simple maze 00:07:35
now, how about knowing when we have already finished 00:07:39
well, we can pick this color 00:07:44
and use another if 00:07:48
I can just duplicate this 00:07:52
remove the go to 00:07:57
pick the right color 00:08:00
and say what's going to happen if we got to the end 00:08:07
well, let's put a you win screen there 00:08:13
so I'm going to create a new backdrop 00:08:19
I've already got a white one from here 00:08:26
so now I can use this 00:08:31
let's fill it with some color 00:08:34
for I to be able to pick some color 00:08:43
I change the bitmap 00:08:46
now let's pick some color 00:08:48
this one 00:08:51
and then fill it 00:08:53
I will fill it with this color 00:08:56
and now I'm going to 00:09:00
type some letters into it with a different color 00:09:05
one, whatever 00:09:11
and then I type here 00:09:14
you win 00:09:17
and then let's make this bigger 00:09:26
so we can select it like this 00:09:32
and then place it somewhere like that 00:09:35
you win 00:09:44
now, this is backdrop number one 00:09:46
I'm going to put it as number two 00:09:52
so, at the beginning 00:09:59
I want the backdrop to be number one 00:10:03
so let's switch backdrop to backdrop one 00:10:07
there it is 00:10:16
you win 00:10:25
this backdrop is backdrop number one 00:10:27
this is number two 00:10:31
so, here 00:10:33
so, at the beginning 00:10:37
ok, backdrop number one is not the same as the name backdrop one 00:10:45
so, to make things clear 00:10:50
we just rename this 00:10:53
because 00:10:56
this is not the name 00:10:59
we cannot rename it 00:11:06
I'm going to rename it here 00:11:12
and say win 00:11:14
that's it 00:11:17
right 00:11:19
so, now 00:11:21
this is square maze 00:11:23
good 00:11:25
so, at the beginning 00:11:27
switch backdrop to square maze 00:11:30
and if touching color 00:11:33
switch backdrop to win 00:11:35
and then I would like to make the character disappear 00:11:38
so, I will use a hide 00:11:42
and, as always, if I use a hide 00:11:47
I have to use a show for it to restart at the beginning 00:11:51
so, now, when we start 00:11:56
that goes like that 00:12:00
and, once you get to the end 00:12:02
if it touching walls, go back 00:12:08
I'm going to cheat 00:12:11
I cannot cheat the drawing here 00:12:13
I'm going to cheat in this other window 00:12:16
like that 00:12:21
so, I check that if I get to the end 00:12:23
now 00:12:28
ok, it's not 00:12:32
notice on that car 00:12:35
probably that's because I haven't clicked the green flag 00:12:38
now the green flag is clicked 00:12:41
now I'm here 00:12:43
and then I go there 00:12:45
and you win 00:12:47
good 00:12:49
that's the beginning of a maze game 00:12:54
now we can improve it by including some other elements 00:12:57
that will go in the next video tutorial 00:13:02
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
en
Autor/es:
Juan Carlos Alonso de Mena
Subido por:
Juan Carlos A.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
25
Fecha:
5 de noviembre de 2023 - 12:07
Visibilidad:
Público
Centro:
IES ALPEDRETE
Duración:
13′ 05″
Relación de aspecto:
16:10 El estándar usado por los portátiles de 15,4" y algunos otros, es ancho como el 16:9.
Resolución:
1920x1200 píxeles
Tamaño:
39.14 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid