«KeyCode» Мой JQuery код не работает

Вопрос«KeyCode» Мой JQuery код не работает

Здравствуйте, Я совершенно новой для JQuery так, хотя это может звучать глупо для некоторых людей, я действительно не знаю, почему этот код не работает , My JSfiddle

Основное объяснения того, что он должен сделать, это:

Start Up, нажав кнопку запуска < < Это работает

Показать ранее скрытый круговой DIV, который является круглым от «границ -radius: 100% -ый код CSS, приведенный ниже. < < Это Работает

Сделать Див двигаться с вверх, вниз, влево и вправо < < Это НЕ ли работа

Это в настоящее время моя проблема. Я приложил все 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:

#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 и JQuery значение присвоить вопрос (+ = 10px).Это работает отлично иначе :)

коррекция 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

«KeyCode» Мой JQuery код не работает

ответ

Смежные вопросы