javascript-juego-uno

  19 - Curso de Programación de Juegos HTML5 con JavaScript 📽  Miniatura de la clase ⏳ *13:02 / 18:17* ¡Hola devs! 👋 Bienvenidos a la  sesión #19  del curso. Hoy profundizamos en: 🔹  Arrays Bidimensionales (Tablas) ¿Recuerdan las listas (arrays) de una dimensión? Ahora escalamos a  2D : javascript let matriz = [ [ 0 , 1 , 2 , 3 ] , [ 4 , 5 , 6 , 7 ] , [ 8 , 9 , 0 , 1 ] ] ; 📌  ¿Cómo acceder?   matriz[fila][columna] . Ejemplo:  matriz[1][2]  →  6 . 🌍  Aplicación en Juegos Creamos un  tablero 5x5  para un escenario: 0 = Césped  (🟩) 1 = Agua  (🟦) 2 = Tierra  (🟫) javascript function dibujaEscenario ( ) { for ( let y = 0 ; y < 5 ; y ++ ) { for ( let x = 0 ; x < 5 ; x ++ ) { let color = escenario [ y ] [ x ] === 0 ? "#4CAF50" : escenario [ y ] [ x ] === 1 ? "#2196F3" : "#795548" ; ctx . fillStyle = c...

    18: Arrays (Listas) en JavaScript para Videojuegos ¡Muy buenas y bienvenidos a la  sesión 18  del curso de  Programación de Videojuegos HTML5 con JavaScript ! 🎮💻 ¿Qué veremos hoy? Trabajaremos con  arrays (o listas) , una herramienta esencial para gestionar múltiples elementos en nuestros juegos. 1. ¿Qué es un array? Un array es una  variable especial  que almacena múltiples elementos en compartimentos numerados (índices). Imagina una caja con divisiones: javascript let lista = [ ] ; // Array vacío let mochila = [ "espada" , "poción" , "armadura" , "flecha" ] ; // Array con datos Los índices empiezan en  0 : mochila[0]  → "espada" mochila[1]  → "poción" 2. Recorrer un Array Usamos bucles  for  para listar todos los elementos: javascript for ( let i = 0 ; i < mochila . length ; i ++ ) { console . log ( ` Índice ${ i } : ${ mochila [ i ] } ` ) ; } mochila.length  devuelve la cantidad de e...

    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 . ...