Web-Dev-For-Beginners/translations/cs/4-typing-game/typing-game

Vytvoření hry pomocí událostí

Kvíz před lekcí

Kvíz před lekcí

Programování řízené událostmi

Při vytváření aplikace pro prohlížeč poskytujeme grafické uživatelské rozhraní (GUI), které uživatel používá při interakci s tím, co jsme vytvořili. Nejčastějším způsobem interakce s prohlížečem je klikání a psaní do různých prvků. Výzvou pro nás jako vývojáře je, že nevíme, kdy uživatel tyto operace provede!

Programování řízené událostmi je název pro typ programování, který potřebujeme k vytvoření našeho GUI. Pokud tento termín trochu rozebereme, zjistíme, že klíčovým slovem je událost. Událost, podle Merriam-Webster, je definována jako „něco, co se stane“. To dokonale popisuje naši situaci. Víme, že se něco stane, na co chceme reagovat spuštěním kódu, ale nevíme, kdy k tomu dojde.

Část kódu, kterou chceme spustit, označíme vytvořením funkce. Když přemýšlíme o procedurálním programování, funkce se volají v konkrétním pořadí. Totéž platí pro programování řízené událostmi. Rozdíl je v tom, jak se funkce volají.

Pro zpracování událostí (klikání na tlačítka, psaní atd.) registrujeme posluchače událostí. Posluchač událostí je funkce, která čeká na to, až dojde k události, a poté se spustí. Posluchači událostí mohou aktualizovat uživatelské rozhraní, provádět volání na server nebo dělat cokoli jiného, co je potřeba v reakci na akci uživatele. Posluchače událostí přidáváme pomocí addEventListener a poskytujeme funkci, která se má spustit.

NOTE: Stojí za zmínku, že existuje mnoho způsobů, jak vytvořit posluchače událostí. Můžete použít anonymní funkce nebo vytvořit pojmenované. Můžete použít různé zkratky, jako je nastavení vlastnosti click, nebo použít addEventListener. V našem cvičení se zaměříme na addEventListener a anonymní funkce, protože je to pravděpodobně nejběžnější technika, kterou weboví vývojáři používají. Je také nejflexibilnější, protože addEventListener funguje pro všechny události a název události lze poskytnout jako parametr.

Běžné události

Existuje desítky událostí, které můžete použít při vytváření aplikace. Prakticky vše, co uživatel na stránce udělá, vyvolá událost, což vám dává velkou moc zajistit, že dostane požadovaný zážitek. Naštěstí obvykle budete potřebovat jen několik málo událostí. Zde je několik běžných (včetně dvou, které použijeme při vytváření naší hry):

• click: Uživatel kliknul na něco, obvykle na tlačítko nebo odkaz
• contextmenu: Uživatel kliknul pravým tlačítkem myši
• select: Uživatel označil nějaký text
• input: Uživatel zadal nějaký text

Vytvoření hry

Vytvoříme hru, abychom prozkoumali, jak události fungují v JavaScriptu. Naše hra otestuje schopnost hráče psát na klávesnici, což je jedna z nejvíce podceňovaných dovedností, kterou by měl mít každý vývojář. Všichni bychom měli trénovat psaní! Obecný průběh hry bude vypadat takto:

• Hráč klikne na tlačítko start a zobrazí se mu citát, který má napsat
• Hráč co nejrychleji napíše citát do textového pole
  • Jakmile dokončí každé slovo, další se zvýrazní
  • Pokud hráč udělá chybu, textové pole se zbarví červeně
  • Když hráč dokončí citát, zobrazí se zpráva o úspěchu s uplynulým časem

Pojďme hru vytvořit a naučit se něco o událostech!

Struktura souborů

Budeme potřebovat celkem tři soubory: index.html, script.js a style.css. Začněme jejich nastavením, abychom si práci trochu usnadnili.

• Vytvořte novou složku pro svou práci otevřením konzole nebo terminálového okna a zadáním následujícího příkazu:

# Linux or macOS
mkdir typing-game && cd typing-game

# Windows
md typing-game && cd typing-game

• Otevřete Visual Studio Code

code .

• Přidejte do složky ve Visual Studio Code tři soubory s následujícími názvy:
  • index.html
  • script.js
  • style.css

Vytvoření uživatelského rozhraní

Pokud prozkoumáme požadavky, víme, že budeme potřebovat několik prvků na naší HTML stránce. Je to něco jako recept, kde potřebujeme nějaké ingredience:

• Místo pro zobrazení citátu, který má uživatel napsat
• Místo pro zobrazení zpráv, například zprávy o úspěchu
• Textové pole pro psaní
• Tlačítko start

Každý z těchto prvků bude potřebovat ID, abychom s nimi mohli pracovat v našem JavaScriptu. Také přidáme odkazy na CSS a JavaScriptové soubory, které vytvoříme.

