4-Mover-personaje

 

Flujo del programa

  1. Al cargar la página, se ejecuta inicializa() gracias al atributo onload del <body>.
  2. inicializa() configura el canvas y define un bucle de actualización usando setInterval.
  3. 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.
  4. 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</title>
   

   
   
</head>
<body onload="inicializa()">


    <canvas id="canvas" width="500" height="300" style="border:2px solid #000000">
    </canvas>


    <script>
console.log("moverpersonaje")
var canvas;
var ctx;
var FPS = 50;
console.log("FPS", FPS);
console.log("hola");

var personaje = function (x, y) {
  this.x = x;
  this.y = y;
  this.derecha = true;

  this.dibuja = function () {
    ctx.fillStyle = "#fff000";
    ctx.fillRect(this.x, this.y, 50, 50);
  };
 
  this.mueve = function (velocidad) {
    if (this.derecha == true) {
      if (this.x < 400) {
        this.x += velocidad;
      } else {
        this.derecha = false;
      }
    } else {
      if (this.x > 50) {
        this.x -= velocidad;
      } else {
        this.derecha = true;
      }
    }
  };
};

function inicializa() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  setInterval(function () {
    principal();
  }, 1000 / FPS); // Corrección aquí
}

var per1 = new personaje(10, 50);
var per2 = new personaje(10, 120);
var per3 = new personaje(10, 230);

function borraCanvas() {
  canvas.width = 500;
  canvas.height = 400;
}

function principal() {
  borraCanvas();
  per1.dibuja();
  per2.dibuja();
  per3.dibuja();

  per1.mueve(1);
  per2.mueve(3);
  per3.mueve(70);

 // console.log("funcion");
}



    </script>  
   
</body>
</html>

Comentarios

Publicar un comentario

Entradas populares de este blog

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' );         } ...
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 ...
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...
Leer más