19 KiB

Raw Permalink Blame History

Paglikha ng laro gamit ang mga event

Pre-Lecture Quiz

Event-driven programming

Kapag gumagawa ng browser-based na application, nagbibigay tayo ng graphical user interface (GUI) para magamit ng user sa pakikipag-ugnayan sa ginawa natin. Ang pinakakaraniwang paraan ng pakikipag-ugnayan sa browser ay sa pamamagitan ng pag-click at pag-type sa iba't ibang elemento. Ang hamon para sa atin bilang developer ay hindi natin alam kung kailan gagawin ng user ang mga operasyong ito!

Ang Event-driven programming ay ang tawag sa uri ng programming na kailangan natin para makagawa ng GUI. Kung susuriin natin ang pariralang ito, makikita natin na ang pangunahing salita dito ay event. Ang Event, ayon sa Merriam-Webster, ay tinutukoy bilang "isang bagay na nangyayari". Perpektong inilalarawan nito ang ating sitwasyon. Alam natin na may mangyayari kung saan nais nating magpatupad ng code bilang tugon, ngunit hindi natin alam kung kailan ito magaganap.

Ang paraan para markahan ang isang bahagi ng code na nais nating patakbuhin ay sa pamamagitan ng paglikha ng function. Kapag iniisip natin ang procedural programming, ang mga function ay tinatawag sa isang tiyak na pagkakasunod-sunod. Ang parehong bagay ay totoo rin sa event-driven programming. Ang pagkakaiba ay kung paano tatawagin ang mga function.

Para pamahalaan ang mga event (pag-click ng button, pag-type, atbp.), nagrerehistro tayo ng event listeners. Ang event listener ay isang function na nakikinig para sa isang event na maganap at nagpapatupad bilang tugon. Ang mga event listener ay maaaring mag-update ng UI, gumawa ng tawag sa server, o anumang kailangang gawin bilang tugon sa aksyon ng user. Nagdaragdag tayo ng event listener gamit ang addEventListener, at nagbibigay ng function na ipapatupad.

NOTE: Mahalaga ring banggitin na maraming paraan para gumawa ng event listeners. Maaari kang gumamit ng anonymous functions, o gumawa ng mga named functions. Maaari kang gumamit ng iba't ibang shortcut, tulad ng pagtatakda ng click property, o paggamit ng addEventListener. Sa ating exercise, magpo-focus tayo sa addEventListener at anonymous functions, dahil ito ang pinakakaraniwang teknik na ginagamit ng mga web developer. Ito rin ang pinaka-flexible, dahil gumagana ang addEventListener para sa lahat ng event, at maaaring ibigay ang pangalan ng event bilang parameter.

Karaniwang mga event

Mayroong maraming mga event na maaari mong pakinggan kapag gumagawa ng application. Halos anumang ginagawa ng user sa isang pahina ay nagdudulot ng event, na nagbibigay sa iyo ng maraming kapangyarihan upang matiyak na makakamit nila ang karanasang nais mo. Sa kabutihang-palad, karaniwang kailangan mo lamang ng ilang mga event. Narito ang ilan sa mga karaniwang event (kasama ang dalawa na gagamitin natin sa paggawa ng ating laro):

click: Ang user ay nag-click sa isang bagay, karaniwang isang button o hyperlink
contextmenu: Ang user ay nag-click gamit ang kanang pindutan ng mouse
select: Ang user ay nag-highlight ng ilang teksto
input: Ang user ay naglagay ng teksto

Paglikha ng laro

Gagawa tayo ng laro upang ma-explore kung paano gumagana ang mga event sa JavaScript. Ang ating laro ay susubok sa kakayahan ng player sa pag-type, na isa sa mga pinaka-underrated na kasanayan na dapat taglayin ng lahat ng developer. Dapat tayong lahat ay nagsasanay sa pag-type! Ang pangkalahatang daloy ng laro ay ganito:

Ang player ay magki-click sa start button at bibigyan ng quote na ita-type
Ang player ay magta-type ng quote nang mabilis hangga't kaya niya sa isang textbox
- Kapag natapos ang bawat salita, ang susunod ay naka-highlight
- Kung may typo ang player, ang textbox ay magiging pula
- Kapag natapos ng player ang quote, isang success message ang ipapakita kasama ang oras na ginugol

Simulan na natin ang paggawa ng laro, at matutunan ang tungkol sa mga event!

File structure

Kakailanganin natin ng tatlong file: index.html, script.js, at style.css. Simulan natin ang pag-set up ng mga ito para mas mapadali ang ating trabaho.

