18 KiB

Raw Permalink Blame History

Vytvorenie hry pomocou udalostí

Kvíz pred prednáškou

Programovanie riadené udalosťami

Pri vytváraní aplikácie prehliadača poskytujeme grafické používateľské rozhranie (GUI), ktoré používateľ používa na interakciu s tým, čo sme vytvorili. Najbežnejším spôsobom interakcie s prehliadačom je klikanie a písanie do rôznych prvkov. Výzvou pre nás ako vývojárov je, že nevieme, kedy tieto operácie vykonajú!

Programovanie riadené udalosťami je názov pre typ programovania, ktorý potrebujeme na vytvorenie nášho GUI. Ak túto frázu trochu rozoberieme, vidíme, že jadrovým slovom je tu udalosť. Udalosť, podľa Merriam-Webster, je definovaná ako „niečo, čo sa stane“. Toto dokonale opisuje našu situáciu. Vieme, že sa niečo stane, na čo chceme reagovať vykonaním kódu, ale nevieme, kedy sa to stane.

Spôsob, akým označíme časť kódu, ktorú chceme vykonať, je vytvorenie funkcie. Keď premýšľame o procedurálnom programovaní, funkcie sa volajú v konkrétnom poradí. To isté platí aj pre programovanie riadené udalosťami. Rozdiel je v tom, ako sa funkcie volajú.

Na spracovanie udalostí (kliknutie na tlačidlo, písanie atď.) registrujeme poslucháčov udalostí. Poslucháč udalostí je funkcia, ktorá čaká na výskyt udalosti a vykoná sa ako reakcia. Poslucháči udalostí môžu aktualizovať používateľské rozhranie, vykonávať volania na server alebo čokoľvek iné, čo je potrebné urobiť ako reakcia na akciu používateľa. Poslucháča udalostí pridáme pomocou addEventListener a poskytneme funkciu na vykonanie.

NOTE: Stojí za to zdôrazniť, že existuje množstvo spôsobov, ako vytvoriť poslucháčov udalostí. Môžete použiť anonymné funkcie alebo vytvoriť pomenované. Môžete použiť rôzne skratky, ako je nastavenie vlastnosti click alebo použitie addEventListener. V našom cvičení sa zameriame na addEventListener a anonymné funkcie, pretože je to pravdepodobne najbežnejšia technika, ktorú weboví vývojári používajú. Je to tiež najflexibilnejšie, pretože addEventListener funguje pre všetky udalosti a názov udalosti môže byť poskytnutý ako parameter.

Bežné udalosti

Existuje množstvo udalostí, ktoré môžete počúvať pri vytváraní aplikácie. Prakticky všetko, čo používateľ na stránke urobí, vyvolá udalosť, čo vám dáva veľkú moc zabezpečiť, aby získal požadovaný zážitok. Našťastie budete zvyčajne potrebovať iba malú časť udalostí. Tu je niekoľko bežných (vrátane dvoch, ktoré použijeme pri vytváraní našej hry):

click: Používateľ klikol na niečo, zvyčajne na tlačidlo alebo hypertextový odkaz
contextmenu: Používateľ klikol pravým tlačidlom myši
select: Používateľ označil nejaký text
input: Používateľ zadal nejaký text

Vytvorenie hry

Vytvoríme hru, aby sme preskúmali, ako udalosti fungujú v JavaScripte. Naša hra otestuje hráčove schopnosti písania, čo je jedna z najviac podceňovaných zručností, ktoré by mal mať každý vývojár. Všetci by sme mali trénovať svoje písanie! Všeobecný priebeh hry bude vyzerať takto:

Hráč klikne na tlačidlo štart a zobrazí sa mu citát na písanie
Hráč píše citát čo najrýchlejšie do textového poľa
- Po dokončení každého slova sa zvýrazní ďalšie
- Ak hráč urobí preklep, textové pole sa zmení na červené
- Keď hráč dokončí citát, zobrazí sa správa o úspechu s uplynutým časom

Poďme si hru vytvoriť a naučiť sa niečo o udalostiach!

Štruktúra súborov

Budeme potrebovať celkovo tri súbory: index.html, script.js a style.css. Začnime ich nastavením, aby sme si uľahčili prácu.

Vytvorte nový priečinok pre svoju prácu otvorením konzoly alebo terminálového okna a zadaním nasledujúceho príkazu:

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

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

