JavaScriptのキーボード入力が機能しないのはなぜですか？

ユーザーが押した矢印キーに基づいてキャンバス内の画像を移動しようとしていますが、矢印キーを押しても画像が動かずにそのまま残ります。ここに私のHTMLコードです。JavaScriptのキーボード入力が機能しないのはなぜですか？

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

おかげ

注：私はイメージ自体に問題がないが、私はJavaScriptで原因私の未熟さにスクリプトタグ内のどこかにいくつかの些細なミスをやっていると仮定し、私はあなたの助けを必要としています。

出典

2016-05-23 John Mike

何が起こるのでしょうか？いくつかの 'console.log（ 'working'）' 'flares 'に振りかけて実際にどの部分が実行中であるかを調べてみてください... – dandavis

ブラウザコンソールにエラーが表示されている – charlietfl

問題がwrap()とupdateKeys()機能である：

 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

プラス、あなたは、変数を定義していない、とあなたは別の矢印キーのキーコードを混同しました。

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

出典

2016-05-23 03:46:25

エラーについては、ブラウザのコンソールに常に注意してください。キーボードコードのリストにK_UPが定義されていないことがわかります。（K_UPには、その方向に間違ったキーコードもあります）

wrap()機能に少し微調整が必要です。コメントを参照してください。

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

全例：https://jsfiddle.net/ok0jh0rf/7/

も参照してください：Using Chrome DevTools

出典

2016-05-23 04:06:18

JavaScriptのキーボード入力が機能しないのはなぜですか？

答えて

関連する問題