Gumawa ng bagong folder para sa iyong trabaho sa pamamagitan ng pagbukas ng console o terminal window at pag-issue ng sumusunod na command:

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

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

Buksan ang Visual Studio Code

code .

Magdagdag ng tatlong file sa folder sa Visual Studio Code na may mga sumusunod na pangalan:
- index.html
- script.js
- style.css

Gumawa ng user interface

Kung susuriin natin ang mga requirements, alam natin na kakailanganin natin ng ilang elemento sa ating HTML page. Parang isang recipe ito, kung saan kailangan natin ng mga sangkap:

Lugar para ipakita ang quote na ita-type ng user
Lugar para ipakita ang anumang mensahe, tulad ng success message
Isang textbox para sa pag-type
Isang start button

Ang bawat isa sa mga ito ay kakailanganin ng mga ID para magamit natin sa ating JavaScript. Magdaragdag din tayo ng mga reference sa CSS at JavaScript files na gagawin natin.

Gumawa ng bagong file na pinangalanang index.html. Idagdag ang sumusunod na 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>

I-launch ang application

Palaging pinakamahusay na mag-develop nang paunti-unti upang makita kung paano ang hitsura ng mga bagay. I-launch natin ang ating application. Mayroong isang mahusay na extension para sa Visual Studio Code na tinatawag na Live Server na magho-host ng iyong application nang lokal at magre-refresh ng browser tuwing magse-save ka.

I-install ang Live Server sa pamamagitan ng pagsunod sa link at pag-click sa Install
- Magpapakita ang browser ng prompt para buksan ang Visual Studio Code, at pagkatapos ay magpapakita ang Visual Studio Code ng prompt para sa pag-install
- I-restart ang Visual Studio Code kung kinakailangan
Kapag na-install na, sa Visual Studio Code, i-click ang Ctrl-Shift-P (o Cmd-Shift-P) para buksan ang command palette
I-type ang Live Server: Open with Live Server
- Magsisimula ang Live Server sa pag-host ng iyong application
Buksan ang browser at pumunta sa https://localhost:5500
Dapat mo nang makita ang page na ginawa mo!

Magdagdag na tayo ng functionality.

Idagdag ang CSS

Kapag nagawa na ang ating HTML, magdagdag tayo ng CSS para sa pangunahing styling. Kailangan nating i-highlight ang salitang dapat i-type ng player, at kulayan ang textbox kung mali ang na-type nila. Gagawin natin ito gamit ang dalawang klase.

Gumawa ng bagong file na pinangalanang style.css at idagdag ang sumusunod na syntax.

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

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

✅ Pagdating sa CSS, maaari mong i-layout ang iyong pahina ayon sa gusto mo. Maglaan ng kaunting oras upang gawing mas kaakit-akit ang pahina:

Pumili ng ibang font
Kulayan ang mga header
I-resize ang mga item

JavaScript

Kapag nagawa na ang ating UI, oras na para mag-focus sa JavaScript na magbibigay ng logic. Hahatiin natin ito sa ilang hakbang:

Pero una, gumawa ng bagong file na pinangalanang script.js.

Gumawa ng constants

Kakailanganin natin ng ilang bagay para mas mapadali ang programming. Parang isang recipe ulit, narito ang mga kailangan natin:

Array na may listahan ng lahat ng quotes
Empty array para i-store ang lahat ng salita para sa kasalukuyang quote
Space para i-store ang index ng salitang kasalukuyang tina-type ng player
Ang oras kung kailan nag-click ang player sa start

Kakailanganin din natin ng mga reference sa mga UI element:

