Muy buenas tardes, ¿qué tal? Bienvenido, bienvenida, espero que estés súper, súper bien y con muchas ganas de programar
porque hoy vamos a desarrollar un videojuego, un videojuego, un clásico, las cosas como son, más complicado que un 3 en raya es, ya te lo digo yo
y es, es, bueno, a mí me encantaba este juego, me encantaba este juego, el Arkanoid
Desde luego este juego ha pasado por muchas reediciones, remakes y un montón de cositas, pero seguro, seguro que la has jugado en algún momento
a mí es uno de mis juegos favoritos de los clásicos, ¿vale? del Space Invaders, Pac-Man, de estos clásicos, yo diría que es mi favorito
creo que es el que era más divertido, porque con el tema este de que al final luego tenías power-ups, incluso, vidas, estaba muy, muy chulo
se llamaba Arkanoid, si no me recuerdo mal, era de Taito, era de una máquina recreativa, que es esta, y era vertical, que eso es bastante interesante
era una máquina recreativa vertical, no era horizontal, luego obviamente cuando fue saliendo en consolas, ¿ves? que es vertical
pues luego ya le cambiaron el formato, pero era vertical, era vertical, juegazo, ¿eh?
mucha gente lo conocía, también puede ser, Arkanoid es el primer nombre oficial, pero se conocía en algunos sitios como rebotes, ladrillos
yo que sé, había diferentes nombres, pero estaba muy chulo, lo vamos a hacer con Canvas, efectivamente, lo vamos a hacer con Canvas
lo vamos a hacer con Canvas, lo vamos a hacer sin dependencias, con JavaScript desde cero
las colisiones, los eventos, los pintados, cómo se va a pintar el juego, todo, todo lo vamos a hacer
y esto es parte de los 100 proyectos de JavaScript que vamos a hacer a lo largo de este año
y me imagino que del siguiente, porque 100 proyectos son muchos, ¿vale? así que iremos haciendo
pues 100 proyectos de JavaScript, ya hicimos la semana pasada el Tinder Swipe
que esto lo hicimos puramente con JavaScript vanilla, ¿vale? sin ningún tipo de dependencia
y explicamos cómo hacer esto, que detectase cuando lo estás arrastrando, arrastrando y todo esto
y hoy vamos a hacer el juego del Arkanoid, ¿por qué? porque me parece muy interesante
y muchas veces están estos proyectos de 100 proyectos de JavaScript y luego entras
y el proyecto son 5 líneas de JavaScript, de cambiar de pestaña, que a ver, es interesante
pero no sé, yo creo que estaría bien pues ir haciendo juegos, haciendo cosas, partes de aplicaciones
pero que sean un poquito más complejas y creo que puede ser mucho más divertido
así que eso es lo que vamos a hacer hoy
en España escuché que se llamó, hostia, que viene la bola
sería buenísimo, pero no
pero sí que es verdad que había clones y había diferentes nombres, ¿no?
porque, mira, Blaster Ball, por ejemplo, Retroid
pero esto es porque había gente que sacaban clones, se capeaban en el juego
y obviamente no le podían llamar exactamente igual que el original
si no sería muy loco
había uno de los clones más famosos, el Breakout, por ejemplo, ¿no? de Atari
este sería uno de los más famosos, pero que, que, que, bueno, Breakout
este sería otro, pero seguro que lo habéis conocido con algún nombre, seguro, ¿eh?
un juego que yo sueño con hacer, desarrollar algún día, es el Punk
el Punk, este juego, yo creo que es mi favorito
jamás hecho en el mundo de los videojuegos y las recreativas
el Punk, este juego era una verdadera salvajada
este juego yo sueño con que un día lo desarrollemos con JavaScript
pero obviamente este juego es más complicado
no va a ser, no va a ser una sentada en un momento que lo vamos a poder hacer
esto es un juegazo y tiene cosas muy interesantes de físicas y tal
a lo mejor algún día, a lo mejor algún día lo hacemos
a lo mejor algún día lo hacemos, de verdad
porque le tengo, le tengo muchas ganas
y era divertidísimo ese juego, era divertidísimo
ah, ¿el Breakout era el original?
hostia, yo siempre he pensado que era el Arkanoid, el original
¿el Breakout era el original?
a ver, a ver, ahora me has dejado loco, ¿eh?
Arkanoid, videojuego, arcade desarrollado por Teto
ah, está, tiene razón, tiene razón
el original Breakout, hostia
pues mira, me has dejado muerto
yo siempre he pensado que era el de Teto, que era original
pero no, obviamente es 10 años después
claro, puede ser que yo lo viese en la recreativa primero
Arkanoid y así se me quedó en la vida, en la cabeza y tal
pero es verdad que Atari, joder, Atari es más viejo que andar pa'lante
así que es normal que fuese el original
pues mira, gracias por comentármelo
vamos a crear aquí la carpeta
02 Arkanoid Game, ¿vale?
yo le voy a llamar Arkanoid porque es lo que le tengo ahí cariño
creamos el index HTML
ya sabéis, yo lo voy a intentar hacer todo siempre en el mismo archivo
para que sea más simple de seguir y todo esto
voy a abrir Live Preview para que tengamos aquí esto
vamos aquí esto, ¿vale?
y vamos a empezar con el HTML
primero yo le voy a poner el title
Arkanoid en JavaScript
para que tengamos el título en la pestaña siempre
y vamos a empezar pues con unos estilos muy básicos
un background, color, así, gris
luego ya lo mejoraremos y vamos a utilizar la etiqueta canvas
¿vale? la etiqueta canvas
muy interesante esta etiqueta HTML
porque justamente un canvas lo que nos da es un lienzo
para poder dibujar encima
vamos a ver cómo podemos dibujar y las diferentes formas que tenemos
aunque nosotros ya os digo que vamos a utilizar la forma 2D
pero no es la única, ¿vale?
que mucha gente se cree que en el canvas solo puedes dibujar 2D
no es así
y este canvas, esta etiqueta HTML
pues la vamos a estilar un poquito
vamos a darle aquí 4 píxeles, solid y de color blanco
el border bottom lo vamos a dejar transparente
para que sea por donde se va la bola
¿ok?
y luego el background por ahora lo voy a dejar de color negro
para que tengamos una diferencia y así
pues si le pongo los colores lo veamos bien
y esto lo vamos a centrar
con el margin auto, cero auto y el display block
esto lo podemos centrar de diferentes formas
pero por ahora voy a hacer esta
luego ya veremos si lo tengo que centrar mejor o peor
esto sería el HTML, yo creo que de HTML
bueno, luego más adelante vamos a necesitar alguna etiqueta más
pero nada muy grave
con esto yo creo que ya podemos empezar a trabajar, ¿vale?
así que esto sería lo mínimo que necesitáis para vuestro juego del Arkanoid
¿qué podemos empezar a hacer aquí?
pues ya el JavaScript
o sea, ya JavaScript
casi todo JavaScript
tendremos que poner dos etiquetas HTML más adelante
pero nada grave
lo primero es recuperar la etiqueta
así que canvas, document, query selector
¿vale? con el canvas
recuperamos la etiqueta canvas
esto es lo primero
y ahora aquí lo que vamos a decirle
es cómo queremos dibujar en este canvas
en este elemento
tenemos diferentes contextos
el más típico
lo vamos a poner aquí
const, el ctx
el contexto más típico es el 2D
pero no es el único
¿vale? aquí podemos utilizar por ejemplo
webgl
también podemos utilizar bitmap
no me acuerdo
se llama renderer
vale, renderer
hay diferentes
¿vale? hay también webgl2
que es otra versión
hay diferentes contextos
en las que podemos dibujar en este canvas
obviamente podéis hacer también 3D
pero nosotros vamos a dibujar en un plano 2D
o sea, vamos a dibujar encima
para que lo entendamos
vamos a dibujar encima
por lo tanto
tenemos que recuperar el contexto en 2D
pero ya veis que hay diferentes valores
esto no es que siempre ponéis 2D
y solo funciona en 2D
si queréis hacer cosa 3D
pues que sepáis que podéis utilizar otros valores
¿vale?
así que ya tendríamos el contexto
en el que vamos a trabajar en este canvas
y así que le tenemos que decir
pues el tamaño del canvas
vamos a poner el canvas width
800
no, que me parece un poco exagerado
yo he estado mirando más o menos
cuál es la resolución que tenía el juego
¿vale?
entonces voy a hacer la misma resolución
pero bueno
en la forma horizontal
para no hacer la vertical
que sería algo así
algo así
igual es un poco exagerado
así que voy a hacer un poquito menos
para que...
algo así
vamos a dejarlo así
y luego ya veremos cómo queda
pero algo así
para que más o menos quede bien
y además de esto
pues ya lo que vamos a hacer
es una cosa
esto es muy interesante
porque lo que vais a aprender ahora
os sirve
para cualquier juego
para cualquier juego
que queráis hacer en vuestra vida
que queráis hacer
el...
el buscaminas
bueno el buscaminas
igual no tanto
pero para...
para el 95%
el Pac-Man
para el que...
es que cualquier juego
el Pan
el Pac-Man
cualquier juego
que queráis hacer
para el Call of Duty
pues también
para el Mario Kart
también es que todos estos juegos
funcionan exactamente igual
de hecho
os voy a decir una cosa
que jamás
habéis pensado
y que os va a volver locos
esta...
esto que vamos a ver ahora
es en realidad
el modelo mental de React
el modelo mental de React
es que hace que la UI
de tus páginas web
funcione como un videojuego
no solo de React
sino pues también
de todos los frengos
¿vale?
pero esa es un poco la idea
es el hecho de tener
un loop infinito
en el que no para
de estar pues mirando
como van cambiando
las variables
sus valores
para repintar
cada vez que algo cambia
¿no?
bueno pues entonces
necesitamos una función
que le llamamos
vamos a llamar draw
¿vale?
la función draw
ves que yo voy a poner aquí
un console.log hola
y aquí
antiguamente
lo que se hacía
era un setTimeout
de 60 milisegundos
para ir cambiando
que no sé qué
no sé...
bueno esto no tiene
ningún tipo de
ningún tipo de sentido
lo que podéis hacer ahora
es utilizar el window.requestAnimationFrame
y aquí
vamos a hacer
recursividad
porque esto
esto
se va a llamar a sí mismo
¿y qué es lo que va a pasar con esto?
pues esto lo que va a pasar
es que esta función
se va a estar llamando
constantemente
cada vez
que
este requestAnimationFrame
nos va a proporcionar
una...
vale
os voy a explicar primero
el requestAnimationFrame
el requestAnimationFrame
es un método
que te permite
como programar
una función
para que se ejecute
justo antes
de que se repinte
la ventana
y está sincronizado
con el refresco
de tu pantalla
y esto es ideal
para las animaciones
y obviamente
también para los videojuegos
¿y qué es lo que hace?
pues que
tú le pasas una función
y esta función
se va a ejecutar
justo antes
de cada repintado
por el refresco
de la pantalla
por lo tanto
esto normalmente
no siempre
depende del monitor
se ejecutará
60 veces
por cada segundo
60 frames por second
pues esto se ejecutará
60 veces cada segundo
ahí dependerá
del refresco
que tengas en la pantalla
y de diferentes cosas
pero esta sería un poco
la idea
entonces
cada vez que el draw
se ejecuta
vuelve a hacer esto
requestAnimationFrame
se ejecutará
en el próximo frame
y así continuamente
y ya tendríamos aquí
un loop infinito
y para inicializar este loop
lo que tendríamos que hacer
es llamar al draw
y ahora ya
se está ejecutando
constantemente
para que lo veamos más claro
si vamos aquí
a la página web
vale
y nos vamos aquí
a inspeccionar
y miramos la consola
pues deberíamos ver
veis aquí
que no para de ejecutarse esto
hola hola hola
¿vale?
es que ya está
en este loop infinito
así que esto
es la base
de cualquier videojuego
básicamente
que queráis crear
que queréis hacer el Pac-Man
que queréis hacer el Snake
que queréis hacer
lo que sea ¿vale?
pues esto
es la base
porque lo único
que cambiará realmente
es lo que hacéis aquí
aquí harás
tus dibujos
y checks
de colisiones
y ya está
ya tendrás tu juego
ya
ya tendrás tu juego ¿vale?
obviamente
pues hay motores
de videojuegos
como Godot
eso no traba la página
no tiene por qué trabar la página
porque
al final lo que hace es
cuando esto termina
de ejecutarse
este draw
lo que está haciendo
es como
programar
que en el siguiente frame
se vuelva a ejecutar
¿vale?
no es que
en realidad no es exactamente
recursividad propiamente dicha
sino lo que hace
es que cuando termina
de ejecutarse esta función
entonces programa
que en el siguiente frame
se vuelva a ejecutar
y es que es normal
es que así es como
tiene que funcionar
un videojuego
que cada vez que se mueve
se repinte la pantalla
para que refleje los cambios
si no
no funcionaría exactamente
¿no?
así lo tendríamos
fácil si sabes
y entiendes
si no pues andamos
en la luna
bueno pero ya está
pero ahora ya lo deberíais entender
entra en bucle infinito
no es un bucle infinito
exactamente ¿eh?
o sea sí
pero que no penséis
que se queda penchado
porque no sé qué ¿no?
porque al final
no está apilándolo ahí
sino que está programando
que cuando termina
programa el siguiente
cuando termina
programa el siguiente
¿vale?
esa es la diferencia
que es clave
¿ok?
pero entonces no guarda
el estado anterior
sí porque aquí es donde
tenemos la gracia
si por ejemplo
yo tengo aquí
un counter ¿vale?
tenemos aquí un counter
que es cero
y yo aquí
cada vez que se dibujo
hago aquí counter más más
y hago un console lock
del counter
gracias a que tenemos
la posibilidad
de acceder a variables
que están en un contexto
superior en javascript
¿vale?
pues lo que vamos a poder hacer
es aquí tener
todas las variables
de nuestro juego
¿vale?
voy a poner aquí
variables
variables
de nuestro juego
y dentro de la función
poder acceder ahí
y ver cuál es
el estado
que tiene esas variables
para poder pintar
¿vale?
por ejemplo ¿veis?
el counter aquí
se va actualizando
y constantemente
está incrementándose
o sea que lo vamos viendo
luego esto
lo vais a ver más claro
cuando empecemos a dibujar
la pelotita
y todo esto
pero bueno
básicamente era para que tuvieses
un primer chequeo
del draw
de cómo funciona esto
que básicamente es
continuamente estar dibujando
en cada frame
¿vale?
y lo bueno del request animation frame
mejor que el set timeout
o set interval
o cualquier cosa
que queráis hacer
es que es una forma
más eficiente y efectiva
de realizar
este tipo de
o animaciones
o de dibujar cosas
porque
los navegadores
optimizan
cuando se repinta
la ventana
y lo programan
en el momento
concreto
y lo mejor es que además
reduce el consumo de energía
si yo por ejemplo
este arcanoid
lo dejo en segundo plano
y me voy de la pestaña
entonces esto ya no se va a ejecutar
60 veces por segundo
según el frame
los refrescos de pantalla
sino lo que va a hacer
es dejarlo como en segundo plano
y lo va a estar ejecutando
mucho menos
entonces lo hace
mucho más interesante
es como el upgrade
en unity
claro
los motores como unity
y todo esto
muchas veces
ya lo tienen
mejor planteado
pero en este caso
pues lo tienes que hacer manualmente
porque estamos utilizando
javascript
para que entendamos bien esto
cuál va a ser la idea
lo más interesante
cuando queráis
crear un videojuego
es crear las primeras funciones
primero vais a necesitar
todas las de dibujar
hemos dicho aquí
aquí harás tus dibujos
y checks de colisiones
pues primero
hay que dibujar
dibujar
los elementos
y los elementos
que quieres dibujar
pues mira primero
tenemos la pelota
tenemos lo que sería
el padel
el padel
es como la barrita
para la pelota
para que se choqueó la pelota
y luego tendríamos
los bricks
¿vale?
muy bien
esto es todo lo que queremos dibujar
también podríamos dibujar
draw score
eso no lo voy a hacer
en este
porque no creo que nos dé tiempo
pero bueno
puede ser la puntuación
puede ser la vida del jugador
puede ser un montón de cosas
y luego aquí
tendríamos
bueno
más que mover la bola
yo diría
las colisiones
y movimientos
porque tampoco vamos a tener
muchas cosas más
¿qué tenemos que hacer?
primero dibujamos
y luego chequeamos
colisiones y movimientos
por ejemplo
si ha habido
collision detection
¿vale?
si ha habido una colisión
la queremos detectar
y modificar el estado
el movimiento
de la bola también
y el movimiento
de la pala
esto es todo
lo que vamos a hacer
o sea
con esto vamos a tener
nuestro juego
dibujando
y chequeando
colisiones y movimientos
vamos a tener nuestro juego
así que
estas funciones
yo las voy a poner por aquí
vacías
al menos
para que no nos pete
obviamente
¿vale?
voy a poner esto por aquí
function
draw
paddle
y luego
las vamos a ir
implementando
para que veamos
cada una
cómo iría funcionando
¿vale?
va el movement
vale
entonces
ya obviamente
esto a mí me gustaría
ver cositas
así que vamos a dibujar
la bola
al menos
que es lo más interesante
del principio
para dibujar la bola
vamos a cambiar
este draw ball
y vamos a empezar a implementar
aquí cosas
mira muy bien
eso es una buena idea
pero antes de eso
claro
antes de poder dibujar
necesitamos tener
como variables
vamos a poner aquí
variables
de la pelota
las variables de la pelota
cosas que tenemos que pensar
de la pelota
con la que vamos a
queremos pintar
y vamos a estar jugando
nuestro juego
primero
el tamaño
así que vamos a poner
ball radius
¿cuál va a ser el radio
de la pelota?
vamos a ponerle un 4
luego veremos si esto es demasiado
básicamente esto
lo que queremos es
cómo de grande va a ser
porque vamos a tener que multiplicar
como va a ser un círculo
tenemos que decir
cuál es el radio
que tiene
y esto lo multiplicaremos
si es por 1
por 2
por 3
por 4
para hacerlo más grande
luego tenemos que saber
su posición
así que vamos a poner
una posición
x
y ojo
porque este valor
le pongo let
porque lo vamos a estar modificando
se va a estar moviendo la pelota
vamos a poner por ahora
que sea
el canvas width
vamos a ponerlo por la mitad
más o menos para que salga la pelota
ahí en medio
y luego la y
de la pelota
pues vamos a poner
bueno
menos 30
me parece bien
menos 30
pues que saldría más o menos por aquí
esta sería la posición
pero también necesitamos
la velocidad de la pelota
la velocidad de la pelota
la vamos a estar indicando
con la dirección
a la que va
si es positivo
pues irá hacia un lado
si es negativo
irá hacia otro
necesitamos tanto el eje vertical
como el horizontal
por ejemplo
para el eje horizontal
vamos a poner
dirección x
para la dirección x
que vaya en 2
vale
que avance 2
va a tener esta velocidad
cuanto más alto sea esto
más rápido irá la pelota
si le pones 1
pues irá más lento
si pones 2
irá más rápido
si le pones 200
pues claro
irá todavía más rápido
esto luego lo podremos ver
para ver cómo lo ajustamos
y luego tendríamos
la dirección también
de la y
vale
que sería el vertical
si es menos 2
pues irá para arriba
si es negativo
irá para arriba
si es positivo
irá para abajo
esto es porque justamente
como trabajamos
con las coordenadas
del contexto de canvas
es así
vale
lo tendríamos aquí
que lo más alto
sería justamente abajo
y el 0
lo tendríamos aquí
entonces
si ya en el canvas.head
que esto sería 400
400
menos 3
esto empezaría
en 370
claro
esto va a hacer
que se dibuje
bastante abajo
de nuestro canvas
vale
se dibujaría
más o menos
por esta zona
y
que en cada frame
vaya haciendo
un menos 2
hará que vaya
hacia arriba
como también
estamos cambiando
la x
esto lo que va a hacer
es que haga la diagonal
esto es muy interesante
porque en el arcanoid
en el juego este
veréis que la pelota
siempre va en diagonal
nunca va recta
vale
no se puede hacer
que vaya en una línea recta
sino que como podéis ver
veis
aquí va como en diagonal
siempre el juego es
en diagonal
hacia un lado
hacia el otro
así que esto luego
se podría cambiar
y se podría ajustar
para que depende
de donde le des
en la palita
pues la diagonal
sea más abierta
más cerrada y tal
pero esto sería
un poco la idea
y ya que tenemos
las variables de la pelota
que serían un poco esto
voy a poner aquí
posición de la pelota
pues ya podemos dibujar
ahora
para dibujar
en nuestro contexto
bueno
hasta aquí bien
con las variables
no se puede poner
las variables en un objeto
se podrían poner
todas las variables
en un objeto
pero la voy a intentar
aplanar
porque luego ya vamos
a tener que trabajar
con objetos
y al final
lo simplificamos
bastante
no me parece
que lo amerite
y además
así no estamos mutando
el objeto constantemente
y tal
y así solo utilizamos
lo que requerimos
bueno
mira acá
vamos a ver aquí
lo de dibujar
primero
lo primero que vamos
a querer hacer
aunque luego vamos a ver
que se puede dibujar
más rápido
lo primero que vamos
a querer para dibujar
en el canvas
es como empezar
un camino
o sea vamos a indicarle
que vamos a empezar
a dibujar
entonces vamos a decirle
oye contexto
el contexto que hemos
recuperado aquí
¿vale?
del canvas
hemos recuperado
el contexto de dibujo
quiero que comiences
un camino
¿vale?
un camino
un trazado
como que
si tuviésemos un boli
y justo hemos recuperado
el boli
y vamos a empezar
a dibujar
¿vale?
entonces le estamos
indicando que vamos
a empezar a dibujar
ahora que ya sabemos
esto
lo que queremos
es decir
vale ahora que ya sé
que vamos a empezar
a dibujar
¿qué es lo que quiero dibujar?
lo que quiero empezar
a dibujar
es justamente
un círculo
en este caso
sería un arco
pregunta
¿por qué no usas P5?
porque principiante
en programar
porque lo hemos comentado
antes
estamos haciendo proyectos
100%
solo con javascript
y sin dependencias
si la primera pregunta
ya es
¿por qué no utilizas
una dependencia?
pues no tiene mucho sentido
porque justamente
la idea es hacer
las independencias
la idea de hacer
las independencias
es simplemente
porque así se entiende
mejor javascript
y se entienden
las bases
luego si quieres utilizar
una dependencia
pues mejor
P5, Godot
lo que os dé la gana
pero la idea
es hacerlos
sin dependencias
¿vale?
vale entonces
vamos a dibujar
un arco
primero del arco
necesitamos las coordenadas
donde queremos
que se dibuje
nuestra pelota
esto ya lo tenemos
que es el x y el y
que hemos visto
que hemos hecho aquí
¿no?
la posición de la pelota
ahora para el arco
lo que necesitamos también
es decirle
cuál va a ser
el radio de nuestra pelota
así que
le decimos
el radio de la pelota
que hemos puesto arriba
y ahora
lo que tenemos que decirle
son los ángulos
de inicio
y de final
de nuestro círculo
en este caso
como el arco
al final
es un círculo perfecto
vamos a decir
que empieza en el ángulo 0
y luego
vamos a multiplicar
pi por 2
y esto lo que hace es
pues
un círculo completo
si hiciéramos solo pi
pues no sería completo
sería hasta la mitad
y por 2
pues es un círculo completo
de 0
al final
hasta el final
de nuestro círculo
estamos haciendo
una redonda
básicamente
le decimos
cómo lo queremos
rellenar
con qué color
aquí le podemos poner
el color que queramos
yo lo voy a poner
de color blanco
y finalmente
le decimos
que rellene esto
y veis
aquí tenemos nuestra pelota
se ve un poco rara
por el tema
del zoom
pero bueno
ahí lo tenéis
ahí tenemos la pelotita
luego le podríamos cambiar
por ejemplo
el radio
lo podemos hacer
un poquito más pequeño
todavía más pequeño
es el 2
el 3
lo podemos hacer
muy grande
cuanto más grande
pues se verá
se verá un poco más redonda
pero lo podríamos hacer
muy grande
lo vamos a hacer
yo que sé
con el 3
para que tengamos la pelotita
y aquí
por temas de rendimiento
y para no
para no mezclar
cuando quieras dibujar
en otro sitio
una cosa que puedes hacer
es entonces cerrar
directamente
el trazado
¿vale?
esto al final
lo que puede ayudar
es optimizar el rendimiento
y también evitar
que se pueda mezclar
trazados
y cosas así
así sabe que tú querías
trazar aquí una cosa
y ya lo has hecho
y aquí tenemos nuestra pelotita
bueno
la pelotita obviamente
así es muy aburrida
pero lo bueno
es que ya tenemos
todo lo necesario
para que se mueva
si nos vamos aquí
al movimiento de la pelota
lo único que tenemos que hacer
es decirle
oye
la X
se tiene que ir moviendo
constantemente
con esta distancia
¿no?
y entonces lo que va a hacer
es que en cada frame
va a estar dibujando
hacia la derecha
pero fíjate que no está dibujando bien
y ahora te explicaré por bien
ahora te explicaré por qué
y también hacia arriba
y entonces ahora
ya tendríamos
el movimiento de la pelota
no tenemos colisiones
no tenemos nada
además se está dibujando
un moco
ahí muy raro
esto tiene sentido
y te voy a explicar por qué
lo que está pasando aquí
en cada frame
estamos llamando
a la función
de dibujar
¿y qué está pasando aquí?
lo que está pasando aquí
es que está dibujando
está dibujando
la pelota
y en cada frame
está dibujando
la pelota
en una posición
distinta
claro
el problema de dibujar
en una posición distinta
en cada frame
es que se están acumulando
los dibujos anteriores
¿sabes?
o sea
no se está
básicamente
no borra
el dibujo anterior
sino que ha pintado
en el frame anterior
en el siguiente
en el siguiente
en el siguiente
pero esto tiene una solución
muy fácil
¿vale?
y la solución
¿por dónde pasa?
pues que limpiemos la pantalla
que en cada frame
antes de dibujarlo
todo otra vez
limpiemos la pantalla
para eso
vamos a utilizar
un clean canvas
¿vale?
y vamos a crear
otra función aquí
que sea
function clean canvas
y lo que vamos a hacer
es algo tan sencillo
como decir
mira
en el contexto
vamos a
limpiar
todo lo que habíamos dibujado
del 0, 0
de la posición
0 de la X
y de la Y
hasta
la posición
del width
del canvas
y la altura
o sea
todo el canvas
quiero que me limpies
todos los dibujos
que había
en todo el canvas
y ahora sí
podemos ver
que la pelota
pues se va
se está limpiando
en cada frame
está llamando
al clean canvas
y luego está dibujando
otra vez la pelota
el problema
que la pelota se va
y desaparece
y ya está
porque no tenemos
colisiones
pero no os preocupéis
porque ahora hacemos
colisiones
estamos básicamente
lo que estamos haciendo
es redibujar
constantemente
¿no?
en cada frame
pues redibujamos
¿no?
dice
¿no se puede mover
el elemento que has dibujado
en lugar de limpiar
y redibujar?
¿y cómo te crees
que se mueve el elemento
que has dibujado?
o sea
¿cómo crees
que se movería
el elemento
que has dibujado?
o sea
tú imagínate
Piblo
piensa en un papel
piensa en un papel
que has dibujado algo
y entonces dirías
¿y no puedes mover
el elemento
que has dibujado?
sí
claro
dibujándolo otra vez
y borrando
el que habías hecho
básicamente
esa es la idea
obviamente
cuando hablamos
de videojuegos
mucho más complejos
de Call of Duty
y todo
tienen otro tipo
de optimizaciones
para reutilizar
y no repintar
todos y cada uno
de los elementos
seguramente que veis en pantalla
pero esto en realidad
es la base
de un montón
de videojuegos
el hecho de
repintarlo otra vez
de
oye
lo de antes
ya no tiene sentido
lo voy a repintar
en su nuevo
porque es así como
realmente se rigen
los videojuegos
porque hay muchos inputs
muchos eventos
muchas cosas que ocurren
y va a estar repintando
constantemente
¿sabes?
entonces no tiene sentido
que pensemos
que vamos a poder reutilizar
porque los cálculos
para reutilizar
podrían ser mucho
más complicados
que simplemente
dibujarlo en una nueva posición
y ya está
¿vale?
entonces ahí
ahí lo tendríamos
¿vale?
ya teníamos la pelota
que no estaría mal
pero lo que nos necesitaríamos
también
pues sería
que colisione
en algún sitio
aquí lo que os decía
mira cuando tengamos la colisión
os mostraré la animación
y todo esto
¿vale?
vamos a hacer esto
si podríamos limpiar
solo la pelota
también ¿vale?
pero es que
luego vamos a estar
con el padel
vamos a estar
con los ladrillos
vamos a estar
con un montón de cosas
y es normal
que tengamos que
repintar todo
y como digo
es muy difícil
decir
no quiero solo
limpiar esta parte
y esta parte
y tal
se puede hacer
pero en juegos así
es que es tan complicado
que es muy difícil
es muy difícil
que lo podáis hacer
y tal ¿eh?
o sea no tiene sentido
en juegos muy complicados
sí que lo que hacen es
oye solo esta parte
en la que voy a repintar
pero es que
en juegos así
no vale la pena
eso es un cálculo
que puede ser
bastante complejo
por sí mismo
pues vamos a continuar
porque ahora viene
una cosa muy chula
que es bastante sencilla
o sea no es tan
no es complicada
pero sí que es laboriosa
que es obviamente
la colisión
el movimiento de la pelota
claro yo el movimiento
de la pelota
que he hecho hasta ahora
es este
que básicamente
bueno pues
la X va hacia la dirección
la Y va hacia la dirección
y ya está
pero lo que vamos a crear
por ejemplo
es rebotar las pelotas
en los laterales
yo os recomiendo siempre
que cuando hablemos
de colisiones y tal
siempre vayáis
paso a paso
no penséis
en todas las colisiones
de golpes
yo creo que lo mejor
por ejemplo aquí
es decir
bueno voy a intentar
primero arreglar
las colisiones laterales
entonces pues aquí
ya pondríamos un IF
vamos a poner aquí un IF
vale
y en este IF
sí
primero voy a pensar
en lo que tiene que pasar
no en la condición
¿qué es lo que tiene que pasar?
básicamente
si la pelota
por lo que sea
se choca en un lateral
tiene que cambiar
su dirección
en la X
por lo tanto
la DX
va a pasar a ser
menos DX
si era negativo
pasará positivo
si es positivo
pasará negativo
pero lo que tenemos que hacer
es cambiar la posición
vale
o sea
la orientación
hacia dónde va
si va de izquierda
pues va a la derecha
a la derecha
a la izquierda
esa sería un poco la idea
ahora vamos a ver aquí
cuáles serían las condiciones
las condiciones
básicamente serían
vale
la X
en la posición de la pelota
tenemos que sumar también
la dirección
de la pelota
entonces
con la X
más
la dirección de la pelota
si es mayor
a
el ancho del canvas
menos
y esto es para afinar
el radio
de la pelota
vale
si el canvas width
mira ya
ya ha pasado ahí
veis que ha pasado ahí
justamente con esto
ya ha pasado
este sería
la parte de
la derecha
esta sería la
la
pared derecha
vale
la pared derecha
vale
si la posición de la pelota
es X
más
su dirección
¿no?
la próxima posición
que era más 2
es mayor
que el final del canvas
menos
el radio de la pelota
esto es por si
muy grande
ya veréis que si le quito esto
tampoco se va a notar mucho
no se nota
no se nota
pero bueno
eso es por si queréis hilar muy fino
esta sería una
pero nos faltaría otra
la otra
pues nada
la otra todavía
es más fácil
porque básicamente
es pensar que
si la posición
es menor
que 0
o que el ball radius
puedes decirle
incluso que sea más pequeño
que la pelota
pues ya lo tendríamos
para probarlo
lo que podríamos hacer aquí
es que el DX inicial
sea menos 2
así irá a la izquierda
¿vale?
¿veis?
se ha empujado
y ya está
o sea que ya tendríamos
las colisiones de los laterales
ya tendríamos una colisión
de los laterales
y ya está
le voy a dejar el del ball radius
un poquito
para afinar
para afinar
un poquito
y ya está
a lo mejor habría que ver
exactamente
donde está haciendo
esta sea la pared izquierda
¿vale?
estas sean los laterales
y ahora solo
rebotar
en la parte
de arriba
en la parte de arriba
¿vale?
solo en la parte superior
del canvas
porque la de abajo
nos morimos
y esta es un poco
la misma idea
si más la dirección
es menor
que el ball radius
¿vale?
porque la parte de arriba
es la coordenada cero
pues entonces lo único
que tenemos que hacer
es cambiar
esto
¿vale?
entonces vamos a ver
si ahora funciona
y ya tenemos
nuestras
nuestras colisiones
aquí abajo
desaparece
pues nada
ya lo único
lo último que podemos hacer aquí
por si queremos
es tener una especie
de game over
si al final
esto
la suma esta
es mayor
perdón
es mayor
que el canvas
menos el ball radius
aquí pues nada
vamos a decir
que esto es un game over
le voy a poner
el console.log por ahora
y vamos a poner
un document location reload
para que reinicie
y así podemos probar
más rápido
pero aquí ya tendríamos
las tres colisiones
van pasando
y aquí ¿vale?
y ahora se está refrescando
estas serían las colisiones
que tendríamos
de la pelotita
ya podemos ver
como la pelota
está funcionando
esto está en 2x
bueno no pasa nada
no pasa nada
lo puedo volver a explicar
no pasa nada
pero más o menos
se ha entendido
a ver no pasa nada
que en cada parte
vamos a estar
vamos a estar parando
para que lo comentemos
no os preocupéis
básicamente
lo que estamos haciendo
voy a volver otra vez
¿vale?
voy a volver otra vez
a que lo hagamos
si esto es lo de la pantalla
del DVD
es esto
voy a hacer un pequeño
una pequeña
para que lo valvamos
a pensar ¿vale?
uno
este es el html básico
que necesitamos
ya veis
muy poquito de estilo
un elemento html canvas
dos
en el javascript
lo que tenemos que hacer
es recuperar este canvas
y le decimos
que el contexto
en el que queremos dibujar
es 2D
pero hay otros
hay de 3D
con webgl
con image bitmap
y un montón
tenemos que indicarle
cuáles son
la resolución
o las dimensiones
de nuestro canvas
tenemos diferentes variables
de nuestro juego
esta no
¿vale?
pero tenemos diferentes variables
de nuestro juego
y tenemos las variables
de la pelota
¿vale?
porque la vamos a tener
que pintar
y todo esto
pero lo más importante
que tenemos que hacer antes
es la función draw
la función draw
es una función
que se va a estar llamando
en cada frame
cada vez que se ejecuta
¿vale?
lo que hace es programar
que se vuelva a ejecutar
esta función
en el siguiente frame
y esto lo que hace
y lo hacen todos los juegos
es que constantemente
va a estar dibujando
los elementos
de la pantalla
dependiendo
de las variables
que estén
en ese momento
si el usuario
ha movido algo
si ha habido una colisión
o lo que sea
por eso
cada vez que pintamos
para evitar además
esta estela de aquí
tenemos
uno
que limpiar todo el canvas
dibujar todos los elementos
y luego tenemos que
ver las colisiones
y los movimientos
dibujar la pelota
lo hemos hecho ya aquí
justamente
hemos iniciado un trazo
hemos dibujado un círculo
de color blanco
que podía haber hecho
que fuese azul
si queríamos
de hecho luego
vamos a cargar imágenes
también
vamos a cargar sprites
y todo esto
y luego vamos a tener
también aquí
para dibujar el resto
y aquí tendríamos
el movimiento de la pelota
el movimiento de la pelota
para rebotar
las pelotas
en los laterales
pues lo que estamos haciendo
es mirar
la posición de la pelota
y su dirección
para ver si la siguiente
la dirección
que tendría
sería que va a acabar
en una posición
que hace que sea
más grande
que las paredes
o menor que las paredes
por lo tanto
esta horizontal
lo que haríamos
es que cambiamos
su dirección
y si era negativo
la pasamos a positivo
si era positivo
la pasamos a negativo
cambiamos su signo
de la dirección
para que así
tenga ese efecto rebote
y esto sería lo mismo
para rebotar
en la parte de arriba
si la posición
de la pelota
sumándole su dirección
es menor
que el radio
de la pelota
esto básicamente
esto en realidad
pensad que es cero
¿vale?
es cero
¿por qué?
porque la posición
arriba de la I
es cero
la posición vertical
más alta
es cero
por lo tanto
cuando decimos
que llegue aquí arriba
lo que le estamos diciendo
es que es cero
le decimos
ball radius
para que justamente
tenga en cuenta
también
como de grande
la pelota
para que
no sobrepase
y puede quedar
un poco raro
como la pelota
es lo suficientemente
pequeño
pues no queda tan mal
y finalmente
esto sería
en el caso
de que la pelota
toca el suelo
si la I
y su dirección
es mayor
que la altura
del canvas
menos
lo que ocupa
la pelota
entonces significa
que hemos perdido
que la pelota
se ha ido por abajo
y independientemente
de cualquier cosa
que hagamos
lo que hacemos aquí
es mover la pelota
lo que hacemos aquí
es que esta era
la posición de la pelota
e incrementamos
su dirección
o sea
en una posición
estaba en la X
la siguiente posición
está en X
más DX
DX
es la aceleración
que lleva la pelota
que la tenemos aquí
vale
fijaos que aquí
la puedo hacer
que vaya más lenta
por ejemplo
si le cambio aquí
pues esto sea más lento
o podemos hacer
que vaya mucho más rápido
veis
en este caso
yo creo que con 2
pues ya está bien
pero si queréis
por ejemplo
que tenga dificultad
pues podéis hacer
que la dificultad
sea que vaya más rápido
que vaya menos rápido
o lo que sea
y ya lo tendríais
ahora vamos a continuar
con lo siguiente
sí
lección de movimiento
y colisiones
totalmente
ahora
vamos con más cositas
vale
esto sería
por la pelota
que está bien la pelota
pero nos falta
yo creo que lo más interesante
la paleta
la paleta
vamos a
con la paleta
vamos a poner aquí
las variables
variables
de la paleta
vale
las variables de la paleta
primero
bueno
bastante fácil
aunque luego
tenemos que hacer
un pequeño cálculo
pero la paleta es
cuánto va a estar ocupando
tanto de alto
como de ancho
así que vamos a poner
que esto
50
vale
más o menos
y luego
vamos a tener también
la posición de la paleta
la posición de la paleta
es muy interesante
porque se actualiza
el usuario
tiene control
de la paleta
y dependiendo
donde mueva
tendrá que ir
a un sitio
a otro
pero primero
tenemos que tener
un estado inicial
vamos a intentar
que la paleta
aparezca en el centro
y para hacer eso
vamos a utilizar
el ancho del canvas
menos lo que ocupa
la paleta
y esto lo dividimos
en dos
vale
entonces
la paleta
la vamos a dibujar
en el centro
y luego aquí
tendríamos algo similar
vale
donde tendríamos
la altura
menos la altura
del Paddle Height
a ver
esto a lo mejor
vamos a hacerlo así
vale
para que no quede
abajo del todo
sino que un poquito
arriba
luego lo veremos esto
para que veáis
como se mueve
el dibujar
en la pelota
ya lo tenemos
vamos a dibujar
el Paddle
ahora que tenemos
aquí las
las cositas estas
antes os he enseñado
como dibujar
con un trazado
con el Begin Path
esto es como
iniciar el trazado
vale
y terminar
el trazado
pero hay una forma
más rápida
de hacer dibujos
porque claro
esto a lo mejor
es un poco rollo
y alguien dirá
joder es que tengo que
escribir mucho código
para hacer un dibujo
bueno
hay una forma
un poco más rápida
que básicamente
es decirle
oye
yo quiero que esto
tenga el color
yo que sé
09F
vale
y directamente
ya le podemos decir
que en el contexto
dibuje
así
con el Fill Rec
le vamos a decir
que rellene
un rectángulo
y le vamos a decir
que tiene que iniciar
donde vamos a hacer
el dibujo
en que coordenada
primero
en X
en Y
vale
y aquí le tengo que decir
el ancho
y el alto
del dibujo
o sea
que si por ejemplo
yo quiero aquí
que me dibuje esto
le tengo que decir
esa coordenada
en X
y en Y
y a partir de ahí
va a dibujar
el alto
y el ancho
vale
entonces
le voy a decir
que aquí
el Padel X
aquí
el Padel Y
y el ancho
y el alto
va a ser
los que
hemos añadido
antes
vale
teníamos este
y este
Padel High
y ya tendríamos
nuestra paleta
no la paleta
más bonita del mundo
luego le vamos a poner
una imagen
pero ya tenemos
nuestra paleta
le podríamos poner
el dibujo que queramos
el color que queramos
y tal
por ahora voy a poner rojo
pero luego le vamos a poner
una imagen
que quedará mucho mejor
pero fijaos
que también lo podéis hacer
así más a saco
vale
básicamente decirle
cuál es el color
que esto es opcional
porque si no le pones color
se queda en blanco
que tampoco está mal
pero aquí lo que le estamos
diciendo es
la posición
la coordenada
la coordenada
X
vale
la coordenada
Y
vale
el ancho
del dibujo
y el alto
del dibujo
y con esto
pues ya tendríamos
luego vamos a ver
cómo podemos cargar
una imagen
para que esto quede mejor
pero al menos
para que podamos empezar
a trabajar
esto ya está súper bien
nos permite
ver ahí nuestra paleta
y añadirle
los eventos del teclado
que también está
bastante interesante
el hecho
que podamos controlar
la paleta
con el teclado
porque si no
quién va a estar jugando
así que vamos a añadir
otra función más
de todas las que habíamos
puesto por aquí
que yo le voy a llamar
aquí
Function Init Events
vale
inicializar eventos
para inicializar eventos
básicamente
que dos eventos
vamos a editar
vamos a escuchar
cuando el usuario
está presionando
una tecla
vale
y cuando presione
la tecla
lo que vamos a estar
utilizando
es el
Key Down Handler
y también
cuando el usuario
suelte la tecla
esto es interesante
porque es diferente
a cómo funciona
en las páginas web
en las páginas web
normalmente
lo que haces
es que cuando
escuchas la tecla
entonces moverían
la pala
pero no es así
como funciona aquí
porque aquí
quien dibuja
es aquí
entonces nosotros
aquí
en este Key Down
aquí lo que vamos a hacer
es que cuando suelte
la tecla
vamos a llamar a otro
lo que vamos a querer hacer
en estas funciones
es simplemente
tener una indicación
de que está ocurriendo
algo
para saber
que es lo que tenemos
que dibujar
vale
no vamos a actualizar
nosotros
la posición
no vamos a hacer aquí
que se redibuje
sino que simplemente
vamos a escuchar
vamos a actualizar
las variables
vale
necesitamos aquí
dos variables más
vamos a poner variables
variables paleta
bueno vamos a poner aquí
variable paleta
que sea
right pressed
y left pressed
van a ser como dos flags
dos banderitas
que nos van a decir
si tenemos
la tecla
si está pulsada
o no está pulsada
así que
aquí ahora sí
que podemos tener
las dos funciones
function key down handler
que aquí
recibimos
recibimos el evento
y en el evento
pues lo que vamos a decir
esto lo podéis hacer
de un montón de formas
vale
por ejemplo
se podría hacer
de un montón de formas
por ejemplo
este key
recuperarlo directamente
de aquí
pero bueno
yo lo voy a sacar aquí
para que veáis
de dónde viene
el parámetro de event
vale
por ejemplo
si la key
que estamos pulsando
es right
vale
right
o
la key
es igual
a row right
vale
a row right
entonces lo que vamos a hacer
aquí es indicar
que sí
que estamos pulsando
que estamos pulsando
la derecha
y si no
vamos a decirle
oye
si la key
que estamos pulsando
en la izquierda
o es a row left
básicamente esto
porque puede haber
diferentes nombres
de la key
pues entonces
indicamos
que estamos pulsando
en la izquierda
¿por qué no hacemos
esto?
por ejemplo
o ¿por qué no lo hacemos
directamente?
que podría ser
por ejemplo
que esto podría
tener sentido
esto podría funcionar
alguien seguramente
lo está pensando
pero ¿por qué utilizas
un if?
si es un valor boleano
podrías hacer esto
por ejemplo
podrías hacer esto
y como esto es una condición
y es un valor boleano
esto directamente
ya se guardaría
correctamente
con el valor
no está mal
pero hay un problema
y es que el usuario
realmente podría estar
pulsando las dos teclas
y eso lo que podría causar
serían cositas raras
¿vale?
podría causar
o que no se mueva
o que se mueva muy raro
¿vale?
porque podríamos
detectar aquí
que se están pulsando
las dos teclas
esto
pues para evitarlo
podrías utilizar el if
esa podría ser una opción
o podrías decir
bueno
si el usuario
es tan
creativo
de hacer eso
de pulsar las dos teclas
lo dejo así
y ya está
bueno
pues lo podemos dejar así
solo para que lo sepas
bueno lo voy a dejar así
porque me parece como lo más fácil
que todo el mundo puede entender
¿vale?
pero solo te lo comento
para que lo sepas
así lo que nos aseguramos
es que solo entra
en una de las dos condiciones
pero bueno
solo para que sepas
que habría otras formas
de hacerlo
y lo mismo
aquí sería un poco
la misma idea
¿no?
con el otro evento
el key app handler
que estamos utilizando aquí
sería un poco
la misma idea
lo que aquí
como es al soltar la tecla
lo que estaríamos haciendo
es pasar a false
o sea
lo que estamos diciendo es
si la tecla que hemos soltado
era la derecha
o la row right
lo que decimos es
que la derecha
ya no la estamos pulsando
¿vale?
o sea
sería una forma
de actualizar
y de escuchar
esto lo podríamos refactorizar
pero bueno
muchas cosas
ya verás que lo podría
de hecho he leído un comentario
de yo esto lo haría
con clases
yo esto lo haría
a ver
lo podéis hacer
de mil millones de cosas
de mil millones de formas
y de hecho
lo dejo como ejercicio
porque la idea
tampoco es que yo
lo refactorice todo y tal
sino que lo llevéis de ejercicio
lo refactorice
y lo hagáis vuestro propio
lo toqueteéis
y todo esto
y entonces lo podéis cambiar
todo lo que queráis
¿vale?
así que yo lo dejo así
para que todo el mundo
lo entienda
y luego que cada uno
lo haga como quiera
ya tendríamos aquí
los eventos
de cuando se
para escuchar
que lo mueve
pero no lo estamos moviendo
¿vale?
vamos a inicializar esto
igual que estamos inicializando
el primer pintado
inicializamos los eventos
aquí podríamos tener más eventos
pero por ahora
con estos tenemos suficiente
y lo importante ahora
sería
pues mover la paleta
o sea
cuando le damos a la derecha
le damos a la izquierda
que haga algo
que podemos
a ver
por ahora voy a hacer
un console lock aquí
con el right press
y el left press
solo para que veáis
como está funcionando esto
si nos vamos aquí
¿vale?
veis cuando se está dibujando
constantemente
está chequeando
si se está pulsando
a la izquierda
o a la derecha
esto es constante
y fijaos ahora
que estoy pulsando
a la izquierda
y eso ha pasado a true
cuando suelto
pues ya pasa a false
si voy a la derecha
¿vale?
pues ahora
esto pasa a true
false
¿veis?
como van cambiando
como que va detectando
los diferentes estados
esto ya lo que me permite
es saber
que voy a poder
saber
en el movimiento
de la paleta
hacia donde tiene que ir
así que vámonos aquí
vamos a implementar esto
facilito
ya veis que esto va a ser
muy sencillo
porque lo único
que tengo que decirle
es bueno
si se está moviendo
a la derecha
pues lo muevo a la derecha
si se está moviendo
a la izquierda
lo muevo a la izquierda
ya está
simplemente
si estoy pulsando
a la derecha
¿vale?
si estoy pulsando
a la derecha
¿vale?
pues el paddle x
lo tengo que mover
a la derecha
y si lo estoy pulsando
a la izquierda
pues lo tengo que pulsar
a la izquierda
¿vale?
no sé por qué ahora
me ha
ah porque he puesto else
pero no
es else if
¿vale?
left press
¿vale?
si estoy moviendo
a la izquierda
a la izquierda
entonces ahora
ya podemos mover
nuestra paleta
obviamente
todavía no tiene la colisión
de no ir
a más allá
pero ya se está moviendo
simplemente con esto
y fijaos
que bueno
se limpia
o sea se mueve
bastante fluido
que no da trompicones
ni nada
de nuevo
aquí
pues cuanto más
grande sea este valor
más rápido
se moverá
¿veis?
o sea se mueve más rápido
y esto muchas veces
son las opciones
que tenéis en las configuraciones
de vuestros videojuegos
cuando sensibilidad alta
bueno pues podríais tener
¿ves?
esto es sensibilidad alta
pero podéis pasar
a tener una sensibilidad
más baja
pues aquí tendríamos
a la sensibilidad
más baja
entonces en las opciones
esto sería la sensibilidad
de hecho lo podríamos poner
aquí incluso
en una
poníamos aquí
sensi...
paddle
paddle
sensibility
¿vale?
y yo lo voy a dejar
en 8
que me parece
creo que había puesto 7
pero ya me parece bien
y así pues
el paddle sensibility
ya tendríamos aquí
¿vale?
y ya estaría moviéndose
todavía nos faltaría
otro check
¿no?
porque fijaos que aquí
pues se pasa de los
de los límites
no tiene sentido
el más sencillo
es el de la izquierda
porque aquí lo único
que tengo que decir
es que el paddle x
que sea mayor a 0
¿vale?
para que se quede ahí
fijo
que no llegue mucho más allá
y luego tendríamos
el de la derecha
nos faltaría
el de la derecha
que es simplemente aquí
pues tendríamos que decir
lo mismo
si el paddle x
es menor que el canvas width
y menos el paddle width
o sea
mientras esté pulsada
la derecha
y la posición
de la pala
sea menor
que todo el ancho
del canvas
menos la propia longitud
de la pala
porque claro
si no pones esto
lo que va a pasar
es que se va a colar un poco
¿veis?
se cuela
porque la posición
lo que está diciendo es
no, no
si yo puedo moverme
al menos hasta allí
porque tu última posición
¿veis?
que aquí
se queda
no lo veis
pero se ve
se queda justo ahí
¿sabes?
lo huevo
se queda justo ahí
bueno, no lo veis
no lo veis porque yo estoy encima
¿vale?
pero bueno
que se queda
se queda justo ahí
mira
mira
ahí
ahí
se queda
ahí
¿lo veis ahí?
pues ahí está
ahí está escondido
así que
por eso tenemos que tener en cuenta
también
el paddle width
para que justamente
digamos
no, no
el límite
es que tampoco
puede sobrepasar
la anchura
de la pala
¿vale?
y así
cuando vayamos a la izquierda
y a la derecha
ahora sí
que queda perfectamente
¿sensivity o sensibility?
hostia, buena pregunta
yo creo que sensibility
¿no?
hostia, no lo sé
no lo sé
¿sensibility o sensibility?
no, no tengo idea
¿quién play sensibility?
a ver
sensitivity
¿sensibility?
según esto
¿sensibility?
vale
gracias por
aprendiendo inglés
aprendiendo inglés
vale
ya está
¡ay!
sensitivity
sensitivity
¿no?
puesto bien
sensitivity
vale
vale
esto por aquí
vale
vale
pues ya está
arreglado
ojalá tú hubieras sido
mi maestro en la universidad
no entiendo mucho
de lo que dices
vaya por Dios
vaya por Dios
que no entiendo
pero a ver
más o menos
si realmente
o sea
si no entendéis algo
comentadme
preguntadme
ya está
a ver
sinceramente
es verdad que tiene
o sea
no tiene
cuando veáis el código
y lo podáis estar chequeando
y todo esto
ya veréis
que tampoco
es que tenga ningún tipo
de magia negra
en el tema
de todo lo que son colisiones
es muy repetitivo
porque al final
realmente
es que una vez
que haces una colisión
al final ya lo tenéis
bastante
bastante fácil
¿vale?
y luego
aquí
el tema
de cuando se mueve
es cuestión
de entender
que en cada frame
estamos repintándolo todo
y que por lo tanto
lo que estamos haciendo
es simplemente
actualizar la posición
en cada frame
de todas las cosas
que tienen que aparecer
¿vale?
así que
con esto también
se puede hacer el tetris
claro
si de hecho
hicimos el tetris ya
ya lo hicimos el tetris
excelente la verdad
buena explicación
de algo que se debe poner lógica
que el paso a paso
es entenderlo
vale
pues vamos a continuar
porque ya movemos
la pala
pero no tiene colisión
¿no?
si ponemos esto aquí
no tiene colisión
voy a poner la pelota
un poquito más rápida
porque
un pelín más rápido
¿vale?
al 3
ahí la vamos a poner
un poco más rápida
y así pues seremos capaces
de revisar
la colisión
con la pala
esta
esta
seguramente
es la
más difícil
la colisión
con la pala
yo creo que es la más difícil
de todas
la
la colisión
con la pala
¿por qué?
porque en el
ball movement
este
claro
hasta ahora
habíamos hecho
que a ver
tampoco es tan difícil
pero
hasta ahora
habíamos hecho esto
que la pelota toca el suelo
pero
pero
antes de esto
tendríamos que ver
si ha tocado
la pelota
o sea
antes de decir
que toca el suelo
aquí
podríamos revisar más cosas
para que rebote
¿vale?
para decirle
no
pues voy a hacer que rebote
antes de que esto realmente
termine aquí
entonces
lo que podemos hacer aquí
es que esto
lo dejamos con un else if
¿vale?
y vamos a decir
la pelota toca el suelo
toca la pala
y aquí
la pelota
toca el suelo
¿vale?
entonces vamos a añadirle aquí un if
donde básicamente
vamos a decirle
¿vale?
si aquí
pasan cosas
¿vale?
lo único que tenemos que hacer aquí
es cambiar
la dirección de la pelota
si iba hacia abajo
y le pega la pala
pues tendrá que ir para arriba
¿no?
vale
pues simplemente
esto es lo más importante
cambiar
cambiamos la dirección
de la pelota
para que vaya para arriba
muy bien
ahora
aquí pasan cosas
muy bien
¿qué es lo que tiene que pasar?
se supone que tiene que pasar aquí
para que
realmente
entienda
que
ha pegado en la pala
lo voy a hacer separado
para que lo tengamos claro
¿vale?
vamos a ver
primero
la
ball
para
primero la x
ball
is
ball
same
x
as
paddle
¿vale?
esta sería la primera
¿vale?
o sea
vamos a detectar
si la pelota
está en la misma coordenada
de la x
horizontalmente
que la pala
¿vale?
por lo tanto
la x
que era la pelota
tiene que ser mayor
que la posición
de origen
de la pala
y además
también
tiene que ser
la x
menor
a la posición
de la x
más su ancho
¿vale?
esto significa
que la pelota
está en la misma coordenada
de la x
o sea
porque la pala
claro
la pala
pensad
que la pala
voy a hacer
un dibujito
os voy a hacer un dibujo
porque esto
es un poco
no es difícil
pero
os puede liar un poco
a ver
imaginad
la pala
es esto
esta es la pala
claro
la pelota
puede darle
le puede dar aquí
le puede dar aquí
pero le puede dar aquí
le puede dar aquí
le puede dar aquí
entonces
lo que estamos revisando
es
si realmente
la pelota
está en esta superficie
¿vale?
en esta superficie
si está aquí
da false
si está aquí
da false
pero si está aquí
dará true
¿vale?
y lo que estamos viendo
es la x
de la pelota
tiene que ser mayor
que la paddle x
el paddle x
es básicamente
lo que tenemos aquí
este sería el paddle x
¿vale?
el paddle x
es
esta cosita de aquí
esta coordenada
y el paddle x
más
el paddle width
sería
esta coordenada de aquí
esta coordenada de aquí
¿vale?
entonces
lo que estamos mirando
es si realmente
la pelota
está
dentro
de este
esta superficie
¿vale?
por eso estamos mirando
si la x
que la posición de la pelota
es mayor que el paddle x
¿vale?
entonces
debería estar aquí
y si es menor
que el paddle x
más
la anchura
de la
de la
de la pala
entonces
ya sabemos que estaría aquí
aquí
sería esto
true
¿vale?
aquí notaría true
pero si la pelota
por lo que sea
no está dentro
del eje x
¿vale?
imagínate aquí
pues ya nos daría false
entonces
¿está la pelota
en la misma x
que la pala?
vale
pues lo miramos así
y ahora tenemos que mirar lo mismo
pero tenemos que mirar
la posición de la y
o sea tenemos que decir
is ball
same
o touching paddle
si touching
touching paddle
tiene sentido
¿vale?
y para saber
si está tocando la
la pala
lo único que tengo que mirar
es
vale
si me sé
justamente
la
la posición de la pelota
más
la dirección de la pelota
si es mayor
si es mayor
que
aquí podríamos poner
la posición de la y
podríamos poner
la posición de la y
también ¿verdad?
o sea no podríamos poner
la paddle y
con esto a lo mejor
ya la tendríamos suficiente
¿no?
paddle y
más
justamente un poco lo mismo
pero dando de la vuelta
es que hay dos formas
de cómo podríamos hacer esto
básicamente
podríamos utilizar
la altura del canvas
y todo esto
pero también tendríamos
la paddle y
o sea y con la paddle y
podríamos decir
esta es la posición
justamente
que tendríamos
del
que tendríamos
entonces
la posición de la y
si es mayor
que la posición de la y
vale
vamos a probar esto
¿vale?
y esto debería estar aquí
y vamos a ver
si esto funciona
si está tocando la pelota
y está en la misma
que la x
¿vale?
vamos a ver ahora
estas serían como las dos condiciones
que tenemos que mirar
¡oh!
¡qué malo!
¡qué malo sí!
o que no le he dado
no le he dado
vale
pues ya está
ya sí que lo tenemos
vale
ya lo tenemos
mirad
ping
¿veis?
ahora sí que está funcionando
básicamente lo que estamos haciendo
es detectar
si está en el mismo eje x
y además
está justo
en el eje y
significa
que le está dando
a la pala
fijaos que si yo lo dejo esto
pues pierdo
¿vale?
en este caso
pierdo
aquí lo podemos ver
¿veis?
que ahora funciona correctamente
y lo único que hemos hecho
es detectar
si realmente están compartiendo
el eje x
y el eje y
lo que pasa es que
lo tricky
es que la pala
es muy ancha
y por lo tanto
tenemos que ver
toda su superficie
no un punto en concreto
eso es lo que lo puede hacer
un poquito tricky
pero más allá de eso
pues con esto
ya tendríamos la colisión
perfectamente
¿vale?
hemos hecho
estas dos condiciones
uno
ver si la pala
si la pelota
está
básicamente
en la superficie
de la pala
y luego si
está tocando la pala
en el eje y
o sea
si están en la misma altura
y con esto ya
le cambiamos justamente
la dirección de la pelota
y ya está
pero habéis entendido esto
porque la verdad es que
si golpea un borde
a ver
podríamos poner
hacer más colisiones
pero ahí os lo dejo a vosotros ya
para que lo pongáis
lo tengáis mejor
no quiero la pala
bueno pues
el paddle
¿vas a incluir powerps?
hombre no me va a dar tiempo
porque explicándolo todo y tal
me cuesta
pero básicamente
lo importante que quiero
que tengáis aquí
es que tengáis esto
¿vale?
que sepáis por qué funciona
justamente esto
vale
vamos a mejorar alguna cosa
porque esto lo hace un poco aburrido
¿no?
el hecho de que sean blanco y negro
y seguramente la gente me dirá
no sé
entonces
he estado sacando
he estado sacando
algunos sprites
por ahí
que me he encontrado
y
he dicho
hostia
pues está chulo
sacar unos sprites
porque así además
además de que queda más bonito
mira
he sacado los sprites
del arcanoid
los bricks
el background
¿vale?
para que no sea todo blanco y negro
que parece el pong
y no es el pong
así que lo primero
en el canvas
en el background
en lugar de ser negro
vamos a utilizar
el fondo
del
vaca G este
vamos a decir
que se repita
y ya tendríamos
el color este
que es el original
este se supone
que es el de verdad
y ahora vamos a cargar
para que aparezca
el color de la pala
o sea
el color de la pala
no
para que aparezca
la pala de verdad
porque creo que puede tener más sentido
entonces vamos a cargar aquí
dos imágenes
¿vale?
vamos a cargar la imagen aquí
de los sprites
¿ok?
alto aquí
sprite
sprite
arcanoid
¿ok?
y vamos a cargar también otro aquí
que este en realidad
es otro sprite
pero es más de los
de los bricks
este es el de los bricks
que es para que se vean
los bricks de colores
sprite
bricks
arcanoid
a cada uno le vamos a poner una idea
y esto está chulo
porque nos va a permitir
voy a poner que esto sea hidden
¿vale?
para que no se vea
no sé si sabíais esto
esto es trucazo también
el hidden
el atributo hidden
es un atributo
que es boleano
del html
que lo que hace
es que
el navegador
no renderice ese elemento
en realidad
hay que tener un poco de cuidado
porque hay algunos navegadores
antiguos
que esto lo ignoran
¿vale?
pero esto básicamente lo que hace
si vais a la página web
es que la imagen está ahí
solo que
tiene un display
no sé si es un visibility hidden
ah no me acuerdo
si es visibility hidden
no
un display none
¿vale?
le pone el estilo
display none por defecto
esto está bastante curioso
en lugar de tener que poner
la clase
display none
o el estilo
pues está este atributo
que justamente te hace esto
¿no?
con el hidden
pues te lo hace desaparecer
entonces pongo aquí sprite
y voy a poner aquí bricks
vamos a recuperar
estos dos elementos aquí
¿vale?
el sprite
sprite document
query selector
con el sprite
y vamos a pillar también los bricks
¿vale?
y ya tenemos ahí
el sprite y los bricks
entonces
lo primero que voy a intentar
es
en la pala
voy a dibujar una imagen
en lugar de poner un fillrec
que es lo que hemos hecho antes
en dibujo de la pala
que no está mal
pero esto
lo voy a dejar por ahora
porque nos puede servir
para ver si lo estamos haciendo bien
lo que vamos a hacer
es dibujar una imagen
¿vale?
cuando dibujamos una imagen
esto es un percal
de tres pares
de narices
¿vale?
entonces
¿qué es lo que tenemos que pasarle aquí?
le tenemos que pasar
la imagen
la imagen
es lo primero que hay que pasarle
luego
el clip
y ahora te explico
lo que es el clip
el clip
básicamente
¿qué pasa?
que yo tengo
esta imagen
¿no?
esta imagen
fíjate que la pala
la pala
el paddle
está justamente aquí
¿no?
es este
este es el que quiero dibujar
claro
le tengo que indicar
cuál es la coordenada
de esta imagen
o sea
tendría que
venir aquí
venir aquí
y aquí decir
vale
en esta imagen
esta imagen de aquí
si yo
paso del 0 a 0
y voy haciendo esto
grande
grande
grande
fijaos
que ahí
no sé si lo veis
pero me aparecen unos numeritos
no sé si lo veis
porque está muy pequeño
vale
si veis ahí los numeritos
que pone 26 por 172
básicamente
esa sería más o menos
más o menos
yo creo que sería un poquito más
29 quizás
ahora vamos probando
¿vale?
pero esa sería la coordenada
desde la que quiero empezar
a cargar la imagen
o sea que
vamos a poner
que en el clip
X
le voy a decir
la imagen
que es esta
que habéis visto
la del sprite
que es la que hemos cargado antes
tiene que empezar
a cargarse
no sé
desde el 29
voy a poner
luego lo ajustamos
si no queda bien
hasta el 174
¿vale?
¿veis?
ahora ya está cargando la imagen
pero claro
no está cargando la imagen
no está cargando bien
porque no le he dicho
ni cuál es el ancho
ni el alto
ni nada
le tengo que decir
cuál es
el ancho y el alto
de la parte de la imagen
que queremos
pues va a ser
el paddle width
y el paddle height
vale
pero fíjate
que está aquí
o sea está en una posición
súper rara
y además
no lo está cargando bien
eso es como toda la imagen
o sea que
la altura y la anchura
parece que más o menos
lo ha hecho bien
pero todavía le falta
por ejemplo
la posición
o sea que le tengo que decir
dónde lo tiene que pintar
pues dónde está
justamente el paddle
lo tenía que poner ahí
pero es que todavía
le falta también
el ancho y el alto
del dibujo
así que le tengo que decir
el paddle width
y el paddle height
vale
y ya tendríamos aquí el dibujo
fijaos que está bastante bien
o sea no está mal
tiene un fondo
porque se lo estamos dibujando aquí
de hecho se lo quitamos
y ya lo tenemos
ya tendríamos ahí el dibujo
podríamos ajustar
un poquito mejor
pero
ya estaría ahí
dibujándose
y hombre
a ver
tendríamos que ajustar alguna cosa
pero el dibujo está bastante bien
entonces
esta es la imagen
vale
esto sería el clip x
que es
donde empieza
a recortar
a recortar la imagen
a recortar
vale
el clip y
o coordenadas
coordenadas
de recorte
vale
y esto igual
coordenadas
de recorte
esto sería
el tamaño
del recorte
tamaño
del recorte
esta es la posición
x
del dibujo
esta es la posición
y del dibujo
y esto
es el ancho
del dibujo
y esto es
el alto
del dibujo
esto es porque
hemos tenido suerte
que el tamaño
del recorte
y el tamaño
del dibujo
es el mismo
vale
porque la paleta
justamente la hemos hecho
de la misma resolución
pero podría pasar
que el tamaño
del dibujo
sea más pequeño
sea más grande
por ejemplo
podemos intentar
hacerlo más pequeño
o más grande
vale
claro
obviamente esto va a intentar
estirar la imagen
pero tú podrías hacer
pues que la pala
sea mucho más grande
sea algo así
y el dibujo
sea más grande
aunque el recorte
que estamos haciendo
en la imagen
sea diferente
en este caso
encaja totalmente
tanto el recorte
como el tamaño
del dibujo
y por eso
puede ser que visualmente
digas
oye porque
está lo mismo
pero con esto
ya estaríamos dibujando
la imagen
en lugar de tener que
mostrar los típicos cuadritos
y ya está
vale
entonces ya tendríamos aquí
nuestra pala
con el dibujo
y nos faltaría
lo más interesante
lo más divertido
que son los ladrillos
pero con una imagen
con fondo transparente
en formato png
solo de la pala
no vale
sí que vale
pero lo cierto
es que buscando
yo he buscado
arcanoid sprites
y me he encontrado esa
y porque me ha parecido interesante
mira fíjate
por dos motivos
lo primero
es que esto es lo más típico
lo más típico
es que cuando a ti te digan
oye te voy a pasar
las imágenes del videojuego
en realidad
lo que te hacen es esto
a esto se le llama
sprite
y una sprite
es una imagen
donde están en realidad
todas las pequeñas imágenes
que necesitas del videojuego
por lo tanto
esto es bastante buena idea
porque cargas una imagen
en memoria
y en realidad
ahí tienes
todos los recursos
que necesitas para el videojuego
es bastante tremendo
pero para simplificarlo
lo podemos hacer
ahora por ejemplo
para los bricks
yo lo he hecho
de otra forma
con otra imagen
para simplificar
y no liaros
con todo el tema
de el clip
y todo esto
pero quería que lo vieses
porque es así como funcionan
los videojuegos
os podría engañar
voy a recortarlo todo
y tal
pero es que es así
como realmente funciona
fíjate que buscándolo
es lo primero que aparece
fíjate
es que ese segundo es el resultado
y lo he sacado de aquí
lo único que he hecho
es quitarle el fondo
para hacerlo transparente
y ya está
pero en la realidad
si buscáis en videojuegos
y queréis hacer videojuegos
vais a ver que todos
todos todos
siempre lo hacen así
con imágenes
que están los diferentes estados
y también el Super Mario Bros
por ejemplo
funciona así
el Super Mario Bros
tenéis todos los estados
del personaje así
en una sola imagen
y lo que hacéis es
básicamente hacer el clip
donde estáis
recortando la parte de la imagen
que os interesa
porque así estás ahorrando
un montón de memoria
obviamente
y te ayuda un montón
estos son por ejemplo
los sprites oficiales del Mario
estos que veis aquí
son los oficiales
y ya lo tendríais
en mis tiempos
en el fondo se ha quitado
un Photoshop
que locura
bueno
en el fondo
lo he quitado con Fotopea
vamos con los Bricks
a ver
los Bricks
es una parte bastante divertida
y vamos a ver
cómo lo hacemos
vamos a poner aquí
variables de los ladrillos
las variables de los ladrillos
la variable de los ladrillos
a ver
primero
tenemos que indicar
cuántos
cuántos ladrillos
vamos a tener
Brick
Row
Row
Count
o Rows
Count
o Bricks
como ponemos
Row Count
¿cuántas filas
vamos a tener?
voy a decirle que 6
y de Column Count
vamos a decirle que
13
yo creo
o 12
bueno
ahora veremos
vamos a ponerle también
cuál es el ancho
de cada uno
de los ladrillos
vamos a decirle también
la altura
de cada uno
de los ladrillos
esto está bien
tenerlo aquí
porque esto nos va a ayudar
fijaos que siempre que podamos
vamos a intentar quitar
este tipo de constantes
y ponerlas arriba
porque así vamos a poder
modificar
lo que sea mucho más fácil
que no tener que estar mirando
el código
a ver cómo lo hemos hecho
entonces
también vamos a poner
una separación
entre cada uno
de los ladrillos
y
vamos a poner
dónde empiezan los ladrillos
puede ser que empiecen
por ejemplo
pegados arriba
pero yo le voy a poner
como un padding
le vamos a poner
brick offset top
y lo mismo
vamos a ponerlo
en la izquierda
vamos a poner
20
está
bueno
menos
30
yo que sé
luego veremos
y finalmente
vamos a tener un array
con todos los bricks
con todos los ladrillos
que vamos a tener que dibujar
fijaos que aquí vais a poder
tener diferentes niveles
yo voy a inicializarlo
y voy a tener solo un nivel
pero lo ideal
es que realmente
podáis tener más niveles
y los niveles
de hecho
los podéis ver aquí
si buscáis
arcanoid levels
vais a ver que hay un montón
¿veis?
aquí lo tenéis
con diferentes dibujos
con no sé qué
está
y cada uno puede tener un color
y tal
yo lo voy a hacer random
para que nos aparezcan los ladrillos
los tengamos ahí
y ya está
pero que aquí
el límite es tu imaginación
¿vale?
yo voy a inicializar aquí
los bricks
con un for
¿vale?
let c
de columna
porque primero vamos a
iterar las columnas
y aquí
mientras las columnas
la column count
vamos a hacer un c++
¿vale?
y aquí ya tendríamos lo primero
ahora
lo que vamos a hacer
es que bricks
dentro de la columna
inicializamos
con un array
vacío
¿vale?
lo que hacemos ahora
primero
es que
tenemos un array
que es
los ladrillos
vamos a tener
filas y columnas
por lo tanto
va a ser una matriz
en la primera iteración
vamos a iterar
el número de columnas
que hemos dicho
que vamos a tener
y dentro
para cada columna
vamos a tener
pues obviamente
todas las filas
así que
vamos a inicializar
con un array vacío
porque si no nos petaría
y ahora
es que vamos a iterar
con el número
que tengamos
de filas
la r de rows
¿vale?
r
y mientras el brick
row count
r++
y así ya estaríamos
iterando
primero las columnas
que son 13
y luego las filas
que son 6
ahora
aquí tenemos que
calcular diferentes cosas
primero la posición
del ladrillo
para pintarlos
porque los tenemos
que pintar
y son unos cuantos ladrillos
así que
vamos a hacer el brick x
y aquí vamos a decirle
que
teniendo en cuenta
el número de la columna
el número de la columna
lo vamos a multiplicar
por
su anchura
¿vale?
más
el padding
y le vamos a sumar
el offset
con esto
lo que vamos a hacer
es que
el primero
lo dibujaremos aquí
pero el segundo
como se multiplica
¿vale?
pues ya
será aquí
el 2
y el 3
ya será justo aquí
y el 4
ya será justo aquí
o sea
va a estar uno
justamente después del otro
por eso
esta c
es la clave
porque en cada columna
primero será 0
1
2
3
4
5
6
vamos a estar multiplicando
cuánto es lo que ocupa
cada ladrillo
más
el espacio
que tiene que dejar
con el siguiente ladrillo
más
el margen
que hemos dejado
al inicio
entonces
esto es importante
porque es lo que tenemos que multiplicar
sería eso
¿ok?
super importante
esto
ojo que esto
o sea
primero
lo que primero que se hace
es este cálculo
¿vale?
es la suma
del ancho y el padding
luego multiplicamos esto
porque el offset
solo se tiene que sumar una vez
porque es la separación
el margen
solo se suma una vez
¿vale?
no tenemos que ponerlo dentro
porque si no
lo estaríamos sumando
uno de una vez
por eso
se hace así
por eso
primero hacemos esta operación
luego multiplicamos
y luego es que le sumamos
el margen final
y esto mismo
lo mismo
pero con el
obviamente
con la y
tenemos que hacerlo
¿vale?
tenemos que decir
vale
ahora con la fila
ahora en lugar del ancho
con el alto
y en lugar del margen
de la izquierda
con el margen de arriba
ya tendríamos la posición
de ese ladrillo
y ya tendríamos su x
y su y
¿vale?
ahora que tenemos la posición
vamos a poner aquí
calculamos
la posición
del ladrillo
en la pantalla
claro
porque es que tenemos
que inicializarlo
para poder dibujarlos todos
vamos a ponerle
un color random
¿vale?
vamos a asignar
un color aleatorio
a cada ladrillo
si miramos aquí
los colores
fijaos
que tenemos
un, dos, tres, cuatro, cinco, seis, siete, ocho
ocho colores
porque estos dos son ladrillos especiales
que se supone
que no se pueden destruir
entonces
para simplificar
nosotros vamos a utilizar
los otros
que además
vosotros le podéis dar
puntuaciones diferentes
a cada ladrillo
que eso puede hacerlo
bastante interesante
pero vamos a empezar
vamos a utilizar
solo los ocho
¿vale?
entonces vamos a utilizar
aquí un random
con el más
más punto flor
más punto random
este es el truco
del almendruco
de la vida
para
para tener un número
del cero
en este caso
del cero al siete
¿vale?
básicamente
más flor
por eso va a ser
del cero al siete
porque luego vamos a redondear
hacia abajo
entonces
más random
por ocho
esto sería como
el límite del número
que queremos
recuperar
en este caso
sería el ocho
pero como estamos
haciendo un más flor
nos va a salir
del cero al siete
que son justamente
los índices del brick
este truco
este
bueno truco
truco
o truquillo
no sé
es bastante
importante
que lo tengas
en la memoria
¿vale?
porque
si necesitas
un número
del uno al quince
o del cero al tres
o no sé qué
pues este tipo de cosas
ayuda
si quieres que sea
del uno al ocho
pues lo único que tienes que hacer
es hacer un más uno
y ya está
¿vale?
y ya lo tendrías
con el más uno
estarías haciendo
del uno al ocho
si le quitas esto
sería del cero al siete
y dependiendo también
de si utilizas más flor
o utilizas otra cosa
pues te podría
lo podrías hacer
de cero al ocho
o sea que dependería
pero bueno
es bastante importante
porque por desgracia
en javascript
no hay una función
que te lo haga más fácil
así que hay que saber
o te creas tú una función
y ya está
y bueno
ahora guardamos
guardamos la información
de cada ladrillo
y esto lo tenemos que hacer
en Bricks
C
R
¿vale?
para el ladrillo
que está en esta columna
y en esta fila
¿vale?
en esa posición exacta
vamos a tener un objeto
donde vamos a tener
la X
del Brick X
Brick Y
vamos a utilizar el status
el status para saber
si básicamente
ya lo hemos destruido o no
lo vamos a poner un 1
de que no está destruido
luego lo mejoramos
con una constante
y aquí el color
le voy a poner random
luego veremos
como lo arreglamos esto
pero
vamos a poner por aquí
las constantes
que va a ser
Brick status
igual
no
visible invisible
más que visible invisible
vamos a poner
idle
breakable
o
no sé cómo poner
fresh
fresh
1
hit
0
vale
me parece bien
y así aquí
pues podemos utilizar
el Brick status
punto
fresh
no sé
a ver
¿tenéis algún nombre?
on off
hombre on off
parece más un
un interruptor
¿no?
parece más
¿no va de 0 a 1?
podría salir 1
podría salir 1
no
pero
no podría salir 1
es 0.99
no no no no no
no puede salir el 1
va del 0 al 9
no no no no
broken
bueno
broken
lo más difícil
broken
¿y el otro qué?
hay Bricks
con necesidad de X
es verdad
con más de 1
para romperse
eso también lo podríamos mirar
active
vale
active me parece bien
vale
active y destroyed
destroyed
vale
me parece bien
active y destroyed
vale
pues entonces
vamos a ponerle aquí
active
por defecto
ponemos este objeto aquí
y ahora vamos a pintar
todos los
todos los ladrillos
vale
para pintar los ladrillos
lo que vamos a tener que hacer
uno
asegurarnos que hemos cargado el sprite
vale
esto lo utilizaremos después
pero básicamente para que luego no me pegue
un salto
y nos vamos a la
al draw bricks
vale
que tenemos aquí
fijaos que teníamos la función de draw bricks
está totalmente vacía
y aquí vamos a tener que copiar
otra vez
y esto es muy típico
cuando tenemos que hacer
una iteración de una matriz
que es un for dentro de un for
bueno pues lo copiamos
tampoco hace falta que lo volvamos a escribir
solo que no necesitamos inicializar esto
vale
y aquí pues cerramos esto
y ya está
un for dentro de un for
porque tenemos que dibujar
cada uno de los ladrillos
que tenemos en nuestra matriz
vale
vamos a recuperar
el brick actual
que básicamente
de los bricks
que tenemos en la columna
y en esa fila
ya tenemos el brick
bueno
si el brick
si el brick
el status
el status
es igual
no
brick status
brick status
punto
es destroyed
entonces lo que vamos a hacer
es un continuo
vale
que significa un continuo
lo que estamos haciendo aquí
básicamente es decir
oye
continúa
no sigas ejecutando
lo que estamos haciendo después
porque no nos interesa
en este caso
porque ya como este brick
que está destruido
no vamos a seguir ejecutando
vea la siguiente iteración
de este bucle
vale
continúa con la iteración
vale
una vez que ya tenemos esto
pues ya podemos dibujar el ladrillo
podemos decir
ctx
fill style
por ahora lo voy a poner
amarillo
vale
para que veamos de un color
y podemos dibujar
pues como habíamos hecho
bueno
voy a hacerlo con el rec
porque le vamos a poner
un stroke
para que lo veáis
vale
lo dibujamos
en la coordenada x
del ladrillo
en la coordenada y
del ladrillo
con el ancho
de los ladrillos
y la altura
de los ladrillos
vale
ya tendríamos aquí
el dibujo
tenemos que llamar
al fill
para que se dibuje
y ya lo tenemos
no están bien del todo
falta alguna cosa
porque ves
tiene demasiado ancho
tiene demasiadas cositas
podemos ir ajustando
por ejemplo
aquí donde hemos dicho
el offset
pues igual nos hemos pasado
vale
igual debe ser
un poquito menos
no sé si 16
pues esto ya
hace que tenga
mejor pinta
todavía no tenemos
las colisiones
pero eso lo vamos a hacer ahora
y podemos ponerle
fijaos
no sé si veis
que le falta
como no tienen borde
que bueno
normal no tiene borde
porque no se lo hemos puesto
pero para poner un borde
podéis utilizar
ctx.stroke
y veis
ahora le ha puesto
un borde
además le podéis cambiar
el borde
ctx.stroke.style
o sea podéis poner
más de color
ahora es más oscuro
pero lo podríais poner rojo
por ejemplo
para que lo tenga así como rojo
le podéis cambiar
un poquito el estilo
vale
lo vamos a dejar
por ahora oscuro
y ya lo tendríamos
ahora
vamos a añadir la imagen
antes de la colisión
para que se vea bonito
y para que reutilicemos
un poquito
esto para que veáis
que se están dibujando
vale
que es bastante importante
pero yo quiero crear
utilizar estas imágenes
que teníamos aquí
vale
estas imágenes
que teníamos aquí
para que queden
como más bonitos
y que se parezcan
más al juego todavía
entonces
lo que vamos a hacer
es que cada brick
si nos hemos dado cuenta
antes
hemos puesto un color random
vale
un color aleatorio
donde hemos hecho
aquí
ves que cada uno
tiene un color random
y esto al final
de color random
lo que tenemos aquí
es que uno será el 1
el 2
el 6
el
cada uno tiene un índice
vale
mira
vamos a hacerlo aquí
console.lock bricks
si nos vamos aquí
a nuestro jueguito
y abrimos esto
por aquí
vale
aquí tenemos el array
y fijaos
que tendríamos
claro
es que se me matan
pero ves
color 007
4247
que es lo que sirve eso
eso es el índice
es el índice
que nos va a servir
para cargar
cada uno de estos bricks
¿por qué?
porque lo que vamos a hacer
y os voy a hacer un croquis
de esto
que está bastante interesante
vale
nosotros tenemos esta imagen
vale
tenemos esta imagen de aquí
vale
uy
me ha dado la vuelta esto
sí
vale
tenemos esta imagen
lo que voy a hacer
es que
fijaos
yo tengo aquí
esto sería el 0
esto sería el 0
este sería el 0
el 1
el 2
vale
hasta aquí bien
pero lo que necesito
es recortar
esta parte
esta parte
vale
esta parte
tengo que ir recortando
la parte que me interesa
entonces
aquí tendríamos el eje
este sería el eje
este sería el índice
mira
voy a poner aquí
índice
este sería el índice
vale
pero
aquí tendríamos
la posición
0
0
0
en el eje
x y
este sería el 0
0
entonces
si yo me pongo a mirar aquí
en los bricks
aquí
y esto lo hago grande
para que lo podamos ver mejor
a ver
más grande
más grande
más grande
vale
fijaos
lo que podemos hacer aquí
es saber
cuánto espacio ocupa
y si lo ponemos
más o menos
vale
fijaos
ahí parece
pone
veis que pone 32
eso significa
que del 0 al 32
recuperaría
esa imagen
del 32 al 64
la siguiente imagen
¿no?
y entonces ya sé
que
la siguiente imagen
esta
esta de aquí
está en la posición
está en la posición
32 píxel 0
pero es que
esta de aquí
estaría en la posición
64
píxel 0
¿vale?
ya vais pillando un poco
cómo va la cosa
pues
ahora que tenemos
esta información
lo que vamos a poder
hacer aquí
es
dibujar cada uno
con la imagen
que le pertoca
simplemente
a ver
bricks
draw bricks
vale
aquí
¿vale?
vamos a quitar
voy a comentar
bueno
no lo voy a comentar
no hace falta
no pasa nada
draw image
vale
vamos a poner el draw image
pero lo que vamos a hacer aquí
es indicarle
a partir de qué punto
tiene que recortar la imagen
y simplemente
sabiendo que aquí tengo el índice
lo multiplico por 32
y aquí ya me va a estar dando
justamente
o el 0
o el 32
el 64
el 60
lo que sea
¿vale?
cada una de las posiciones
que voy a necesitar
para cada una de las imágenes
¿vale?
si aquí el color es 0
pues bueno
me saldrá el blanco
pero si el color es 2
pues me dará
este de aquí
¿vale?
si es 4
pues me dará
este de aquí
al final
cada uno
me indicará
dónde tengo que recortar la imagen
y ya con el
con tener el clip
solo tenemos que hacer algo
muy parecido
como lo que hemos hecho antes
con el paddle
aquí tendríamos
el clip X
no, el clip X no
primero tenemos que pasar
el sprite
¿vale?
con todas las imágenes
que esto lo teníamos aquí arriba
aquí
estos bricks
lo tenemos en esta imagen
así que esta imagen
la cargamos
la vamos a utilizar aquí
¿vale?
esto lo vamos a quitar de aquí
y aquí
utilizamos el sprite
con todos los bricks
ahora sí
el clip X
de la altura
todos van a ser en 0
¿vale?
mira, fijaos que ya empiezan
a aparecer cosas
¿cuál va a ser
el ancho y el alto
de cada uno
de los bricks?
bueno, esto ahora lo miramos
por ahora voy a poner algo así
luego lo ajusto un poco
la posición
la posición
la tenemos aquí
current brick
y
¿vale?
esa sería la posición
y ahora nos faltaría
el ancho y el alto
de cada brick
¿vale?
brick
vale
vale
entonces
no se ven
no se ven
porque
vamos a quitar primero esto
vale
ahora se ven con los colores
pero no se ve del todo bien
la imagen
no se ve del todo bien
la imagen
porque aquí
esto no lo hemos ajustado
del todo bien
tendríamos que
estar jugando un poco
¿vale?
vale
yo creo que aquí
mejor
5, 6, 7
bueno
puedo ir probando aquí
hasta que
12
hasta que se ajuste un poco
vale
ahí lo tenemos
ahí ahora sí que lo tenemos
ahí sí que tenemos ahora
las imágenes
que se están cargando
correctamente
¿vale?
igual
podríamos ajustar un poco más
alguna cosa
no sé
no sé si
es que
esto es
es que como no he calculado antes
tendríamos que
pero yo creo que sí
¿eh?
no sé
33
no
33 no sería porque se ve un trozo
yo creo que sería 31
que se ve completo
y que los tenemos ahí
¿vale?
vale
pues con esto ya tendríamos las imágenes
cada vez que se reinicia
se cambian los colores
porque lo hemos puesto aleatorio
la gracia de esto es que
en lugar de hacerlo aleatorio
que creéis un
niveles
que puedan ser matrices
y que cada vez que se pasen
pues que cambie el nivel
y ya lo tendríais
y ya solo nos faltarían
las colisiones
de los bricks
y ya lo tendríamos
por ahora bien
habéis entendido la última parte
no se podría poner
el brick width
y el tamaño de la imagen
del brick
es que claro
en este caso
yo creo que no ajusta
a ver voy a poner 31
yo creo que en este caso
no ajusta
sí claro
es que antes hemos tenido
la suerte
de que el ancho
era exactamente el mismo
pero bueno
pues más o menos igual
¿no?
es que no sé cuánto era
de brick
ah claro
es 30
y
30
y
a ver cuánto habíamos puesto aquí
30
y 14
bueno
pues sí
a ver queda bien
pero esto es porque
hemos tenido suerte
de que justamente
queda bien
o sea
porque ha quedado bien
y ya está
eso es porque hemos tenido
la suerte
de que ha quedado bien
le podríamos quedar el padding
para que justamente
se queden también
un poquito más cerquita
a ver
vamos a quitarle el padding
vamos a quitarle el padding
para que queden más juntos
y creo
creo que en la imagen
la propia imagen
si le ponemos a
un
hostia
porque en este ahora
de repente
ahora
porque si no me equivoco
si no me equivoco
ya tienen justamente
la
ya tienen el padding ellos
¿sabes?
o sea
ya tienen la sombrita
ya tienen la sombrita
pues quedaría así
¿vale?
32, 16
que así creo que sí que
ahora utilizando la imagen y tal
ya lo tendríamos perfectamente
estas sombritas salen
de que la propia imagen
tiene la sombrita
que está hecha justamente igual
y ya está
y entonces ya
pues es como una especie
de padding que ya tienen
entre ellos
no imagino profesor
que reprobó
reprobó en programación
a mi
no pero yo me lo merecía
me merecía
reprobar
o sea las cosas como son
no tenía ni puñetera idea
o sea
no es mala idea
tienes 10 imágenes
en random
no habría que poner
por 11
lo hemos explicado antes
Fuzzy
lo hemos explicado
que estar atento
clase
estas dos
son bricks
que no son rompibles
no tiene sentido utilizarlas
porque fíjate
que el diseño es diferente
entonces
es que son bricks
que no se rompen
los podéis utilizar
más adelante si queréis
ya lo tendrías
ya lo tendrías
vale
vale
pues más o menos
ahí lo tenemos
vale
luego si no
pues lo podéis ajustar
y ya está
vamos con las
con las colisiones
que está
que está interesante
vamos con las colisiones
collision detection
este es el último
que nos queda
vale
pero fijaos una cosa
que me hace
o sea que quiero
que lo tengan muy claro
fijaos como
hemos empezado
hoy
con esto
con una función
draw
que tenía
siete métodos
y que estaban
todos los siete métodos
estaban vacíos
y lo hemos ido
haciendo el juego
poco a poco
con dibujando
la pelota
dibujando el padel
los bricks
hemos
la detección
del movimiento
de la pelota
de la detección
del movimiento
o sea
fijaos
como justamente
hemos podido hacer
poco a poco
esto
así que
y esto lo podéis hacer
con cualquier juego
porque así funciona
todo el juego
si hacéis el snake
y ahora
habéis hecho esto
y hacéis el snake
lo vais a hacer así
y vais a entender
que es mucho más fácil
de como lo tenéis en la cabeza
vais a ver
que no os cuesta tanto
porque ya lo vais a tener
totalmente
como un esquema mental
de como hacerlo
entonces vamos a
collision detection
que es el único
que nos queda
de nuevo
collision detection
pues claro
tenemos que
hacer otra vez
revisar
pues todos los bricks
de todos los bricks
que tenemos que revisar
uno
pues nada
aquí sería otra vez lo mismo
tenemos que revisar esto
tenemos que recuperar
el brick
que estamos revisando
y si está destruido
pues nada
si está destruido
no lo revisamos
tenemos que continuar
sería exactamente
lo mismo esto
y ahora
aquí sí que tenemos
que hacer una cosa
pues un poco
más complicada
porque por ejemplo
tenemos que mirar
tendríamos que mirar
si la pelota
le está dando
esto sería más parecido
al paddle
os acordáis que en el paddle
aquí
en la paleta
hemos hecho
mirar todo el eje
de la X
esto
si la pelota
estaba
todo el eje
de la X
esto
pues sería exactamente
lo mismo
pero ahora
lo tenemos que hacer
también en el eje
de la Y
vale
tenemos que mirar
is ball
same X
as brick
vale
esto sería uno
para ver si está
en el mismo
del brick
entonces miramos
la X
que es la pelota
vale
pero en lugar
del paddle
pues aquí
miramos
el current
brick
X
y el current
brick
X
y en lugar
del paddle
width
pues lo que
tenemos que mirar
es el ancho
del ladrillo
y aquí lo mismo
pero con la Y
vale
sería exactamente
lo mismo
pero con la Y
y en lugar
de utilizar
el ancho
pues sería la altura
y aquí ya diríamos
oye
si la pelota
está
en la misma
posición de la X
del ladrillo
y además
también
está
en la misma
superficie
de la Y
pues es que
obviamente
han tenido
una colisión
vale
ya lo teníamos aquí
y tenemos que hacer
dos cositas
vale
tenemos que hacer
dos cositas
const declaration
solo puede ser
¿qué pone ahí?
solo puede ser
declarado
dentro de un bloque
ah porque se me ha olvidado
aquí el continuo
perdón
ya está
vale
esto lo ponemos por aquí
vale
entonces
si está en eje
de la X
y está
mira ya
es que ya está funcionando
esto
ya está funcionando
entonces lo que hacemos
es cambiar
la dirección
de la pelota
en el eje vertical
hostia que bonito
dios
en el eje vertical
y además
le decimos
que el brick
está roto
ay que bonito
ha sido eso
dios mío
que bonito
ha sido eso
dios
me ha traído
muchos recuerdos
ver eso
me ha traído
muchos recuerdos
ver eso
vale
a ver
podría ajustarse
algunas cosas
por ejemplo
tener en cuenta
también el radio
de la pelota
porque claro
el radio
de la pelota
también
puede
puede marcar
la diferencia
y a lo mejor
podemos ver algún
back
justamente por eso
por el radio
de la pelota
pero fijaos
que nada
ya tenemos
el juego
funcionando
perfectamente
aquí
y bueno
perfectamente
hay alguna cosa
rara
pero yo creo
que es eso
el radio
de la pelota
ves
el radio
de la pelota
a veces
hay que tenerlo
en cuenta
porque si no
se puede colar
ahí justo
en una esquinita
y puede hacer
alguna cosa
rara
pero bueno
aún así
creo que está
bastante
bastante
bastante chulo
bastante chulo
la verdad
que está bastante bien
se quedaba jugando
de repente
si perdón
perdón
perdón
perdón
hostia
ahí se le ha ido
la olla
se le ha ido
la olla
ahí no
ahí se le ha ido
se le ha ido
un poco la olla
me parece
se le ha ido
por abajo
se le ha ido
la olla
bueno
mira ahí
ahí
ahí se le ha ido
la olla
a ver
tenemos que ajustar
alguna
a ver
si soy capaz
de volver a ponerlo
del todo
no
creo que
tendría que morir
antes
a lo mejor
sabes
porque creo que le da
demasiado tiempo ahí
y se puede quedar
picueto
si
en el cálculo
de la pala
pero bueno
si
exacto
es como los juegos
es como los juegos
que hay que
es como los juegos
que hay que ponerlo
con el parche 1
del día 1
y ya está
que bueno
esto se queda subido
si hombre
esto se queda subido
lo importante amigos
es que ya tenemos
segundo proyectazo
que hemos hecho
además lo podéis hacer
lo podéis configurar
aquí tenéis un montón de cosas
os dejo un montón de cositas
para que os lo dejo
primero
lo voy a publicar
vale
add arcanoid game
para que lo tengáis
con todo el código
con las imágenes
y todo esto
vale
la he liado parda
porque no me traía
los cambios antes
vamos a ver
que esto no me dé
muchos problemas
hacemos el push
si me queréis ayudar
con este proyecto
y con otros
pues que sepáis
que podéis ir
al repositorio
podéis ir al repositorio
y dejar vuestra estrellita
vuestra estrellita
pues ayuda un montón
entonces dejáis
una estrellita
y nada
a ver si llegamos
a 10.000 estrellitas
y ahí lo tendríais
entonces
dejáis una estrellita
aquí tenéis
el código
de los dos proyectos
que hemos hecho
luego subiré esto
aquí también
porque fijaos
que también tenemos
una página web
donde vais a poder ver
todos los proyectos
que estamos haciendo
por ejemplo
aquí en web
mirad
si aquí en web
me voy
aquí a const
pues aquí ya podemos añadir
y además
le voy añadiendo también
el vídeo de youtube
cuando lo subamos a youtube
y todo esto
pues lo tendréis también
en el vídeo de youtube
aquí vamos a poner ya
el arcanoid game
vale
arcanoid game
aquí describimos
describe
pues el juego
juego mítico
y clásico
de arcanoid
para controlar
con teclado
vale
pues que hemos aprendido
aquí
hemos aprendido
el canvas context
canvas
o dibujar en canvas
dibujar
en canvas
que hemos aprendido
también
eventos de teclado
es verdad
eventos de teclado
también hemos hecho
el request
request animation frame
hemos aprendido
sprites
vale
vídeo de youtube
todavía no tenemos
vale
pero lo tenemos pronto
a new project
añadimos el nuevo proyectito
me faltará la imagen
por desgracia
me faltará la imagen
pero bueno
la imagen la estoy haciendo
con el shots.show
esta
así que podemos hacer
algo así
si esto lo abrimos
en una página
más o menos
a ver
algo
ah mira
puedo cargar justo esto
algo así
cargamos esto aquí
esto le vamos a poner
que sea 16,9
16,9
oye porque
aquí
vale
16,9
y le vamos a poner
a ver que estilo
que estilo le puse a este
así como
rojito y tal
o sea que tendría que ser más
no sé
un azul
un azulito
¿no?
un azulito
este es demasiado azulito
no sé
este se ve bonito
y no sé
no sé si ponerlo así
separado o algo así
¿cómo os parece?
¿cómo os gusta?
¿cuál os gusta más?
¿cómo os gusta?
con mucha
menos sombra ¿no?
menos sombra
normal
¿me gusta más normal?
bueno pues normal
básicamente para que no se
salga de
qué chulo
cómo se juega eso
ay
se ha recortado ahí
cago en la leche
bueno no pasa nada
ya está
lo dejamos ahí
ah mira
lo podemos poner
rollo retro
rollo retro este
rollo retro
me parece
va
vamos a intentar
el rollo retro
lo descargamos
tu tu tu
squash
lo optimizamos
vale
no hace falta
que sea tan grande
vamos a poner
que sea webp
vale
aquí veis un poquito
vamos a poner
también que resize
vamos a poner
que sea
1000
no sé cuánto
cuánto pillamos
aquí las imágenes
public projects
tinder
01
a ver
cuánto es
1200
vale
perfecto
descargamos
02
02
projects
02
vale
y al final
cdweb
pnpm run
que tengo aquí
un prepare
que me copia los proyectos
y ahora ya con esto
se supone
add new project
que ya lo deberíamos tener
y que ahora en un ratito
deberíamos ver aquí la imagen
ahora no está
no está bien la imagen
pero en un ratito
debería aparecer aquí la imagen
vale
y ya lo tendríamos
a ver si aparece
pues esto es el arcanoid
que hemos hecho
nos faltaría también cargar
por ejemplo
el sprite
a lo mejor
del
de la pelotita
estaría bien cargar
el sprite
de la pelotita
vale
a ver
pero bueno
dentro que cabe
para como lo hemos hecho
en un solo fichero y tal
cargar los sprites
y eso
pues ha quedado bastante fino
mientras lo hemos explicado
y tal
y mira os he hecho aquí
unos croquis y todo
o sea que nada
espero que os haya gustado
ahí tenéis
el segundo
cuando tengamos el vídeo
de youtube
pues lo pondremos aquí
fijaos que el de tinderswipe
si le dais aquí
os aparece el vídeo de youtube
que no habéis contado nada
no me habéis dicho nada
de la portada
pero que sepáis
que en la portada
de este vídeo de youtube
aparece
feralp
nuestro moderador favorito
que lo sepáis
tenéis el código
y la demo
y de este
se supone que también
veis
también tenéis la demo
este caso
no sé si es que
se ve así de pequeñito
pero bueno
ahí tenéis la demo
igual lo centro
que ha quedado un poquito
menos centrado
de lo que debería
así que ahí lo
ah también aparece
contigo
hostia no había dado cuenta
no había dado cuenta
si os va súper rápido
seguramente es por los hercios
pero eso también se puede arreglar
se podría calcular
los hercios
y dependiendo de los hercios
que se mueva de una forma u otra
pensad que va más rápido
porque justamente
como tenéis más frames por segundo
la velocidad sería el doble
entonces sería por ahí
un poco la idea
pero se puede ajustar
se puede ajustar la velocidad
dependiendo de los frames por segundo
no hay ningún problema
nosotros no hemos hecho
al final por
por un número fijo
pero se podría ajustar