Cargue y mueva diferentes imágenes con las flechas del teclado en JavaScript -- javascript campo con html campo con html5-canvas camp Relacionados El problema

Load and move different images with the keyboard arrows in JavaScript


0
vote

problema

Español

Lo que me gustaría hacer es lo siguiente:

  1. Cuando presiono la flecha izquierda, solo se dibuja Marioleft.
  2. Cuando se presiona la flecha derecha, solo se basa en Marioright.

El problema es que ambas imágenes se cargan al mismo tiempo, y también se mueven al mismo tiempo. Me gustaría que los 2 se muevan con la tecla derecha. ¿Qué está mal con mi código?

Pensé que debería poner una condición en la función de carga, pero no sé cómo hacerlo.

¿Qué tipo de condición debo usar? SELECT A.f1 A.f2 B.f1 C.f1 D.f1 from A LEFT JOIN (B INNER JOIN D on D.fk_b = B.id) on A.id = B.fk_a LEFT JOIN C on C.fk_b = B.id 4 , SELECT A.f1 A.f2 B.f1 C.f1 D.f1 from A LEFT JOIN (B INNER JOIN D on D.fk_b = B.id) on A.id = B.fk_a LEFT JOIN C on C.fk_b = B.id 5 , SELECT A.f1 A.f2 B.f1 C.f1 D.f1 from A LEFT JOIN (B INNER JOIN D on D.fk_b = B.id) on A.id = B.fk_a LEFT JOIN C on C.fk_b = B.id 6666666666666-- ¿Y cómo los uso?

  SELECT A.f1        A.f2        B.f1        C.f1        D.f1 from   A LEFT JOIN (B INNER JOIN D on D.fk_b = B.id) on A.id = B.fk_a          LEFT JOIN C on C.fk_b = B.id 7  
  SELECT A.f1        A.f2        B.f1        C.f1        D.f1 from   A LEFT JOIN (B INNER JOIN D on D.fk_b = B.id) on A.id = B.fk_a          LEFT JOIN C on C.fk_b = B.id 8  
Original en ingles

What I would like to to do is the following:

  1. When I press the left arrow only marioleft is drawn.
  2. When the right arrow is pressed it only draws marioright.

The problem is that both images are loaded at the same time, and they also move at the same time. I would like the 2 to move with the right key. What is wrong with my code?

I thought that I should put a condition on the load function, but I do not know how to do that.

What type of condition should I use? if (), if else, switch ... and how do I use them?

var vp = document.getElementById("villa_mario");  var paper = vp.getContext("2d");  document.addEventListener("keydown", moveMario);    var x = 250;  var y = 250;    var keys = {    UP: 38,    DOWN: 40,    LEFT: 37,    RIGHT: 39  };    var background = {    url: "tile.png",    loadOK: false  }    var marioright = {    url: "mario_right.png",    loadOK: false  }    var marioleft = {    url: "mario_left.png",    loadOK: false  }    background.imagen = new Image();  background.imagen.src = background.url;  background.imagen.addEventListener("load", loadBackground);    marioright.imagen = new Image();  marioright.imagen.src = marioright.url;  marioright.imagen.addEventListener("load", loadMarioright);    marioleft.imagen = new Image();  marioleft.imagen.src = marioleft.url;  marioleft.imagen.addEventListener("load", loadMarioleft);      function loadBackground()  {    background.loadOK = true    paint();  }    function loadMarioright()  {    marioright.loadOK = true    paint();  }    function loadMarioleft()  {    marioleft.loadOK = true    paint();  }        function paint()  {     if(background.loadOK)     {      paper.drawImage(background.imagen, 0, 0);     }       if(marioright.loadOK)      {        paper.drawImage(marioright.imagen, x, y);      }        if(marioleft.loadOK)      {        paper.drawImage(marioleft.imagen, x, y);      }  }    function moveMario(evento)  {    var movement = 5;    switch(evento.keyCode)    {      case keys.RIGHT:      loadMarioright(x, y, x + movement, y, paper);      x = x + movement;      break;      case keys.LEFT:      loadMarioleft(x, y, x - movement, y, paper);      x = x - movement;      break;      default:        console.log("other key");      break;    }  }
<!DOCTYPE html>  <html lang="en" dir="ltr">    <head>      <meta charset="utf-8">      <title>Villa Mario</title>    </head>    <body>      <canvas id="villa_mario" width="500" height="500">      </canvas>      <script src="mario.js"></script>    </body>  </html>
        

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

Tienes que establecer la variable False a 'Loadok'. Actualice las funciones de loadmarioright (), loadmarioleft () de la siguiente manera.

  function loadMarioright() {   marioright.loadOK = true;   marioleft.loadOK = false;   paint(); }  function loadMarioleft() {   marioleft.loadOK = true;   marioright.loadOK = false;   paint(); }   
 

