Warum funktioniert meine Tastatureingabe in Javascript nicht?

Ich versuche ein Bild in Leinwand basierend auf den vom Benutzer gedrückten Pfeiltasten zu bewegen, aber das Bild bleibt ruhig, auch wenn ich die Pfeiltasten drücke. Hier ist mein HTML-Code.Warum funktioniert meine Tastatureingabe in Javascript nicht?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Keyboard Animation Demo</title> 
     <meta charset="UTF-8"/> 
     <style type="text/css"> 
      .hidden{ 
       display: none; 
      } 
     </style> 
     <script type="text/javascript"> 
      var drawing; 
      var con; 
      var gokupic; 
      CANV_HEIGHT = 200; 
      CANV_WIDTH = 200; 
      SPR_HEIGHT = 50; 
      SPR_WIDTH = 40; 
      var x = 0; 
      var y = 0; 
      var dx = 10; 
      var dy = 7; 
      var currentKey; 

      function init(){ 
       drawing = document.getElementById("drawing"); 
       con = drawing.getContext("2d"); 
       gokupic = document.getElementById("goku"); 
       document.onkeydown = updateKeys; 
       setInterval(draw, 100); 
      } 

      function updateKeys(e){ 
       currentKey = e.keyCode; 

       if(currentKey == K_LEFT){ 
        dx = -5; 
       } 
       if(currentKey == K_RIGHT){ 
        dx = 5; 
       } 
       if(currentKey == K_TOP){ 
        dy = -5; 
       } 
       if(currentKey == K_DOWN){ 
        dy = 5; 
       } 
       if(currentKey == K_SPACE){ 
        dx = 0; 
        dy = 0; 
       } 
      }//end updateKeys 

      function draw(){ 
       //clear bg 
       con.clearRect(0,0,200,200); 

       currentKey = null; 

       //move the element 
       x += dx; 
       y += dy; 

       //check for boundaries 
       wrap(); 

       //draw the image 
       con.drawImage(gokupic, x,y,SPR_WIDTH, SPR_HEIGHT); 

       //draw a rectangle 
       con.strokeStyle = "red"; 
       con.lineWidth = 5; 
       con.strokeRect(0,0,CANV_WIDTH,CANV_HEIGHT); 
      }//end draw 

      function wrap(){ 
       if(x > CANV_WIDTH){ 
        x = 0; 
       } 
       if(x < CANV_WIDTH){ 
        x = 0; 
       } 
       if(y > CANV_HEIGHT){ 
        y = 0; 
       } 
       if(y < CANV_HEIGHT){ 
        y = 0; 
       } 
      }//end wrap 

      //keyboard constans 
      K_LEFT = 37; K_RIGHT = 39; K_UP = 39; K_DOWN = 40; K_SPACE = 32; 
     </script> 
    </head> 
    <body onload = "init()"> 
     <h1>Keyboard Motion</h1> 
     <img class = "hidden" id = "goku" src = "goku.jpg" alt = "goku pic" /> 
     <canvas id = "drawing" height=200 width=200>Canvas not supported</canvas> 
     <p>Use arrow keys to move image, space bar to stop the motion.</p> 
    </body> 
</html>

Dank

Anmerkung: Ich habe keine Probleme mit dem Bild selbst, ich nehme an, ich einige triviale Fehler mit Javascript meiner Unerfahrenheit wegen irgendwo in Script-Tag tue, damit ich Ihre Hilfe brauchen.

Quelle

2016-05-23 John Mike

ist alles passieren? Versuchen Sie, einige 'console.log ('working')' 'flares' zu streuen, um zu sehen, welche Teile tatsächlich gerade laufen ... – dandavis

Erwähnen Sie auch, wenn Fehler in der Browser-Konsole angezeigt werden – charlietfl

Das Problem ist in wrap() und updateKeys() Funktion:

 function updateKeys(e){ 
      currentKey = e.keyCode; 
      if(currentKey == K_LEFT){ 
       dx = -5; 
       dy = 0; 
      } 
      if(currentKey == K_RIGHT){ 
       dx = 5; 
       dy = 0; 
      } 
      if(currentKey == K_UP){ 
       dy = -5; 
       dx = 0; 
      } 
      if(currentKey == K_DOWN){ 
       dy = 5; 
       dx = 0; 
      } 
      if(currentKey == K_SPACE){ 
       dy = 0; 
       dx = 0; 
      } 
     }//end updateKeys 

     function wrap(){ 
      if(x > CANV_WIDTH){ 
       x = 0; 
      } 
      if(x < 0){ // this one should be 0, right? 
       x = 0; 
      } 
      if(y > CANV_HEIGHT){ 
       y = 0; 
      } 
      if(y < 0){ // this one should be 0, right? 
       y = 0; 
      } 
     }//end wrap

Plus, haben Sie die Variablen nicht definiert ist, und Sie gemischt, um den Schlüsselcode der verschiedenen Pfeiltasten nach oben.

 //keyboard constans 
     var K_LEFT = 37, K_RIGHT = 39, K_UP = 38, K_DOWN = 40, K_SPACE = 32;

Quelle

2016-05-23 03:46:25

Achten Sie immer auf die Browser-Konsole für Fehler. Dies würde Ihnen zeigen, dass K_UP nicht in der Liste Ihrer Tastaturcodes definiert wurde. (K_UP hat auch den falschen Schlüsselcode für seine Richtung)

Ihre wrap() Funktion benötigt ein wenig zwicken. Zeige Kommentare.

function wrap(){ 

    if(x > CANV_WIDTH) { 
    x = 0; 
    } 
    if(x < 0) { // Reset `x` to 0 when it's less than 0 
    x = 0; 
    } 
    if(y > CANV_HEIGHT) { 
    y = 0; 
    } 
    if(y < 0) { // Reset `y` to 0 when it's less than 0 
    y = 0; 
    } 
}//end wrap

Voll Beispiel: https://jsfiddle.net/ok0jh0rf/7/

Siehe auch: Using Chrome DevTools

Quelle

2016-05-23 04:06:18

Warum funktioniert meine Tastatureingabe in Javascript nicht?

Antwort

Verwandte Themen