Došli jsme k poznání, že kód pro zachytávání stisků kláves:

document.addEventListener('keypress', function(event){
  if(event.key=== 'w' || event.key=== 'W'){
  zrychli();
  }
 //dalsi klavesy
 
});

není dokonalý - událost keypress je totiž ta chvíle, kdy je písmenko po zmáčknutí napsáno (např. do dokumentu). Proto se při držení klávesy vykoná jedna akce (například pohyb vlevo), chvíli se počká a pak se bude vykonávat opakovaně.

Proto by se v takto naprogramované hře dalo snadno podvádět - lze totiž počáteční prodlevu i kadenci opakování nastavit v Ovládacích panelech/klávesnice (mimochodem, dialog nastavení klávesnice - viz obrázek - se v aktuální verzi Windows 10 neliší od prastarých WindowsXP).

Budeme tedy sledovat jiné události - keydown a keyup - okamžik, kdy jde klávesa dolů (=je zamáčknuta) a kdy se vrací nahoru. Tyto události ovšem i pro dlouhé držení (např. chci dlouho zrychlovat autíčko) vykonají pouze jednou. Proto není žádoucí, aby volaly přímo akci pridej(). Místo toho si zkusíme představit, že máme tabulku, ve které je informace, zda je momentálně klávesa držena, či ne. Po zamáčknutí w by tabulka vypadala takto:

V kódu to bude (zde pouze pro klávesu w, zbytek doplňte sami :)) takto:

//deklarace globalni promenne
zmacknutoZrychli = false;
 
document.addEventListener('keydown', function(event){
//klavesa byla zmacknuta
  if(event.key=== 'w' || event.key=== 'W'){
  zmacknutoZrychli=true;
  }
 //todo:dalsi klavesy
});
 
document.addEventListener('keyup', function(event){
//klavesa byla odmacknuta
  if(event.key=== 'w' || event.key=== 'W'){
  zmacknutoZrychli=false;
  }
 //todo:dalsi klavesy
});

Po této úpravě samozřejmě nebude funkce zrychli() volána přímo zmáčknutím klávesy. Proto je potřeba tuto funkci volat v hlavním opakovaném cyklu (funkce render naplánovaná pomocí setInterval, resp. requestAnimationFrame)

//Funkce ktera bude volana znovu a znovu = herní loop
function render(){
 
//Ovlivneni na zaklade stavu klaves
if(zmacknutoZrychli){
 zrychli();
}
//todo: další akce
 
//todo přepočítání x,y na základě rychlosti - viz další část textu
 
//nastav aktualni stav do prvku
document.getElementById('monster').style.top=y+"px";
document.getElementById('monster').style.left=x+"px";
}
 
//Naplánování herního loopu každých 33ms
setInterval(render,33);