私のjQueryの「KeyCodeに」コードがこんにちは、私はそれが何人かの人々に愚かに聞こえるかもしれないけれどもので、このコードが動作しない理由を、私は本当にわからないjQueryのに非常に新しいです

質問私のjQueryの「KeyCodeに」コードがこんにちは、私はそれが何人かの人々に愚かに聞こえるかもしれないけれどもので、このコードが動作しない理由を、私は本当にわからないjQueryのに非常に新しいです

を動作していません。 My JSfiddle

行うことになっているものの基本的な説明は次のとおりです。

スタートアップスタートボタンこれは

を作品< <をクリックすることで「国境から円形である以前に隠された円形のdivを表示-radius：100％ 'の下にCSSコードが含まれています。 < <これは

がアップでのdivの動きを作るワークス、下、左と右の< <このは、現在、私の問題である仕事

ていません。この作業に含まれている3つのファイルすべてに添付しました。

HTML

<html> 

<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src = 'script.js'></script> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 

<div id='runner'></div> 

<div id='start'>START!</div> 

</body> 

</html>

CSS

body{ 

    background-color: black; 

} 

#runner { 
    width: 100px; 
    height: 100px; 
    background-color: orange; 
    border-radius: 100%; 
    position:relative 
    left: 0; 
    top: 0;; 
} 

#start{ 
    background-color: red; 
    border-radius: 6px; 
    color: white; 
    font-family:arial black; 
    text-align: center; 
    font-size: 48px; 
    width:200px; 
    height:75px; 
    position: absolute; 
    top:50%; 
    left:50%; 
    margin: -100px 0 0 -32.5px; 
    text-align: center; 

}

Javascriptのコード

var main = function() 
     { 

     var $runner = $('#runner'); 
     var $start = $('#start'); 

     // STARTUP 


     $runner.hide(); 

     $start.mouseenter(function(){ 

      $start.css('width', '210px'); 
      $start.css('height', '80px'); 

     }); 

     $start.mouseleave(function(){ 

      $start.css('width', '200px'); 
      $start.css('height', '75px'); 

     }); 

     $start.click(function(){ 

      $start.hide(); 
      $runner.show(); 
      $(document).keydown(function(key){ 

      switch(parseInt(key.which,10)) { 
       // Left arrow key pressed 
       case 37: 
        $('#runner').animate({left: "-=10px"}, 1); 
        break; 
       // Up Arrow Pressed 
       case 38: 
        // Put our code here 
        $('#runner').animate({top: "-=10px"}, 1); 
        break; 
       // Right Arrow Pressed 
       case 39: 
        // Put our code here 
        $('#runner').animate({left: "+=10px"}, 1); 
        break; 
       // Down Arrow Pressed 
       case 40: 
        // Put our code here 
        $('#runner').animate({top: "+=10px"}, 1); 
        break; 
      } 

      }) 


     }); 

     // STARTUP FINISHED 

     // GAME 

    } 

    $(document).ready(main);

だからこれは私のコードであり、それが動作していない理由を私は本当にわかりません。なぜそうではないかについての示唆？

問題が表示されるか、代替方法がわかっていると思われる場合は、ご意見をお聞かせください。 出力を示すJSfiddleリンクが含まれています。My JSfiddle

ありがとうございました。

出典

2016-04-13 Guy

CSSコードにエラーがあります。これは、そうでない場合は正常に動作しています:)

修正しCSS：あなたはCSSコードとjQuery値アサイン問題（+ = 10pxの）でエラーを持っている

#runner { 
    width: 100px; 
    height: 100px; 
    background-color: orange; 
    border-radius: 100%; 
    position:relative; 
    left: 0; 
    top: 0; 
}

See it here

出典

2016-04-13 12:16:35

+ヴィンセントG私はまぬけ感じを。あなたの答えをありがとう。私は偶然を追加したに違いない。上に:) – Guy

あなたは大歓迎です！正確にはい。非常に小さなエラー、JSコードは正常に動作します:) –

+ Vincent G私が尋ねることができる場合、どのように画面を離れるdivの問題に近づくことをお勧めしますか？私はそれが画面のスペースから出て行かないようにしたくありません。助言がありますか？ – Guy

を。これは、そうでない場合は正常に動作しています:)

CSSの修正：

#runner { 
    width: 100px; 
    height: 100px; 
    background-color: orange; 
    border-radius: 100%; 
    position:relative; 
    left: 0; 
    top: 0; 
}

jQueryの修正：

var a = 10; 

    $start.click(function(){ 



     $start.hide(); 
     $runner.show(); 
     $(document).keydown(function(key){ 

     switch(parseInt(key.which,10)) { 
      // Left arrow key pressed 
      case 37: 
     a -= 10; 
       $('#runner').animate({left: a+"px"}, 1); 
       break; 
      // Up Arrow Pressed 
      case 38: 
     a -= 10; 
       // Put our code here 
       $('#runner').animate({top: a+"px"}, 1); 
       break; 
      // Right Arrow Pressed 
      case 39: 
     a += 10; 
       // Put our code here 
       $('#runner').animate({left: a+"px"}, 1); 
       break; 
      // Down Arrow Pressed 
      case 40: 
     a += 10; 
       // Put our code here 
       $('#runner').animate({top: a+"px"}, 1); 
       break; 
     } 

     }) 


    });

出典

2016-04-13 12:25:21

私のjQueryの「KeyCodeに」コードがこんにちは、私はそれが何人かの人々に愚かに聞こえるかもしれないけれどもので、このコードが動作しない理由を、私は本当にわからないjQueryのに非常に新しいです

答えて

関連する問題