Ray casting HTML5 con JavaScript (Parte1) ¡Clonamos Wolfenstein 3D!
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- ¿Quieres crear tu propio clon de Wolfenstein 3D usando HTML5 y JavaScript? En este primer programa te muestro paso a paso cómo:
1- Crear el mapa.
2- Mover al jugador por pantalla girando en distintos ángulos.
3- Detectar colisiones con las paredes.
4- Normalizar el ángulo de giro.
🎮 ¿Quieres más? Aprende a programar tus primeros juegos HTML5 paso a paso y desde cero con mi curso de Udemy
👉 www.udemy.com/...
Basado en el motor creado por Gustavo Pezzi: github.com/gus...
![PURPEECH - นี่ฉันเองคนที่... (It's me) [Official MV]](http://i.ytimg.com/vi/NuhHd0hOOg8/mqdefault.jpg)
Nose porque pocos like. Si este video tiene buen conocimiento. Trarare de compartirlo por face.
¡Muchas gracias Mr Robot! El canal es nuevo y lo conoce poca gente, así que es normal. Infinitas gracias por tu comentario, me alegra mucho que te esté gustando el contenido y quieras compartirlo. Espero que poco a poco vaya creciendo esta pequeña comunidad y podamos hacer cosas chulísimas ¡Un abrazo! :D
@@javianmuniz muchas gracias por tus vídeos
Programar = otro mundo.
Es como correr bien. En un dia te pueden explicar toda la teoria, pero requiere practica >:|. Que te quedes buscando soluciones y tratando de imitar lo que ves. Para despues tratar de entenderlo °-° Perdon si, si sabias programar >'C
Totalmente... te abre un mundo de posibilidades, sin duda ^_^
@@danielesquivel3155 como todo en esta vida, es práctica. Muy buen apunte, Dani ;)
¡Te agradezco mucho el que compartas todo este conocimiento! mereces muchos más likes!!
Sabes un montón! Por ahora voy bien me funciona, gracias por compartir todo lo que sabes.
Porque este canal no tiene más Views y suscriptores? :')
¡Muchas gracias Jhonatan! Te lo agradezco mucho, amigo ^_^ El canal tiene unos 7 meses y dentro del primer año es muy difícil crecer. Además hay pocos vídeos y la temática es muy específica, por lo que es posible que no crezca muchísimo, pero estoy seguro de que los que estáis aquí, vais a disfrutar mucho de todo lo que viene y vais a hacer muy grande a esta comunidad ¡Mil gracias, amigo mío! :D
Es que me dieron ganas de comentarte un video. Lo haria con los otros pero no lo eh visto :)
¡Gracias Dani! :)
Hola Javier, esperando el próximo video, está súper interesante el juego y por lo que me suscribi a tu canal que fue conocer la lógica de la programación de juegos, me cuesta un poco entender lo del movimiento del jugador y el giro así que voy a ver nuevamente el video a ver cómo me va... Quizás sea bueno que hagas un video corto explicando esto para los que no entendemos aún, ya que creo que es parte fundamental de los juegos
Saludos desde Venezuela
¡Hola Dirk! Muchísimas gracias por tu comentario, me alegra mucho que te esté gustando la serie :D
Te comprendo, me estoy planteando el hacer algún vídeo resumiendo la parte matemática o crear algún documento descargable, con dibujos, a modo de guía. Le daré una vuelta a la idea ¡Muchas gracias por la sugerencia!
¡Un saludo muy grande para Venezuela desde España! :D
@@javianmuniz como tu dices.... La importancia de saber explicar las matemáticas (que a mi me gustan...) o trigonometría (que no me gustan), una forma de hacerlo es con su utilidad en la programación de juegos.
@@dirkrincon así es, además la trigonometría tiene una importancia enorme a la hora de crear gráficos 2D y 3D :)
Uff tremendo. Wolfestein que recuerdos 🎉🎉🎉🎉🎉
Muy buen video, explicas muy bien cómo hacer cada cosa :D
¡Muchas gracias Manuel! Me alegra que se vaya entendiendo ^_^ ¡Un saludo, crack! :D
Muy buenos tus videos como siempre. 😃
¡Muchas gracias Judy! Me alegra mucho que te haya gustado :D
Bárbaro, que buen tutorial. gracias!
¡De nada Starcodex! Me alegra muchísimo que te haya gustado :D
no sabia que tenia canal de TH-cam, buen señor 😩
Siendo franco y objetivo. Este tutorial es muy bueno, eh tomado varios cursos de juegos en JavaScript y todos saltan de una ves a usar herramientas como phaser y no indagan realmente ni explican los conceptos, pero este tutorial te muestra como hacer las cosas tu mismo y es algo que es muy valioso a la hora de aprender, le dare un vistazo al curso de udemy a ver si es igual o mejor.
¡Gracias Jan! Te lo agradezco mucho. Te acabo de hacer un cupón para matricularte gratis del curso de Udemy ¡Que lo disfrutes! ^_^ www.udemy.com/course/programa-tus-primeros-juegos-html5-con-javascript/?couponCode=4674064D19FAB5999C57
@@javianmuniz Muchas gracias lo aprecio mucho! :)
Muy bueno ver las utilidades de las funciones matemáticas en javascript (y lo mejor es que es js nativo,porque si lo enseñas con frameworks, plugins o librerías ajenas al final no se aprende realmente...), yo para mi jueguito necesitaba hacer el movimiento parabólico, y con dos líneas de código que pude reutilizar de un ejemplo que vi en internet lo resolví, yo como no sé de matemática básica pues estaba condenado a resolverlo usando 500 IF, ELSE y seguro no hubiera quedado bien, ni óptimo, obvio... pero bueno (? pd: muy buen tutorial, gracias por subir videos de javascript orientado a crear juegos.
¡Muchísimas gracias, Booyeah! Me alegra que hayas entendido tan bien el propósito de mi canal, que al final es ese: aprender realmente a programar, ya que los frameworks están muy bien, son geniales, pero la base al final te la da el comprender todo esto. ¡Qué bueno que hayas podido responder tu problema por ti mismo, bravo! :D
Una chulada de video, lo unico que me tube que ir a estudiar matematicas para al fin entender que estamos hablando de una circunferencia trigonometrica donde r=1, pero lo demas con el nivel principiante de JS salio super fluido, me encata la serie y si la vere y practicare toda. Gracias yo se que compartir todo este conocimiento vale oro.
Omg madre mia, lo que me eh perdido. Solo por dormir todo el dia. Ahora me hago la autommorision. Lo siento javi :'c
Je je je no era un directo, Daniel, no te has perdido nada, tranquilo ¡Un abrazo, compañero! ;)
me super sirve para poner en practica lo que estoy estudiando, muchas gracias!!!
Excelente curso
Visto en 19/10/2021
Buen vídeo , solo como tip usa el navegador en modo inconicto ,a si no guarda cache, es un horror que guarde el js en el cache y uno sufriendo jeje.
Buena idea! Gracias por el tip, amigo :)
😮 wow
Muy buen video, se agradece la forma en la que compartes el conocimiento, en este caso introduciendonos a esta maravillosa tecnología con su historia y ejemplos de una forma tan clara y facil de entender, desde ya muchisimas gracias
un crack
eres un duro
Excelente....
heres muy bueno programando :D
Utiliza el plug-in Emmet
Gracias Luis! Le echaré un ojo
;:| Tarde mucho. Mas de lo que pense. Ahora tengo que bañarme :'u
Bueno, nunca es tarde :)
por cierto muy buen canal :D
Mil gracias Axel! Me alegra un montón que te esté gustando el contenido del canal! Un abrazo crack!
hola buenas tardes en el momento en que inicio el archivo en chrome me da estos dos errores
Uncaught SyntaxError: Unexpected identifier
Uncaught ReferenceError: inicializa is not defined at onload
lo he intentado solucionar varias veces pero no lo consiguo alguien sabe que podria hacer???
Qué raro. A ver si a alguien más le pasa, a mi me funciona bien.
Arg... Javi no pudes crear una clase keyboard. Y meter la teclas pulsadas en un array y cuando una no se pulse quitarla del array. Emm Eigo buen video ;:D
Sería otra opción :) buen apunte
Puedes resubir a este canal los vídeos que enseñas a programar de tu canal principal?
¡Hola FurArio! La verdad es que no creo que fuese buena idea. Prefiero volver a tocar esos temas más adelante y grabar los vídeos con mayor calidad. Ahora tengo un mejor estudio y PC y quiero aprovecharlo para que el contenido sea excelente :) Pero mil gracias por tu interés, te lo agradezco mucho. Me seguiré esforzando para que el contenido sea el mejor posible :D
Hola Javier, por favor si me das consejos de como hacer historias Utopicas y Distopicas gracias
¡Hola cococañón! En este canal no voy a tratar esos temas, lo lamento. Creo que en mi otro canal tengo algunos vídeos en los que traté esos temas, de todas formas, por si les quieres echar un vistazo ¡Un saludo y mucho ánimo! :)
hola Javier, viendo los videos por 2da vez y con algo mas de claridad me surgen varias dudas, en el minuto 40:16 creas 2 metodos, avanzaSuelta y giraSuelta y lo unico que hacen es cambiar el valor de las variables que nos indican si el jugador se mueve y si gira, mi duda es por que no haces esos cambios directamente en el Switch del AddEventListener?
A proposito de las variables que usas... tengo Otra duda y es... puedo manejar el avance del jugador modificando directamente velMovimiento y colocando el valor que debe avanzar (3 px) cuando está en movimiento (cuando se pulsa la tecla que corresponde) o asignando cero (0) cuando suelto la tecla? es decir... el jugador siempre estaría avanzando pero dependería del valor de velMovimiento la cantidad a avanzar... No sé so lo haces así porque la metodologia Ray Casting lo pide o simplemente es el estilo de programación....
Otra duda, en 48:48 actualizas anguloRotacion, no deberias actuazliar primero el angulo antes de calcular las nuevas coordenadas?
Salu2 desde Vzla
Mientras estaba sus tierras el rey javi, vio que caia algo muy sensual. Su nombre era Darth vader. Y vader se redimira, por haber abandonado el canal. Darth vader, huuuu. :v
Edit: Pero que te gute ;3
Je je je muy currado el comentario 👏👏 ¡Gracias Darth Vader! Espero que te guste el tutorial 😎
@@javianmuniz ;'3
¿como elegimos donde queremos que aparezca el jugador esque con el mapa que he hecho no sale donde quiero??
Tendrás que cambiar los atributos "X" e "Y" del objeto personaje. Así te saldrá en el pixel exacto.
messirvio
Ya entiendo por que los ordenadores usan radianes. Es mas sencillo ;3
Genial :)
Me están entrando errores y como casi no se de programacion no se como solucionarlos😟
¡Hola Jesús! Entonces si no tienes experiencia programando, este tutorial es muy avanzado para ti. Te recomiendo que empieces por algo más sencillo ahora al principio.
Ok
Asi como crítica constructiva a mi ver que un video dura 1 hora me quira las ganas de verlo aunque tambien es verdad k es dificil separarlo pork siempre hablas de lo mismo y eso. Pero vamos que el canal mola mucho y ademas no muchos tutorial de juegos "complejos" en youtube buen trabajo
Pd. 5:20 porque estas mirando tanto para la derecha? Xd
¡Hola Pablo! Ya, te comprendo, aún estoy meditando el tema de la duración de los tutoriales, y buscando el equilibrio. Para esta serie creo que harán falta unas 5 horas de tutorial en total y cotar cada 20 o 30 minutos y hacer entre 15 y 10 vídeos para esta serie me parecía demasiado. Mi idea es que los tutos queden perfectamente claros y que encontréis aquí en este canal información que no encontraréis en otro lugar, ni por temática ni por bien explicada ¡Ese es mi objetivo! :)
Muchas gracias por el feedback, créeme que lo tendré muy en cuenta y es posible que para otras series pruebe a acortar un poco el tiempo a ver qué tal ¡Gracias, crack!
¡Ahhh sí! es algo temporal lo de los giros... no tengo un 2º monitor aún (estoy actualizando mi setup y comprando algunas cosas para mejorar la grabaciones) y uso el PC de mi padre como segunda pantalla y tengo que girar la cabeza un poco de más para consultar el código e ir rápido je je ¡Bien visto! Espero corregirlo en las próximas semanas :)
Bueno empezae de vuelta xd.
¡Paciencia, Dani! Poco a poco :)
entendi practicamente todo (explicaste bastante claro), solo tengo una parte que no entendi del todo bien y es esta parte:
//Normalizacion de Angulo
function Normalizacion(angulo){
angulo = angulo % (2 * Math.PI);
if(angulo < 0){
angulo = angulo + (2 * Math.PI);
}
//console.log(angulo);
return angulo;
}
para que sirve concretamente esta funcion? Para que en vez de contar cuantas vueltas dá el jugador, resetee el angulo o algo así
GRACIAS!
Están buenos tus videos, pero tendrías menos errores si fueses mas ordenado. Por ejemplo en vez de hacer el escenario y el jugador en el mismo archivo yo los hubiese hecho en archivos separados para evitar errores. Es solo un consejo
Totalmente. Es una de mis asignaturas pendientes.
que tal Javi, soy nuevo en esto del js estoy realizando al pie de la letra tu tutorial pero no me dibuja los cuadros del mapa, en mi console no tengo ningún error al momento de invocarlo, ¿sabes cual pudiera ser el motivo para que el canvas en blanco...?
ya encontre mi error gracias :)
@@alejandrovalenzuelasilerio5285 OK, qué bueno :)
Hola necesito saber que haces en el minuto 3:58 con los 3 puntitos los borras o que hacer me porque luego no me canvia de tamaño el canvas
hola amigo saludo de argentina córdoba. consulta en mi js en el código switch(tecla.keyCode) me tacha el keyCode y me dice que esta en desuso en las 2 líneas y no se si es esto que genera el error pero el jugador gira pero solo se mueve en una sola lineal ejemplo arriba y abajo para que todo sea mucho mas claro mi problema es que hace solo ese movimiento del minuto 43:22 a 43:29 y ya me fije en los valores y cual tecla metes mayúscula y minúscula tampoco me deja usar console.log para keyCode por que me lo tacha y no aparece nada en la consola y tampoco me salta ningún tipo de error. desde ya gracias saludo
no se mucho de javascript, en esto :
this.altoM = this.matriz.length;
this.anchoM = this.matriz[0].length;
me da error :C dice Cannot read property 'length' of undefined
El error indica que la matriz no tiene esa posición de memoria. Habría que analizar el resto del código.
Puedes dejar el código completo. Porfavor 😢😢
hola llegue a la parte de l error de las teclas donde no detectaba la función arriba y demás, la pase por alto y luego llegue a la parte donde ya se empieza a mover el jugador pero ahora dice que anguloRotacion no esta especificado
es mas desapareció mi jugador solo queda el mapa y no c que mas hacer
hola tengo un problema, es que cuando cambio el tamaño del canvas y reinicio google no se cambia.Y me fije en el codigo y todo esta bien me ayudas
oye javier a mi me sale que inicializa no esta definido, si quieres te paso el code para que lo veas
ray casting
#canvas1{
border: 2px solid #000000;
}
var canvas;
var ctx;
var FPS = 50;
//dimensiones para el canvas en pixeles
var canvasAncho = 500;
var canvasAlto = 500;
function inicializa(){
canvas = document.getElementById("canvas1");
ctx = canvas.getContext("2d");
//modificar el tamano del canvas
canvas.width = canvasAncho;
canvas.height = canvasAlto;
//incio del bucle principal del juego en js
setInterval(function(){principal();}1000/FPS);
}
function principal(){
console.log("fotograma");
}
Tengo una duda: cual o que es la carpeta que utilizas no me sale nada cuando abro el html
Cual es el script que utilizas digo
Matematicos en el 26:05 ... Calla y sigue con el tutorial. Ok no jaja
Ja ja ja ja (Sheldon Cooper abandonó el vídeo) xD
@@javianmuniz me estaba viendo big bang theory xd
@@furario-creadordemundos8506 ja ja ja me encanta :P
@@javianmuniz yo ya me aburri de la serie
umma
english plz
Thank you so much, Michael! I'm thinking seriously to make a secondary channel, just in english, with the same content 😁
@ that would be great!
@@MichaelDavydoff Thanks! I really appreciate that :D