Ang textbox (typed-value)
Ang quote display (quote)
Ang message (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');

✅ Magdagdag ng mas maraming quotes sa iyong laro

NOTE: Maaari nating kunin ang mga elemento anumang oras sa code gamit ang document.getElementById. Dahil madalas nating gagamitin ang mga element na ito, iiwasan natin ang mga typo sa string literals sa pamamagitan ng paggamit ng constants. Ang mga framework tulad ng Vue.js o React ay makakatulong sa mas mahusay na pamamahala ng centralization ng iyong code.

Maglaan ng oras para manood ng video tungkol sa paggamit ng const, let, at var

🎥 I-click ang imahe sa itaas para sa video tungkol sa variables.

Magdagdag ng start logic

Para simulan ang laro, magki-click ang player sa start. Siyempre, hindi natin alam kung kailan nila ito gagawin. Dito papasok ang event listener. Ang event listener ay magbibigay-daan sa atin na makinig sa isang bagay na magaganap (event) at magpatupad ng code bilang tugon. Sa ating kaso, nais nating magpatupad ng code kapag nag-click ang user sa start.

Kapag nag-click ang user sa start, kailangan nating pumili ng quote, i-setup ang user interface, at i-setup ang tracking para sa kasalukuyang salita at timing. Narito ang JavaScript na kailangan mong idagdag; tatalakayin natin ito pagkatapos ng script block.

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

I-breakdown natin ang code!

I-setup ang word tracking
- Ang paggamit ng Math.floor at Math.random ay nagbibigay-daan sa atin na random na pumili ng quote mula sa quotes array
- I-convert ang quote sa isang array ng words para ma-track ang salitang kasalukuyang tina-type ng player
- I-set ang wordIndex sa 0, dahil magsisimula ang player sa unang salita
I-setup ang UI
- Gumawa ng array ng spanWords, na naglalaman ng bawat salita sa loob ng isang span element
  - Magbibigay-daan ito sa atin na i-highlight ang salita sa display
- I-join ang array para gumawa ng string na magagamit natin upang i-update ang innerHTML sa quoteElement
  - Ipapakita nito ang quote sa player
- I-set ang className ng unang span element sa highlight para i-highlight ito bilang dilaw
- Linisin ang messageElement sa pamamagitan ng pag-set ng innerText sa ''
I-setup ang textbox
- I-clear ang kasalukuyang value sa typedValueElement
- I-set ang focus sa typedValueElement
Simulan ang timer sa pamamagitan ng pagtawag sa getTime

Magdagdag ng typing logic

Habang nagta-type ang player, isang input event ang magaganap. Ang event listener na ito ay magche-check kung tama ang pagta-type ng player, at pamamahalaan ang kasalukuyang status ng laro. Bumalik sa script.js, idagdag ang sumusunod na code sa dulo. I-breakdown natin ito pagkatapos.

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

I-breakdown natin ang code! Nagsisimula tayo sa pagkuha ng kasalukuyang salita at ang value na na-type ng player. Pagkatapos, mayroon tayong waterfall logic, kung saan sine-check natin kung tapos na ang quote, tapos na ang salita, tama ang salita, o (sa wakas), kung may error.

Tapos na ang quote, na ipinapakita ng typedValue na katumbas ng currentWord, at wordIndex na katumbas ng isa na mas mababa sa length ng words
- I-calculate ang elapsedTime sa pamamagitan ng pagbabawas ng startTime mula sa kasalukuyang oras
- I-divide ang elapsedTime sa 1,000 para i-convert mula milliseconds sa seconds
- Ipakita ang success message
Tapos na ang salita, na ipinapakita ng typedValue na nagtatapos sa space (dulo ng salita) at typedValue na katumbas ng currentWord
- I-set ang value sa typedElement sa '' para payagan ang susunod na salita na ma-type
- I-increment ang wordIndex para lumipat sa susunod na salita
- I-loop sa lahat ng childNodes ng quoteElement para i-set ang className sa '' para bumalik sa default display
- I-set ang className ng kasalukuyang salita sa highlight para i-flag ito bilang susunod na salita na ita-type
Tama ang kasalukuyang tina-type na salita (pero hindi pa tapos), na ipinapakita ng currentWord na nagsisimula sa typedValue
- Tiyakin na ang typedValueElement ay naka-display bilang default sa pamamagitan ng pag-clear ng className
Kung umabot tayo sa puntong ito, may error
- I-set ang className sa typedValueElement sa error

Subukan ang iyong application

Nakarating ka na sa dulo! Ang huling hakbang ay tiyakin na gumagana ang ating application. Subukan mo ito! Huwag mag-alala kung may mga error; lahat ng developer ay nakakaranas ng error. Suriin ang mga mensahe at i-debug kung kinakailangan.

I-click ang start, at simulan ang pag-type! Dapat itong magmukhang katulad ng animation na nakita natin kanina.

🚀 Hamon

Magdagdag ng mas maraming functionality

I-disable ang input event listener kapag tapos na, at i-enable ito ulit kapag na-click ang button
I-disable ang textbox kapag natapos ng player ang quote
Magpakita ng modal dialog box na may success message
I-store ang high scores gamit ang localStorage

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Basahin ang tungkol sa lahat ng mga event na magagamit ng developer sa pamamagitan ng web browser, at pag-isipan ang mga sitwasyon kung saan mo gagamitin ang bawat isa.

Assignment

Gumawa ng bagong keyboard game

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.

19 KiB Raw Permalink Blame History