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

Mängu loomine sündmuste abil

Loengu-eelne viktoriin

Loengu-eelne viktoriin

Sündmustepõhine programmeerimine

Veebirakenduse loomisel pakume kasutajale graafilist kasutajaliidest (GUI), mille abil ta saab meie loodud rakendusega suhelda. Kõige tavalisem viis brauseriga suhtlemiseks on klõpsamine ja erinevates elementides kirjutamine. Väljakutse, millega arendajana silmitsi seisame, on see, et me ei tea, millal kasutaja neid toiminguid teeb!

Sündmustepõhine programmeerimine on programmeerimisviis, mida vajame oma GUI loomiseks. Kui seda fraasi veidi lahti mõtestada, näeme, et keskne sõna siin on sündmus. Sündmus, Merriam-Websteri järgi, on defineeritud kui "midagi, mis juhtub". See kirjeldab meie olukorda täiuslikult. Me teame, et midagi juhtub, millele tahame koodi täitmisega reageerida, kuid me ei tea, millal see juhtub.

Viis, kuidas me tähistame koodiosa, mida tahame täita, on funktsiooni loomine. Kui mõtleme protseduuripõhisele programmeerimisele, kutsutakse funktsioone kindlas järjekorras. Sama kehtib ka sündmustepõhise programmeerimise puhul. Erinevus seisneb selles, kuidas funktsioone kutsutakse.

Sündmuste (nupu klõpsamine, kirjutamine jne) käsitlemiseks registreerime sündmuste kuulajad. Sündmuste kuulaja on funktsioon, mis ootab sündmuse toimumist ja täidab koodi vastuseks. Sündmuste kuulajad võivad värskendada kasutajaliidest, teha serverikõnesid või teha muid vajalikke toiminguid vastuseks kasutaja tegevusele. Sündmuste kuulaja lisamiseks kasutame addEventListener ja anname ette funktsiooni, mida täita.

NOTE: Tasub rõhutada, et sündmuste kuulajate loomiseks on mitmeid viise. Võite kasutada anonüümseid funktsioone või luua nimelisi funktsioone. Võite kasutada erinevaid otseteid, näiteks määrata click omaduse või kasutada addEventListener. Meie harjutuses keskendume addEventListener-ile ja anonüümsetele funktsioonidele, kuna see on tõenäoliselt kõige levinum tehnika, mida veebiarendajad kasutavad. See on ka kõige paindlikum, kuna addEventListener töötab kõigi sündmuste puhul ja sündmuse nime saab anda parameetrina.

Levinumad sündmused

Rakenduse loomisel on saadaval kümneid sündmusi, mida saate kuulata. Põhimõtteliselt tõstab iga kasutaja tegevus lehel esile sündmuse, mis annab teile palju võimalusi tagada, et nad saavad soovitud kogemuse. Õnneks vajate tavaliselt ainult väikest hulka sündmusi. Siin on mõned levinumad (sealhulgas kaks, mida kasutame oma mängu loomisel):

• click: Kasutaja klõpsas millelgi, tavaliselt nupul või hüperlingil
• contextmenu: Kasutaja klõpsas parema hiireklahviga
• select: Kasutaja valis teksti
• input: Kasutaja sisestas teksti

Mängu loomine

Loome mängu, et uurida, kuidas sündmused JavaScriptis töötavad. Meie mäng testib mängija kirjutamisoskust, mis on üks kõige alahinnatumaid oskusi, mida kõik arendajad peaksid omama. Me kõik peaksime harjutama oma kirjutamisoskust! Mängu üldine voog näeb välja järgmine:

• Mängija klõpsab nuppu "Start" ja talle kuvatakse tsitaat, mida kirjutada
• Mängija kirjutab tsitaadi nii kiiresti kui võimalik tekstikasti
  • Kui iga sõna on lõpetatud, tõstetakse järgmine esile
  • Kui mängija teeb kirjavea, muutub tekstikast punaseks
  • Kui mängija lõpetab tsitaadi, kuvatakse edukuse sõnum koos kulunud ajaga

Hakkame oma mängu looma ja õpime sündmuste kohta!

Failistruktuur

Meil on vaja kokku kolme faili: index.html, script.js ja style.css. Alustame nende seadistamisest, et muuta töö lihtsamaks.

• Looge oma töö jaoks uus kaust, avades konsooli või terminali akna ja sisestades järgmise käsu:

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

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

• Avage Visual Studio Code

code .

• Lisage kausta Visual Studio Code'is kolm faili järgmiste nimedega:
  • index.html
  • script.js
  • style.css