You have to set false to 'loadOk' variable. Update the loadMarioright(),loadMarioleft() functions as follows.

function loadMarioright() {   marioright.loadOK = true;   marioleft.loadOK = false;   paint(); }  function loadMarioleft() {   marioleft.loadOK = true;   marioright.loadOK = false;   paint(); } 
 
 
0
 
vote

Ragu Bathi está justo en lo que necesita para alternar Loadok OFF para que lo cargue correctamente, pero sugeriría eliminar la complicación adicional de tener alternos en cada imagen forzándolo para que solo dibuje un Mario cada vez que pinte. La forma en que lo controlas esta vez es simplemente seleccionando qué imagen desea usar.

  SELECT   A.id AS `A_id`,   B.id AS `B_id`,   COALESCE(C.id, 0) AS `C_id`,   COALESCE(     (SELECT D.id FROM D WHERE D.fk_b = B.id LIMIT 1), 0   ) AS `D_id` FROM B INNER JOIN A ON (B.fk_a = A.id) LEFT JOIN C ON (B.id = C.fk_b); 0  
 

Ragu bathi is right in that you need to toggle loadOK off in order to make it load correctly, but I would suggest removing the extra complication of having toggles on every image by forcing it to only draw one Mario every time you paint. The way you control it this time is by just selecting which image you want to use.

var marioToDraw = marioright;  function paint() {     if(background.loadOK) {         paper.drawImage(background.imagen, 0, 0);     }      //draw the selected Mario     paper.drawImage(marioToDraw.imagen, x, y);  }  //inside the switch statement switch(evento.keyCode) {     case keys.RIGHT:           marioToDraw = marioright;         x = x + movement;         break;     case keys.LEFT:         marioToDraw = marioleft;         x = x - movement;         break;     default:       console.log("A different key was pressed!"); } paint(); 
 
 

Relacionados problema

5  Filltext no funciona  ( Filltext not working ) 
No puedo conseguir el texto en el lienzo. ¿Qué estoy haciendo mal aquí? jsfiddle - http://jsfiddle.net/qhpt6/ var el = document.getElementById('mycanva...

0  Literalmente lienzo - ajuste de la imagen de lona  ( Literally canvas setting canvas image ) 
Estoy deseando establecer el lienzo para el widget literalmente lienzo a una imagen, similar a usar el código a continuación, pero no parece haber nada en la ...

3  D3JS: obteniendo un gráfico de línea dibujado, de la entrada "Datos JSON" usando D3.Json  ( D3js getting a line chart drawn from json data input using d3 json ) 
Recientemente comencé a estudiar D3.js y se encontró con algunos problemas. Esto es lo que he probado hasta ahora: Aquí está mi JS : d3.json("../js/...

6  ¿Cómo activar el cursor para un tela JS IText?  ( How to activate the cursor for a fabric js itext ) 
Me gustaría poder agregar texto al lienzo y hacerlo directamente al modo de edición de texto donde el cursor es visible y puede comenzar a escribir. Hasta a...

50  Cómo mostrar una barra de progreso en ejecución mientras se carga la página  ( How to show a running progress bar while page is loading ) 
Quiero mostrar una barra de progreso de ejecución mientras mi página está cargando como aquí , en mi página. Utilicé una imagen de carga simple en mi ejemplo...

2  ¿Cómo puedo convertir Beziercurve a B-Spline?  ( How can i convert beziercurve to b spline ) 
Estoy tratando de crear una animación de un camino complejo utilizando lienzo HTML5. He dividido mi camino en una curva de Bezier y he dibujado cada uno de el...

0  ¿Cómo crear una línea de arrastre en lienzo HTML5 usando IONIC?  ( How to create a draggable line in html5 canvas using ionic ) 
¿Cómo arrastrar líneas en lienzo? Soy capaz de agregar líneas en lienzo usando este respuesta . En esto, respuesta Line Drag es Trabajando, pero cuando...

1078  Cómo despejar el lienzo para volver a dibujar  ( How to clear the canvas for redrawing ) 
Después de experimentar con operaciones compuestas y dibujar imágenes en el lienzo, ahora estoy tratando de eliminar imágenes y composición. ¿Cómo hago esto? ...

0  Evento TouchMove tiene datos de eventos vacíos  ( Touchmove event has empty event data ) 
nomind Me doy cuenta de que 'json.stringify (EVT)' 'no imprime los datos en el objeto de evento ???? Pregunta original: tengo var canvas = document.c...

1  ¿Por qué mi área de dibujo de lienzo es tan smal?  ( Why is my canvas drawing area so smal ) 
Estoy creando un control enyo basado en un lienzo. Debe capturar los eventos de ratón o dedos, y dibujarlos en él. Sin embargo, cuando dibujo en ese lienzo, s...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos