Javascript не реагирует после нажатия кнопки

-2

Когда я нажимаю кнопки (N и O), возможно, 10 раз, сценарий становится очень невосприимчивым, у кого-нибудь есть решение для этого? Что я пытаюсь сделать, так это иметь 2 меню в игре. Это тест, который должен иметь тот же эффект.Javascript не реагирует после нажатия кнопки

//html code 
<!DOCTYPE html> 
<html lang ="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Snake</title> 

    </head> 
    <body> 
     <style> 
     canvas{ 
      display: block; 
      position: absolute; 
      border: 1px solid "Black"; 
      margin: auto; 
      top: 0; 
      bottom: 0; 
      right: 0; 
      left: 0; 
     } 
     </style> 
     <script type = "text/javascript" src = "menu2.js"></script>  
     <script type = "text/javascript" src = "menu1.js"></script> 
     <script type = "text/javascript" src = "main.js"></script> 
     <script type = "text/javascript"> 
      main(); 
     </script> 

    </body> 
</html> 
    //main function 
    var 
    COLS = 20, 
    ROWS = 20, 
    canvas, 
    ctx, 
    keystate, 
    KEY_O = 79, 
    KEY_N = 78; 
    var main = function() 
    { 
     // create and initiate the canvas element 
     canvas = document.createElement("canvas"); 
     canvas.width = COLS*20; 
     canvas.height = ROWS*20; 
     ctx = canvas.getContext("2d"); 
     // add the canvas element to the body of the document 
     document.body.appendChild(canvas); 
     // sets an base font for bigger score display 
     ctx.font = "12px Ariel"; 
     keystate = {}; 
     // keeps track of the keybourd input 
     document.addEventListener("keydown", function(evt) { 
      keystate[evt.keyCode] = true; 
     }); 
     document.addEventListener("keyup", function(evt) { 
      delete keystate[evt.keyCode]; 
     }); 
     menu1(); 
    }; 

    //first menu 
    var menu1 = function() 
    { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillStyle = "Red"; 
     ctx.fillRect(0,0,canvas.height, canvas.width); 
     document.addEventListener('keydown', function(event) { 
     if (keystate[KEY_N]) { 
      menu2(); 
     }}); 
    }; 

    //second menu 
    var menu2 = function() 
    { 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillStyle = "Blue"; 
     ctx.fillRect(0,0,canvas.height, canvas.width); 
     document.addEventListener('keydown', function(event) { 
     if (keystate[KEY_O]) { 

      menu1(); 
     }}); 
    };

источник

2015-11-12 Ermehtar

Вы продолжаете добавлять EventListeners - вам нужно только сделать это один раз –

Вы добавляете дополнительный прослушиватель каждый раз, когда вызывается функция. – Adwaenyth

'menu1' добавляет прослушиватель событий, который вызывает' menu2'. 'menu2' добавляет прослушиватель событий, который вызывает' menu1'. Этот ___exponentially___ увеличивает количество обработчиков событий кликов. – Cerbrus

Каждый раз, когда вы звоните menu2(); или menu1(); вы добавляете новый EventListener, который снова вызывает menu2(); или menu1(); ... и больше слушателей событий добавляются каждый раз. Это означает, что количество слушателей событий растет с огромной скоростью, так как вы продолжаете нажимать клавиши и замедляете сценарий. Вам нужно только один EventListener за ключ, установите его вне функции меню.

источник

2015-11-12 13:46:52 EkcenierK

проблема с добавлением eventListeners при каждом вызове menu1 и menu2 .what вам нужно просто положить его сторону, как в основной, как это:

document.addEventListener('keydown', function(event) { 
     if (keystate[KEY_N]) { 
      menu2(); 
     } 
      if (keystate[KEY_O]) { 
       menu1(); 
      } 
     });

<!DOCTYPE html> 
 
<html lang ="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Snake</title> 
 

 
    </head> 
 
    <body> 
 
     <style> 
 
     canvas{ 
 
      display: block; 
 
      position: absolute; 
 
      border: 1px solid "Black"; 
 
      margin: auto; 
 
      top: 0; 
 
      bottom: 0; 
 
      right: 0; 
 
      left: 0; 
 
     } 
 
     </style> 
 
     <script type = "text/javascript"> 
 
    
 
    var 
 
    COLS = 20, 
 
    ROWS = 20, 
 
    canvas, 
 
    ctx, 
 
    keystate, 
 
    KEY_O = 79, 
 
    KEY_N = 78; 
 
    var main = function() 
 
    { 
 
     // create and initiate the canvas element 
 
     canvas = document.createElement("canvas"); 
 
     canvas.width = COLS*20; 
 
     canvas.height = ROWS*20; 
 
     ctx = canvas.getContext("2d"); 
 
     // add the canvas element to the body of the document 
 
     document.body.appendChild(canvas); 
 
     // sets an base font for bigger score display 
 
     ctx.font = "12px Ariel"; 
 
     keystate = {}; 
 
     // keeps track of the keybourd input 
 
     document.addEventListener("keydown", function(evt) { 
 
      keystate[evt.keyCode] = true; 
 
      if (keystate[KEY_N]) { 
 
       menu2(); 
 
      } 
 
      
 
       if (keystate[KEY_O]) { 
 

 
        menu1(); 
 
       } 
 
     }); 
 
     document.addEventListener("keyup", function(evt) { 
 
      delete keystate[evt.keyCode]; 
 
     }); 
 
     menu1(); 
 
    }; 
 

 
    //first menu 
 
    var menu1 = function() 
 
    { 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     ctx.fillStyle = "Red"; 
 
     ctx.fillRect(0,0,canvas.height, canvas.width); 
 
     
 
    }; 
 

 
    //second menu 
 
    var menu2 = function() 
 
    { 
 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
     ctx.fillStyle = "Blue"; 
 
     ctx.fillRect(0,0,canvas.height, canvas.width); 
 
     
 
    }; 
 
    main(); 
 

 
    </script> 
 
    
 
    </body> 
 
</html>

Примечание: откройте окно с отпечатками, затем нажмите внутри него, затем нажмите o и n, чтобы увидеть эффект.

источник

2015-11-12 13:54:07

Javascript не реагирует после нажатия кнопки

ответ

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