Vytvořte nový soubor s názvem index.html. Přidejte následující HTML:

<!-- inside index.html -->
<html>
<head>
  <title>Typing game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Typing game!</h1>
  <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
  <p id="quote"></p> <!-- This will display our quote -->
  <p id="message"></p> <!-- This will display any status messages -->
  <div>
    <input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
    <button type="button" id="start">Start</button> <!-- To start the game -->
  </div>
  <script src="script.js"></script>
</body>
</html>

Spuštění aplikace

Vždy je nejlepší vyvíjet iterativně, abychom viděli, jak věci vypadají. Spusťme naši aplikaci. Ve Visual Studio Code je skvělý rozšíření nazvané Live Server, které bude hostovat vaši aplikaci lokálně a aktualizovat prohlížeč pokaždé, když uložíte.

• Nainstalujte Live Server podle odkazu a klikněte na Install
  • Prohlížeč vás vyzve k otevření Visual Studio Code, a poté vás Visual Studio Code vyzve k provedení instalace
  • Restartujte Visual Studio Code, pokud budete vyzváni
• Po instalaci klikněte ve Visual Studio Code na Ctrl-Shift-P (nebo Cmd-Shift-P) pro otevření příkazové palety
• Zadejte Live Server: Open with Live Server
  • Live Server začne hostovat vaši aplikaci
• Otevřete prohlížeč a přejděte na https://localhost:5500
• Nyní byste měli vidět stránku, kterou jste vytvořili!

Přidejme nějakou funkčnost.

Přidání CSS

S naším HTML vytvořeným přidáme CSS pro základní stylování. Potřebujeme zvýraznit slovo, které by měl hráč psát, a zbarvit textové pole, pokud to, co napsal, není správné. Uděláme to pomocí dvou tříd.

Vytvořte nový soubor s názvem style.css a přidejte následující syntax.

/* inside style.css */
.highlight {
  background-color: yellow;
}

.error {
  background-color: lightcoral;
  border: red;
}

✅ Co se týče CSS, můžete si stránku uspořádat podle svého. Věnujte trochu času tomu, aby stránka vypadala atraktivněji:

• Vyberte jiný font
• Zbarvěte nadpisy
• Změňte velikost prvků

JavaScript

S naším uživatelským rozhraním vytvořeným je čas zaměřit naši pozornost na JavaScript, který poskytne logiku. Rozdělíme to na několik kroků:

• Vytvoření konstant
• Posluchač událostí pro spuštění hry
• Posluchač událostí pro psaní

Nejprve však vytvořte nový soubor s názvem script.js.

Přidání konstant

Budeme potřebovat několik položek, které nám usnadní programování. Opět, podobně jako recept, zde je, co budeme potřebovat:

• Pole se seznamem všech citátů
• Prázdné pole pro uložení všech slov aktuálního citátu
• Prostor pro uložení indexu slova, které hráč právě píše
• Čas, kdy hráč kliknul na start

Také budeme chtít odkazy na prvky uživatelského rozhraní:

• Textové pole (typed-value)
• Zobrazení citátu (quote)
• Zpráva (message)

