==== Úloha: Autíčko ====
Vaším úkolem bude vytvořit hru, ve které se jezdí autíčkem. Autíčko je ovládáno šipkami, které mění jeho směr a zvyšují-snižují jeho rychlost.
K tomuto cíli se budeme dostávat postupně:

=== Autíčko ===
Auto může být reprezentováno elementem ''<div>''. V css musí být nastavena výška a šířka. background-color je možné nahradit nějakým pěkným obrázkem (''background-image:url('obrazek.png')'').

Jak lze ovlivňovat rozumným způsobem pozici autíčka? 
<code html>
<div id="parkoviste">
 <div id="auticko"></div>
</div>
</code>
Autíčko musí mít v css ''position:absolute'' a parkoviste ''position:relative'' (a nějakou šířku ''width'' a výšku ''height'' - např ''width:500px;height:500px''. Pro jistotu na začátek parkovišti nastavte také nějakou světlou backgroundColor - ať vidíte svou herní plochu. 

Hodnoty css auticka ''left:100px'' a ''top:100px'' znamenají odstup od levého a vrchního kraje). Změnou těchto hodnot se pak autíčko posouvá.

Zkuste si teď pohybovat autíčkem doprava; použijeme //setInterval// funkci, která nám umožní opakovat volání funkce změny koordinátů autíčka každých X milisekund.
<code javascript>
var x=0; //pocatecni pozice

function render(){
x+=1; //posun doprava
document.getElementById("auticko").style.left=x+"px";
}
</code>
Modifikací posunu y (''top'' vlastnosti v css) tedy naše nahoru otočené autíčko můžeme rozjíždět v ose y (nahoru a dolů).
Použijeme k tomu zachytávání klávesnice:
<code javascript>

/* Ovladani klavesnici */
document.addEventListener('keydown', function(event){
  const keyName = event.key;

  if(keyName === 's' || keyName === 'S'){
  dolu();
  }
  if(keyName === 'w' || keyName === 'W'){
  nahoru();
  }
});
</code>

V tomto zjednodušeném případě si vysvětlíme, jak funguje rychlost a přidávání/ubírání plynu. My totiž nechceme, aby zmáčknutí W posunulo auto nahoru. Chceme aby zmáčknutí (resp. později držení) W zvýšilo **rychlost** autíčka. Rychlost se pak přičítá k pozici (jako jsme kódem ''x+=1'' nahoře ve funkci //render// přičítali jedničku, teď můžeme přičíst (resp. odečíst) ''y+=rychlostY''.

=== Otáčení autíčka ===
Otočení nehybného autíčka lze pomocí CSS udělat poměrně jednoduše - jde o vlastnost ''transform:rotate(7deg)''. Hodnotu 7 si, podobně jako u rychlosti, budeme držet v proměnné ''rotace'' - klávesy A a D budou tento úhel rotace  zvyšovat/snižovat.