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ě:

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?

<div id="parkoviste">
 <div id="auticko"></div>
</div>

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.

var x=0; //pocatecni pozice
 
function render(){
x+=1; //posun doprava
document.getElementById("auticko").style.left=x+"px";
}

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:

/* Ovladani klavesnici */
document.addEventListener('keydown', function(event){
  const keyName = event.key;
 
  if(keyName === 's' || keyName === 'S'){
  dolu();
  }
  if(keyName === 'w' || keyName === 'W'){
  nahoru();
  }
});

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.

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.