Entradas

5-Protagonista

Imagen
  Flujo del programa Al cargar la página, se ejecuta inicializa() . inicializa() : Configura el lienzo. Carga la imagen del protagonista. Establece un bucle con setInterval que llama a principal() 50 veces por segundo. En cada llamada a principal() : Se limpia el canvas con borraCanvas() . Se dibujan y actualizan las posiciones de los personajes ( per1 , per2 , per3 ). Se dibuja al protagonista ( prota ) en su posición actual. Resultado esperado Tres cuadrados amarillos se mueven horizontalmente dentro del canvas, rebotando entre los límites izquierdo ( x > 50 ) y derecho ( x < 400 ). Una imagen ( img/mega.jpg ) estática, que representa al protagonista, se dibuja en (200, 200) en cada frame. Por ahora, el protagonista no tiene movimiento ni interacción, pero está preparado para ser extendido con lógica adicional, como teclas para moverse. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta h...
Publicar un comentario
Leer más

4-Mover-personaje

Imagen
  Flujo del programa Al cargar la página, se ejecuta inicializa() gracias al atributo onload del <body> . inicializa() configura el canvas y define un bucle de actualización usando setInterval . La función principal() se ejecuta 50 veces por segundo: Limpia el canvas. Dibuja los tres personajes. Actualiza sus posiciones según sus velocidades y direcciones. Los personajes se mueven horizontalmente de un lado a otro, cambiando de dirección al alcanzar los bordes definidos ( 50 a 400 en el eje X). Resultado: Tres cuadrados amarillos que se mueven horizontalmente a diferentes velocidades, rebotando entre los límites del canvas. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </titl...
Publicar un comentario
Leer más

3-1-Personajes

Imagen
 El código está diseñado para dibujar personajes en un lienzo ( canvas ), pero actualmente no tienen movimiento porque no se está actualizando la posición de los personajes en cada frame. Solución: Hacer que los personajes se muevan Para que los personajes se muevan, debes modificar sus coordenadas ( x o y ) dentro de la función principal() en cada iteración del bucle que setInterval ejecuta. Esto se logra simplemente alterando las propiedades this.x o this.y de los objetos creados con la función personaje . <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Document </title>             </head> <body onload = " inicializa ()" >     <canvas id = "canvas...
Publicar un comentario
Leer más

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Publicar un comentario
Leer más

1-Teclas

Imagen
En este codigo implementamos tres funciones para capturar los eventos del teclado. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Ejemplo de Keypress.js </title> </head> <body>     <script src = "https://cdn.jsdelivr.net/npm/keypress.js@2.1.5/keypress.js" ></script>     <script>         // Configuración del teclado         var configTeclado = { prevent_repeat : true };         var eventoTeclado = new window . keypress . Listener ( this , configTeclado );         // Funciones asociadas a las combinaciones         function pulsaA () {             console . log ( 'has pulsado a' );         } ...
Publicar un comentario
Leer más

3-Objetos

  var personaje = function ( x , y , nombre ) {     this . x = 0 ;     this . y = 0 ;     this . nombre = nombre ;     //METODO ABAJO     this . abajo = function () {         this . y += 10 ;     }     //METODO HABLAR     this . hablar = function () {         console . log ( 'hola amigo , me llamo: ' + this . nombre );     } } var personaje1 = new personaje ( 10 , 100 , 'luis' ); var personaje2 = new personaje ( 30 , 300 , 'maria' );
Publicar un comentario
Leer más

1-OBJETOS EN JAVASCRIPT

Imagen
  Objetos de la vida real En la vida real,  los objetos  son cosas como: casas, autos, personas, animales o cualquier otro tema. A continuación se muestra un ejemplo  de objeto de automóvil  : Propiedades del objeto Un coche real tiene  propiedades  como el peso y el color: coche.nombre = Fiat, coche.modelo = 500, coche.peso = 850kg, coche.color = blanco. Los objetos de automóvil tienen las mismas  propiedades  , pero los  valores  difieren de un automóvil a otro. Métodos de objeto Un coche real tiene  métodos  como arrancar y parar: coche.arranque(), coche.conducción(), coche.freno(), coche.parada(). Los objetos de automóvil tienen los mismos  métodos  , pero éstos se ejecutan  en momentos diferentes  . Variables de JavaScript Las variables de JavaScript son contenedores de valores de datos. Este código asigna un  valor simple  (Fiat) a una  variable  llamada coche: https://www.w3sc...
Publicar un comentario
Leer más