// inside script.js
// all of our quotes
const quotes = [
    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
    'There is nothing more deceptive than an obvious fact.',
    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
    'I never make exceptions. An exception disproves the rule.',
    'What one man can invent another can discover.',
    'Nothing clears up a case so much as stating it to another person.',
    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
let words = [];
let wordIndex = 0;
// the starting time
let startTime = Date.now();
// page elements
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

✅ Přidejte do své hry více citátů

NOTE: Prvky můžeme kdykoli v kódu získat pomocí document.getElementById. Protože tyto prvky budeme pravidelně odkazovat, vyhneme se překlepům v řetězcových literálech použitím konstant. Frameworky jako Vue.js nebo React vám mohou pomoci lépe centralizovat váš kód.

Věnujte chvíli sledování videa o používání const, let a var

🎥 Klikněte na obrázek výše pro video o proměnných.

Přidání logiky spuštění

Pro zahájení hry hráč klikne na start. Samozřejmě nevíme, kdy klikne na start. Zde přichází na řadu posluchač událostí. Posluchač událostí nám umožní čekat na to, až se něco stane (událost), a spustit kód v reakci. V našem případě chceme spustit kód, když uživatel klikne na start.

Když uživatel klikne na start, musíme vybrat citát, nastavit uživatelské rozhraní a nastavit sledování aktuálního slova a času. Níže je JavaScript, který budete potřebovat přidat; rozebereme ho hned po bloku skriptu.

// at the end of script.js
document.getElementById('start').addEventListener('click', () => {
  // get a quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Put the quote into an array of words
  words = quote.split(' ');
  // reset the word index for tracking
  wordIndex = 0;

  // UI updates
  // Create an array of span elements so we can set a class
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Convert into string and set as innerHTML on quote display
  quoteElement.innerHTML = spanWords.join('');
  // Highlight the first word
  quoteElement.childNodes[0].className = 'highlight';
  // Clear any prior messages
  messageElement.innerText = '';

  // Setup the textbox
  // Clear the textbox
  typedValueElement.value = '';
  // set focus
  typedValueElement.focus();
  // set the event handler

  // Start the timer
  startTime = new Date().getTime();
});

Rozeberme kód!

• Nastavení sledování slov
  • Použití Math.floor a Math.random nám umožní náhodně vybrat citát z pole quotes
  • Citát převedeme na pole words, abychom mohli sledovat slovo, které hráč právě píše
  • wordIndex nastavíme na 0, protože hráč začne na prvním slově
• Nastavení uživatelského rozhraní
  • Vytvoříme pole spanWords, které obsahuje každé slovo uvnitř prvku span
    • To nám umožní zvýraznit slovo na displeji
  • join pole vytvoří řetězec, který můžeme použít k aktualizaci innerHTML na quoteElement
    • To zobrazí citát hráči
  • Nastavíme className prvního prvku span na highlight, aby byl zvýrazněn žlutě
  • Vyčistíme messageElement nastavením innerText na ''
• Nastavení textového pole
  • Vymažeme aktuální value na typedValueElement
  • Nastavíme focus na typedValueElement
• Spustíme časovač voláním getTime

Přidání logiky psaní

Jak hráč píše, vyvolá se událost input. Tento posluchač událostí zkontroluje, zda hráč píše slovo správně, a zpracuje aktuální stav hry. Vraťte se do script.js a přidejte následující kód na konec. Rozebereme ho hned poté.

// at the end of script.js
typedValueElement.addEventListener('input', () => {
  // Get the current word
  const currentWord = words[wordIndex];
  // get the current value
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
    // end of sentence
    // Display success
    const elapsedTime = new Date().getTime() - startTime;
    const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
    messageElement.innerText = message;
  } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
    // end of word
    // clear the typedValueElement for the new word
    typedValueElement.value = '';
    // move to the next word
    wordIndex++;
    // reset the class name for all elements in quote
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
    // highlight the new word
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
    // currently correct
    // highlight the next word
    typedValueElement.className = '';
  } else {
    // error state
    typedValueElement.className = 'error';
  }
});

Rozeberme kód! Začneme tím, že získáme aktuální slovo a hodnotu, kterou hráč dosud napsal. Poté máme logiku typu „vodopád“, kde kontrolujeme, zda je citát dokončen, slovo je dokončeno, slovo je správné, nebo (nakonec), zda je chyba.

• Citát je dokončen, což je indikováno tím, že typedValue je rovno currentWord a wordIndex je rovno jednomu méně než length words
  • Vypočítáme elapsedTime odečtením startTime od aktuálního času
  • elapsedTime vydělíme 1 000, abychom převedli z milisekund na sekundy
  • Zobrazíme zprávu o úspěchu
• Slovo je dokončeno, což je indikováno tím, že typedValue končí mezerou (konec slova) a typedValue je rovno currentWord
  • Nastavíme value na typedElement na '', aby bylo možné napsat další slovo
  • Zvýšíme wordIndex, abychom přešli na další slovo
  • Projdeme všechny childNodes quoteElement a nastavíme className na '', abychom obnovili výchozí zobrazení
  • Nastavíme className aktuálního slova na highlight, abychom ho označili jako další slovo k napsání
• Slovo je aktuálně napsáno správně (ale není dokončeno), což je indikováno tím, že currentWord začíná typedValue
  • Zajistíme, že typedValueElement je zobrazen jako výchozí, vymazáním className
• Pokud jsme se dostali až sem, máme chybu
  • Nastavíme className na typedValueElement na error

Otestujte svou aplikaci

Dostali jste se na konec! Posledním krokem je zajistit, aby naše aplikace fungovala. Vyzkoušejte ji! Nebojte se, pokud jsou tam chyby; všichni vývojáři mají chyby. Prozkoumejte zprávy a laděte podle potřeby.

Klikněte na start a začněte psát! Mělo by to vypadat trochu jako animace, kterou jsme viděli předtím.

---

🚀 Výzva

Přidejte více funkcí

• Deaktivujte posluchač událostí input po dokončení a znovu ho aktivujte, když se klikne na tlačítko
• Deaktivujte textové pole, když hráč dokončí citát
• Zobrazte modální dialogové okno se zprávou o úspěchu
• Ukládejte nejvyšší skóre pomocí localStorage

Kvíz po přednášce

Kvíz po přednášce

Přehled & Samostudium

Přečtěte si o všech dostupných událostech pro vývojáře prostřednictvím webového prohlížeče a zamyslete se nad scénáři, ve kterých byste každou z nich použili.

Úkol

Vytvořte novou hru na klávesnici

---

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádné nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.