Kasutajaliidese loomine

Kui uurime nõudeid, teame, et vajame HTML-lehel mitmeid elemente. See on natuke nagu retsept, kus vajame mõningaid koostisosi:

• Koht, kus kuvada tsitaati, mida kasutaja peaks kirjutama
• Koht, kus kuvada sõnumeid, näiteks edukuse sõnumit
• Tekstikast kirjutamiseks
• Start-nupp

Igal neist peab olema ID, et saaksime nendega JavaScriptis töötada. Samuti lisame viited CSS- ja JavaScripti failidele, mida loome.

Looge uus fail nimega index.html. Lisage järgmine 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>

Rakenduse käivitamine

Alati on kõige parem arendada iteratiivselt, et näha, kuidas asjad välja näevad. Käivitame oma rakenduse. Visual Studio Code'i jaoks on suurepärane laiendus nimega Live Server, mis hostib teie rakendust kohapeal ja värskendab brauserit iga kord, kui salvestate.

• Installige Live Server, järgides linki ja klõpsates Install
  • Brauser palub teil avada Visual Studio Code'i ja seejärel Visual Studio Code palub teil installimist kinnitada
  • Taaskäivitage Visual Studio Code, kui seda palutakse
• Kui installimine on lõpetatud, klõpsake Visual Studio Code'is Ctrl-Shift-P (või Cmd-Shift-P), et avada käsupalett
• Sisestage Live Server: Open with Live Server
  • Live Server alustab teie rakenduse hostimist
• Avage brauser ja navigeerige aadressile https://localhost:5500
• Nüüd peaksite nägema loodud lehte!

Lisame veidi funktsionaalsust.

CSS-i lisamine

Kui meie HTML on loodud, lisame CSS-i põhilise kujunduse jaoks. Peame esile tõstma sõna, mida mängija peaks kirjutama, ja värvima tekstikasti, kui see, mida nad on kirjutanud, on vale. Teeme seda kahe klassi abil.

Looge uus fail nimega style.css ja lisage järgmine süntaks.

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

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

✅ CSS-i osas saate oma lehe paigutada vastavalt oma soovile. Võtke veidi aega ja tehke leht visuaalselt atraktiivsemaks:

• Valige erinev font
• Värvige pealkirjad
• Muutke elementide suurust

JavaScript

Kui meie kasutajaliides on loodud, keskendume JavaScriptile, mis pakub loogikat. Jagame selle mitmeks etapiks:

• Konstantide loomine
• Sündmuste kuulaja mängu alustamiseks
• Sündmuste kuulaja kirjutamiseks

Kuid kõigepealt looge uus fail nimega script.js.

Konstantide lisamine

Meil on vaja mõningaid elemente, et muuta programmeerimine lihtsamaks. Jällegi, nagu retseptis, on siin, mida me vajame:

• Massiiv kõigi tsitaatide loendiga
• Tühi massiiv praeguse tsitaadi sõnade salvestamiseks
• Koht, kus salvestada sõna indeks, mida mängija praegu kirjutab
• Aeg, millal mängija klõpsas starti

Samuti vajame viiteid kasutajaliidese elementidele:

