6

Pacman: první krůčky

Nyní se společně vydáme na dobrodružnou JavaScriptovou cestu a společně krok po kroku vytvoříme hru ve stylu Pacman.

Cvičení

1

Start

Stáhněte si počáteční projekt. Rozbalte si ZIP archiv někam na váš počítač a otevřete si jej ve VS Code. Projekt obsahuje základní HTML stránku s jednoduchým JavaScriptem a spoustou obrázků, které můžete v různých fázích vývoje hry použít. JavaScriptový kód v projektu provádí postupné navyšování proměnné pacX, která bude časem představovat x-ovou pozici pacmana.

Otevřete si stránku v tomto projektu v prohlížeči a podívejte se co se vypisuje do konzole, když stisknete šipku doprava. Projděte si kód a ujistěte se, že mu rozumíte.

2

První krok

Naučte pacmana udělat jeden krok doprava. V projektu už máte připravenou proměnnou pacX, která se při každém stisku klávesy navyšuje a velikost jedné dlaždice. Stačí tedy při každém stistku klávesy pacmanovi nastavit vlastnost style.left na hodnotu této proměnné. Výsledek je tedy stránka, kdy se pacman po každém stisku šipky doprava posune o jeden krok doprava.

3

Procházka

Naučte pacmana chodit nejen doprava ale také doleva, nahoru a dolů při zmáčknutí příslušných šipek. K tomu stačí rozšířit podmínku uvnitř funkce handleKeyDown o další klávesy.