Otvorte Visual Studio Code

code .

Pridajte do priečinka vo Visual Studio Code tri súbory s nasledujúcimi názvami:
- index.html
- script.js
- style.css

Vytvorenie používateľského rozhrania

Ak preskúmame požiadavky, vieme, že na našej HTML stránke budeme potrebovať niekoľko prvkov. Je to niečo ako recept, kde potrebujeme nejaké ingrediencie:

Miesto na zobrazenie citátu, ktorý má používateľ napísať
Miesto na zobrazenie správ, ako je správa o úspechu
Textové pole na písanie
Tlačidlo štart

Každý z týchto prvkov bude potrebovať ID, aby sme s nimi mohli pracovať v našom JavaScripte. Pridáme tiež odkazy na súbory CSS a JavaScript, ktoré vytvoríme.

Vytvorte nový súbor s názvom index.html. Pridajte nasledujúci 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>

Spustenie aplikácie

Vždy je najlepšie vyvíjať iteratívne, aby ste videli, ako veci vyzerajú. Spustime našu aplikáciu. Existuje skvelé rozšírenie pre Visual Studio Code s názvom Live Server, ktoré bude hostiť vašu aplikáciu lokálne a obnoví prehliadač pri každom uložení.

Nainštalujte Live Server podľa odkazu a kliknutím na Install
- Prehliadač vás vyzve na otvorenie Visual Studio Code a potom vás Visual Studio Code vyzve na vykonanie inštalácie
- Reštartujte Visual Studio Code, ak budete vyzvaní
Po inštalácii vo Visual Studio Code stlačte Ctrl-Shift-P (alebo Cmd-Shift-P) na otvorenie príkazovej palety
Napíšte Live Server: Open with Live Server
- Live Server začne hostiť vašu aplikáciu
Otvorte prehliadač a prejdite na https://localhost:5500
Teraz by ste mali vidieť stránku, ktorú ste vytvorili!

Pridajme nejakú funkcionalitu.

Pridanie CSS

S naším HTML vytvoreným pridajme CSS pre základné štýlovanie. Potrebujeme zvýrazniť slovo, ktoré má hráč písať, a zafarbiť textové pole, ak to, čo napísal, nie je správne. Urobíme to pomocou dvoch tried.

Vytvorte nový súbor s názvom style.css a pridajte nasledujúcu syntax.

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

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

✅ Pokiaľ ide o CSS, môžete si stránku usporiadať podľa vlastného vkusu. Venujte trochu času a urobte stránku atraktívnejšou:

Vyberte iné písmo
Zafarbite nadpisy
Zmeňte veľkosť prvkov

JavaScript

S naším používateľským rozhraním vytvoreným je čas zamerať našu pozornosť na JavaScript, ktorý poskytne logiku. Rozdelíme to na niekoľko krokov:

Najprv však vytvorte nový súbor s názvom script.js.

Pridanie konštánt

Budeme potrebovať niekoľko položiek, aby sme si uľahčili programovanie. Opäť, podobne ako recept, tu je to, čo budeme potrebovať:

Pole so zoznamom všetkých citátov
Prázdne pole na uloženie všetkých slov pre aktuálny citát
Priestor na uloženie indexu slova, ktoré hráč práve píše
Čas, kedy hráč klikol na štart

Budeme tiež chcieť odkazy na prvky používateľského rozhrania:

Textové pole (typed-value)
Zobrazenie citátu (quote)
Sprá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');

✅ Pridajte do svojej hry viac citátov

NOTE: Prvky môžeme kedykoľvek v kóde získať pomocou document.getElementById. Pretože sa na tieto prvky budeme pravidelne odkazovať, aby sme sa vyhli preklepom v reťazcových literáloch, použijeme konštanty. Frameworky ako Vue.js alebo React vám môžu pomôcť lepšie centralizovať váš kód.

Venujte chvíľu sledovaniu videa o používaní const, let a var

🎥 Kliknite na obrázok vyššie pre video o premenných.

Pridanie logiky pre štart

Na začatie hry hráč klikne na štart. Samozrejme, nevieme, kedy klikne na štart. Tu prichádza na rad poslucháč udalostí. Poslucháč udalostí nám umožní počúvať, kedy sa niečo stane (udalosť), a vykonať kód ako reakciu. V našom prípade chceme vykonať kód, keď používateľ klikne na štart.