• Tekstikast (typed-value)
• Tsitaadi kuvamine (quote)
• Sõnum (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');

✅ Lisage oma mängule rohkem tsitaate

NOTE: Saame elemente koodis igal ajal hankida, kasutades document.getElementById. Kuna viitame neile elementidele regulaarselt, väldime stringiliteralide kirjavigu, kasutades konstante. Raamistikud nagu Vue.js või React aitavad teil paremini hallata koodi tsentraliseerimist.

Võtke hetk, et vaadata videot const, let ja var kasutamise kohta.

🎥 Klõpsake ülaloleval pildil, et vaadata videot muutujatest.

Alustamisloogika lisamine

Mängu alustamiseks klõpsab mängija start-nuppu. Loomulikult me ei tea, millal nad starti klõpsavad. Siin tuleb mängu sündmuste kuulaja. Sündmuste kuulaja võimaldab meil oodata, et midagi juhtub (sündmus), ja täita koodi vastuseks. Meie puhul tahame täita koodi, kui kasutaja klõpsab starti.

Kui kasutaja klõpsab start, peame valima tsitaadi, seadistama kasutajaliidese ja seadistama praeguse sõna ja ajastuse jälgimise. Allpool on JavaScript, mida peate lisama; arutame seda pärast skriptiplokki.

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

Vaatame koodi lähemalt!

• Sõnade jälgimise seadistamine
  • Math.floor ja Math.random kasutamine võimaldab meil juhuslikult valida tsitaadi quotes massiivist
  • Muudame quote massiiviks words, et saaksime jälgida sõna, mida mängija praegu kirjutab
  • wordIndex määratakse väärtuseks 0, kuna mängija alustab esimesest sõnast
• Kasutajaliidese seadistamine
  • Loome spanWords massiivi, mis sisaldab iga sõna span elemendi sees
    • See võimaldab meil kuvada sõna ekraanil esile tõstetuna
  • Kasutame join, et luua string, mida saame kasutada quoteElement innerHTML värskendamiseks
    • See kuvab tsitaadi mängijale
  • Määrame esimese span elemendi className väärtuseks highlight, et tõsta see kollaselt esile
  • Puhastame messageElement määrates innerText väärtuseks ''
• Tekstikasti seadistamine
  • Kustutame praeguse typedValueElement value
  • Määrame focus typedValueElement-ile
• Käivitame taimeri, kutsudes getTime

Kirjutamisloogika lisamine

Kui mängija kirjutab, tõstetakse esile input sündmus. See sündmuste kuulaja kontrollib, kas mängija kirjutab sõna õigesti, ja haldab mängu praegust olekut. Tagasi script.js-i juurde, lisage järgmine kood lõppu. Arutame seda hiljem.

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

Vaatame koodi lähemalt! Alustame praeguse sõna ja mängija poolt seni kirjutatud väärtuse haaramisega. Seejärel kontrollime järjestikku, kas tsitaat on lõpetatud, sõna on lõpetatud, sõna on õige või (lõpuks), kas on viga.

• Tsitaat on lõpetatud, kui typedValue on võrdne currentWord-iga ja wordIndex on võrdne ühe võrra väiksemaga kui words pikkus
  • Arvutame elapsedTime, lahutades startTime praegusest ajast
  • Jagame elapsedTime 1,000-ga, et teisendada millisekundid sekunditeks
  • Kuvame edukuse sõnumi
• Sõna on lõpetatud, kui typedValue lõpeb tühikuga (sõna lõpp) ja typedValue on võrdne currentWord-iga
  • Määrame typedElement value väärtuseks '', et võimaldada järgmise sõna kirjutamist
  • Suurendame wordIndex, et liikuda järgmise sõna juurde
  • Läbime kõik quoteElement childNodes, et määrata className väärtuseks '', et taastada vaikimisi kuvamine
  • Määrame praeguse sõna className väärtuseks highlight, et tähistada seda kui järgmist sõna, mida kirjutada
• Sõna on praegu õigesti kirjutatud (kuid mitte lõpetatud), kui currentWord algab typedValue-ga
  • Veendume, et typedValueElement kuvatakse vaikimisi, kustutades className
• Kui oleme siiani jõudnud, on viga
  • Määrame typedValueElement className väärtuseks error

Testige oma rakendust

Olete jõudnud lõpuni! Viimane samm on veenduda, et meie rakendus töötab. Proovige seda! Ärge muretsege, kui esineb vigu; kõigil arendajatel on vigu. Uurige sõnumeid ja tehke vajadusel silumist.

Klõpsake start ja hakake kirjutama! See peaks välja nägema umbes nagu animatsioon, mida varem nägime.

---

🚀 Väljakutse

Lisage rohkem funktsionaalsust

• Keelake input sündmuste kuulaja lõpetamisel ja lubage see uuesti, kui nuppu klõpsatakse
• Keela tekstikast, kui mängija lõpetab tsitaadi
• Kuvage modaalne dialoogikast edusõnumiga
• Salvestage kõrged punktisummad, kasutades localStorage

Loengu järgne viktoriin

Loengu järgne viktoriin

Ülevaade ja iseseisev õppimine

Lugege kõikide sündmuste kohta, mis on veebibrauseri kaudu arendajale kättesaadavad, ja mõelge olukordadele, kus te neid kasutaksite.

Ülesanne

Loo uus klaviatuurimäng

---

Lahtiütlus:
See dokument on tõlgitud AI tõlketeenuse Co-op Translator abil. Kuigi püüame tagada täpsust, palume arvestada, et automaatsed tõlked võivad sisaldada vigu või ebatäpsusi. Algne dokument selle algses keeles tuleks pidada autoriteetseks allikaks. Olulise teabe puhul soovitame kasutada professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tulenevate arusaamatuste või valesti tõlgenduste eest.