javascript-juego-uno

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Protagonista y Disparos con Barra de Vida </ title > </ head > < body onload = " inicializa()" >     < canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></ canvas > < script > let canvas, ctx; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image(); imgMega.src = 'img/mega.jpeg' ; // Inicialización function inicializa() {     canvas = document.getElementById( "canvas" );     ctx = canvas.getContext( "2d" );     setInterval(principal, 1000 / FPS); } // Clase Protagonista class Protagonista {     constructor (x, y) {         this .x = x;       ...

  Personaje - Explicación de Código HTML/JavaScript Explicación del Código Este código crea una animación simple de un rectángulo amarillo (nuestro "personaje") que se mueve horizontalmente por un canvas, cambiando de dirección cuando llega a los bordes. Estructura básica HTML html <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Rectángulo Amarillo Móvil </ title > </ head > < body onload = " inicializa() " > < canvas id = " canvas " width = " 500 " height = " 300 " style = " border : 2px solid #000 " > </ canvas > Define un documento HTML5 básico Crea un elemento canvas de 500x300 píxeles con borde negro Llama a la función  inicializa()  cuando la página termina de car...

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