Keď používateľ klikne na štart, musíme vybrať citát, nastaviť používateľské rozhranie a nastaviť sledovanie aktuálneho slova a času. Nižšie je JavaScript, ktorý budete potrebovať pridať; rozoberieme ho hneď 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();
});

Rozoberme si kód!

Nastavenie sledovania slov
- Použitím Math.floor a Math.random umožníme náhodný výber citátu z poľa quotes
- Prevedieme quote na pole words, aby sme mohli sledovať slovo, ktoré hráč práve píše
- wordIndex nastavíme na 0, pretože hráč začne na prvom slove
Nastavenie používateľského rozhrania
- Vytvoríme pole spanWords, ktoré obsahuje každé slovo vo vnútri prvku span
  - To nám umožní zvýrazniť slovo na displeji
- join pole na vytvorenie reťazca, ktorý môžeme použiť na aktualizáciu innerHTML na quoteElement
  - Toto zobrazí citát hráčovi
- Nastavíme className prvého prvku span na highlight, aby sme ho zvýraznili na žlto
- Vyčistíme messageElement nastavením innerText na ''
Nastavenie textového poľa
- Vyčistíme aktuálnu value na typedValueElement
- Nastavíme focus na typedValueElement
Spustíme časovač volaním getTime

Pridanie logiky pre písanie

Keď hráč píše, vyvolá sa udalosť input. Tento poslucháč udalostí skontroluje, či hráč píše slovo správne, a spracuje aktuálny stav hry. Vráťte sa do script.js a pridajte nasledujúci kód na koniec. Rozoberieme ho potom.

// 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';
  }
});

Rozoberme si kód! Začneme získaním aktuálneho slova a hodnoty, ktorú hráč doteraz napísal. Potom máme logiku vo forme vodopádu, kde kontrolujeme, či je citát dokončený, slovo je dokončené, slovo je správne alebo (nakoniec), či je tam chyba.

Citát je dokončený, čo je indikované tým, že typedValue sa rovná currentWord a wordIndex sa rovná o jedno menej ako length words
- Vypočítame elapsedTime odčítaním startTime od aktuálneho času
- Vydelíme elapsedTime číslom 1 000, aby sme ho previedli z milisekúnd na sekundy
- Zobrazíme správu o úspechu
Slovo je dokončené, čo je indikované tým, že typedValue končí medzerou (koniec slova) a typedValue sa rovná currentWord
- Nastavíme value na typedElement na '', aby sme umožnili napísanie ďalšieho slova
- Zvýšime wordIndex, aby sme prešli na ďalšie slovo
- Prejdeme všetky childNodes quoteElement a nastavíme className na '', aby sme obnovili predvolené zobrazenie
- Nastavíme className aktuálneho slova na highlight, aby sme ho označili ako ďalšie slovo na písanie
Slovo je aktuálne napísané správne (ale nie je dokončené), čo je indikované tým, že currentWord začína typedValue
- Zabezpečíme, aby sa typedValueElement zobrazoval ako predvolený vymazaním className
Ak sme sa dostali až sem, máme chybu
- Nastavíme className na typedValueElement na error

Otestujte svoju aplikáciu

Dostali ste sa na koniec! Posledným krokom je zabezpečiť, aby naša aplikácia fungovala. Vyskúšajte si to! Nebojte sa, ak tam budú chyby; všetci vývojári robia chyby. Preskúmajte správy a podľa potreby ich opravte.

Kliknite na štart a začnite písať! Malo by to vyzerať trochu ako animácia, ktorú sme videli predtým.

🚀 Výzva

Pridajte viac funkcií

Deaktivujte poslucháč udalostí input po dokončení a znova ho aktivujte, keď sa klikne na tlačidlo
Deaktivujte textové pole, keď hráč dokončí citát
Zobrazte modálne dialógové okno so správou o úspechu
Ukladajte najvyššie skóre pomocou localStorage

Kvíz po prednáške

Prehľad a samostatné štúdium

Prečítajte si o všetkých dostupných udalostiach pre vývojára prostredníctvom webového prehliadača a zvážte scenáre, v ktorých by ste každú z nich použili.

Zadanie

Vytvorte novú hru na klávesnici

Upozornenie:
Tento dokument bol preložený pomocou služby na automatický preklad Co-op Translator. Hoci sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

18 KiB Raw Permalink Blame History