6-Protagonista-movimientos

Implementando movimientos al protagonista


 <!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("actor")
var canvas;
var ctx;
var FPS = 50;

var imgMega;

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

    imgMega = new Image();
    imgMega.src = 'img/mega.jpg';

    imgMega.width=100;
    imgMega.height=100;
 
    setInterval(function () {
      principal();
    }, 1000 / FPS); // Corrección aquí
  }

var protagonista = function (x,y){
  this.x = x;
  this.y = y;
  this.velocidad = 3;

  this.dibuja = function (){
    ctx.drawImage(imgMega, this.x, this.y);
  }

  this.arriba = function(){
    this.y -= this.velocidad;
  }

  this.abajo = function(){
    this.y += this.velocidad;
  }

  this.izquierda = function(){
    this.x -= this.velocidad;
  }

  this.derecha = function (){
    this.x += this.velocidad;
  }

}

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;
      }
    }
  };
};



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

var prota = new protagonista(200,200);

document.addEventListener('keydown', function (tecla){
    console.log(tecla.keyCode);
    //arriba
    if(tecla.keyCode == 38){
        prota.arriba();
    }
    //abajo
    if(tecla.keyCode == 40){
        prota.abajo();
    }
    //izquierda
    if(tecla.keyCode == 37){
        prota.izquierda();
    }
    //derecha
    if(tecla.keyCode == 39){
        prota.derecha();
    }
});

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);

  prota.dibuja();

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