javascript-juego-uno

    17 del Curso de Programación de Videojuegos con JavaScript   🚀 📌  En esta clase: Solucionamos el error de pintado en rojo (¡era una "s" minúscula!). Creamos un  protagonista controlable con el teclado  usando imágenes (PNG con transparencia). Aprendimos a cargar imágenes en el  Canvas  y a mover el personaje con eventos de teclado (códigos 37-40). ¡Agregamos texto en pantalla! Mostramos las coordenadas del personaje en tiempo real. 🔧  Código clave: javascript // Cargar imagen (variable global) let imgRex = new Image ( ) ; imgRex . src = 'img/rex.png' ; // Dibujar imagen en Canvas ctx . drawImage ( imgRex , protagonista . x , protagonista . y ) ; // Movimiento con teclado document . addEventListener ( 'keydown' , function ( tecla ) { if ( tecla . keyCode === 38 ) protagonista . arriba ( ) ; // Arriba if ( tecla . keyCode === 40 ) protagonista . abajo ( ) ; // Abajo // ... (izquierda/derecha similar) } ...

    16: Introducción al Canvas en JavaScript ¡Muy buenas y bienvenidos a la  sesión #16  del curso de programación de videojuegos con  JavaScript ! 🎨  ¡Por fin llegamos al Canvas!  La parte donde empezaremos a dar vida gráfica a nuestro juego. Vamos a integrar todo lo aprendido:  objetos ,  lectura del teclado  y el  bucle principal del juego . Primeros pasos con el Canvas 1️⃣  Creación del Canvas : Recordamos cómo definirlo en HTML con un identificador, ancho ( 500px ), alto ( 400px ) y un borde para visualizarlo mejor: html < canvas id = " miCanvas " width = " 500 " height = " 400 " style = " border : 2px solid #000000 ; " > </ canvas > El Canvas es como un  lienzo  (¡literalmente!) donde dibujaremos nuestros elementos. 2️⃣  Configuración inicial en JavaScript : Para evitar errores, usamos el evento  onload  para asegurar que el Canvas esté cargado antes de ejecutar el código: javasc...

  Nueva Sesión del Curso de Programación de Videojuegos con JavaScript ¡Muy buenas y bienvenidos a una nueva sesión del curso! Hoy vamos a sumergirnos en un concepto clave:  los objetos y la programación orientada a objetos (POO) . ¿Por qué es tan útil? ¡Vamos a descubrirlo! 🔍  ¿Qué es un objeto? Hasta ahora trabajábamos con variables sueltas. Por ejemplo, si queríamos guardar la posición de un enemigo (coordenadas  x  e  y ), terminábamos con un montón de variables como  xEnemigo1 ,  yEnemigo1 ,  nombreEnemigo1 , etc. ¡Un caos! Los  objetos  resuelven esto: son estructuras que agrupan variables (llamadas  atributos ) y funciones (llamadas  métodos ) bajo un mismo "concepto". 🛠  Creando Nuestro Primer Objeto Vamos a crear un objeto  Personaje  como plantilla: javascript function Personaje ( x , y , nombre ) { this . x = x ; // Coordenada X this . y = y ; // Coordenada Y this . ...

    14: Trabajando con el Ratón en JavaScript ¡Muy buenas y bienvenidos a la  sesión número 14  del curso de programación de juegos con  JavaScript ! Hoy aprenderemos a  detectar la posición y las pulsaciones del ratón  dentro de nuestro juego. ¡Vamos a ello! 🖱️  El Canvas: Nuestro "lienzo" de juego Antes de empezar, recordemos qué es el  Canvas : Es como una  imagen dinámica  donde dibujaremos nuestros elementos (personajes, objetos, etc.). Podemos actualizarlo  cada fotograma  para crear animaciones. Será el  área visible  de nuestro juego (no toda la pantalla del navegador, solo la sección que definamos). 🛠️ Configuración básica del Canvas: html < canvas id = " miCanvas " width = " 500 " height = " 300 " > </ canvas > css <style> #miCanvas { border : 2px solid black ; /* Para visualizarlo mejor */ } </style> 📌 Nota: Sin estilos, el Canvas es "invisible", por eso le a...