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

Membuat permainan menggunakan acara (events)

Kuiz Pra Kuliah

Kuiz Pra Kuliah

Pengaturcaraan berdasarkan acara

Semasa membuat aplikasi berasaskan penyemak imbas, kami menyediakan antara muka pengguna grafik (GUI) untuk pengguna gunakan ketika berinteraksi dengan apa yang telah kami buat. Cara paling biasa untuk berinteraksi dengan penyemak imbas adalah dengan mengklik dan menaip pelbagai elemen. Cabaran yang kita hadapi sebagai pembangun adalah kita tidak tahu kapan mereka akan melakukan operasi ini!

Pengaturcaraan berdasarkan acara adalah nama untuk jenis pengaturcaraan yang perlu kita lakukan untuk membuat GUI kita. Sekiranya kita memecahkan frasa ini sedikit, kita akan melihat kata intinya di sini adalah event. Event, menurut Merriam-Webster, didefinisikan sebagai "sesuatu yang berlaku". Ini menggambarkan keadaan kita dengan sempurna. Kami tahu ada sesuatu yang akan berlaku dan kami ingin melaksanakan beberapa kod sebagai tindak balas, tetapi kami tidak tahu kapan ia akan berlaku.

Cara kita menandakan bahagian kod yang ingin kita laksanakan adalah dengan membuat fungsi. Apabila kita memikirkan pengaturcaraan prosedural, fungsi dipanggil dalam urutan tertentu. Perkara yang sama akan berlaku dengan pengaturcaraan berdasarkan acara. Perbezaannya adalah bagaimana fungsi akan dipanggil.

Untuk menangani acara (klik butang, menaip, dll.), Kami mendaftarkan pendengar acara. Pendengar peristiwa adalah fungsi yang mendengarkan peristiwa yang berlaku dan dilaksanakan sebagai tindak balas. Pendengar acara boleh mengemas kini UI, membuat panggilan ke pelayan, atau apa sahaja yang perlu dilakukan sebagai tindak balas terhadap tindakan pengguna. Kami menambahkan pendengar acara dengan menggunakan addEventListener, dan menyediakan fungsi untuk dilaksanakan.

CATATAN: Perlu dinyatakan bahawa terdapat banyak cara untuk membuat pendengar acara. Anda boleh menggunakan fungsi tanpa nama, atau membuat fungsi yang dinamakan. Anda boleh menggunakan pelbagai jalan pintas, seperti menetapkan sifat klik, atau menggunakan addEventListener. Dalam latihan kami, kami akan menumpukan pada fungsi addEventLister dan anonim, kerana mungkin teknik yang paling biasa digunakan oleh pembangun web. Ini juga paling fleksibel, kerana addEventListener berfungsi untuk semua acara, dan nama acara dapat diberikan sebagai parameter.

Acara biasa

Terdapat puluhan acara yang tersedia untuk anda dengarkan semasa membuat aplikasi. Pada asasnya apa sahaja yang dilakukan pengguna pada halaman menimbulkan peristiwa, yang memberi anda banyak kekuatan untuk memastikan mereka mendapat pengalaman yang anda inginkan. Nasib baik, anda biasanya hanya memerlukan sebilangan kecil acara. Berikut adalah beberapa perkara biasa (termasuk dua yang akan kami gunakan semasa membuat permainan kami):

• click: Pengguna mengklik sesuatu, biasanya butang atau hyperlink
• contextmenu: Pengguna mengklik butang tetikus kanan
• select: Pengguna menyoroti beberapa teks
• input: Pengguna memasukkan beberapa teks

Membuat permainan

Kami akan membuat permainan untuk meneroka bagaimana acara berfungsi dalam JavaScript. Permainan kami akan menguji kemahiran menaip pemain, yang merupakan salah satu kemahiran paling rendah yang harus dimiliki oleh pemaju. Kita semua mesti berlatih menaip kita! Aliran umum permainan akan kelihatan seperti ini:

• Pemain mengklik butang mula dan disertakan dengan petikan untuk menaip
• Pemain menaip petikan secepat mungkin di kotak teks
  • Apabila setiap perkataan selesai, yang berikutnya diserlahkan
  • Sekiranya pemain mempunyai kesalahan ketik, kotak teks dikemas kini menjadi merah
  • Apabila pemain menyelesaikan petikan, mesej kejayaan akan dipaparkan dengan masa yang berlalu

Mari membina permainan kami, dan belajar tentang acara!

Struktur fail

Kami memerlukan tiga jumlah fail: index.html, script.js dan style.css. Mari mulakan dengan menetapkannya untuk menjadikan hidup lebih mudah bagi kita.

• Buat folder baru untuk kerja anda dengan membuka tetingkap konsol atau terminal dan mengeluarkan perintah berikut:

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

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

• Buka Visual Studio Code

code .

• Tambahkan tiga fail ke folder dalam Visual Studio Code dengan nama berikut:
  • index.html
  • skrip.js
  • style.css

Buat antara muka pengguna (user interface)

Sekiranya kita meneliti syarat-syaratnya, kita tahu kita akan memerlukan segelintir elemen di halaman HTML kita. Ini seperti resipi, di mana kita memerlukan beberapa ramuan:

• Di suatu tempat untuk memaparkan petikan untuk pengguna menaip
• Di suatu tempat untuk memaparkan sebarang mesej, seperti mesej kejayaan
• Kotak teks untuk menaip
• Butang mula

Masing-masing memerlukan ID supaya kita dapat bekerja dengannya dalam JavaScript kita. Kami juga akan menambahkan rujukan ke fail CSS dan JavaScript yang akan kami buat.

Buat fail baru bernama index.html. Tambahkan HTML berikut:

<!-- 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>

Lancarkan aplikasi

Adalah lebih baik untuk mengembangkannya secara berulang untuk melihat bagaimana keadaannya. Mari melancarkan aplikasi kami. Terdapat peluasan hebat untuk Visual Studio Code yang disebut Live Server yang akan menghoskan aplikasi anda secara tempatan dan menyegarkan penyemak imbas setiap kali anda menyimpan.

• Pasang Live Server dengan mengikuti pautan dan mengklik Install
  • Anda akan diminta oleh penyemak imbas untuk membuka Kod Visual Studio, dan kemudian oleh Kod Visual Studio untuk melakukan pemasangan
  • Mulakan semula Kod Visual Studio jika diminta
• Setelah dipasang, dalam Visual Studio Code, klik Ctrl-Shift-P (atau Cmd-Shift-P) untuk membuka perintah pallate
• Taip Pelayan Langsung: Buka dengan Pelayan Langsung
  • Live Server akan mula menghoskan aplikasi anda
• Buka penyemak imbas dan arahkan ke https: // localhost: 5500
• Anda kini harus melihat halaman yang anda buat!

Mari tambahkan beberapa fungsi.

Tambah CSS

Dengan HTML kami dibuat, mari tambahkan CSS untuk gaya inti. Kita perlu mengetengahkan perkataan yang harus ditaip oleh pemain, dan mewarnakan kotak teks jika apa yang mereka taipkan tidak betul. Kami akan melakukan ini dengan dua kelas.

Buat fail baru bernama style.css dan tambahkan sintaks berikut.

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

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

✅ Ketika datang ke CSS, anda boleh mengatur halaman anda sesuka hati. Luangkan sedikit masa dan buat halaman kelihatan lebih menarik:

• Pilih fon yang berbeza
• Warnakan tajuk
• Ubah saiz item

JavaScript

Dengan UI kami dibuat, inilah masanya untuk menumpukan perhatian kami pada JavaScript yang akan memberikan logik. Kami akan membahagikannya kepada beberapa langkah:

• Buat pemalar
• Pendengar acara untuk memulakan permainan
• Pendengar acara untuk menaip

Tetapi pertama, buat fail baru bernama script.js.

Tambahkan pemalar

Kita akan memerlukan beberapa item untuk menjadikan kehidupan kita lebih mudah untuk pengaturcaraan. Sekali lagi, serupa dengan resipi, inilah yang kita perlukan:

• Susun dengan senarai semua petikan
• Susunan kosong untuk menyimpan semua perkataan untuk petikan semasa
• Ruang untuk menyimpan indeks kata pemain sedang menaip
• Masa pemain mengklik permulaan

Kami juga mahu rujukan ke elemen UI:

• Kotak teks (nilai taip)
• Paparan petikan (petikan)
• Mesej (mesej)

// dalam script.js
// semua 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.',
];
// simpan senarai perkataan dan indeks perkataan yang sedang ditaip pemain
let words = [];
let wordIndex = 0;
// masa permulaan
let startTime = Date.now();
// elemen halaman
const quoteElement = document.getElementById('quote');
const messageElement = document.getElementById('message');
const typedValueElement = document.getElementById('typed-value');

✅ Teruskan dan tambahkan lebih banyak petikan ke permainan anda

** CATATAN: ** Kami dapat mengambil elemen bila-bila masa yang kami mahukan dalam kod dengan menggunakan document.getElementById. Oleh kerana hakikatnya kita akan merujuk unsur-unsur ini secara berkala, kita akan mengelakkan kesalahan ketik dengan literal string dengan menggunakan pemalar. Rangka kerja seperti Vue.js atau React dapat membantu anda menguruskan pemusatan kod anda dengan lebih baik.

Luangkan masa sebentar untuk menonton video menggunakan const, let dan var

Klik gambar di atas untuk video mengenai pemboleh ubah.

Tambahkan Logik

Untuk memulakan permainan, pemain akan mengklik pada permulaan. Sudah tentu, kita tidak tahu kapan mereka akan mula klik. Di sinilah seorang pendengar acara mula bermain. Pendengar acara akan membolehkan kita mendengar sesuatu yang berlaku (suatu peristiwa) dan melaksanakan kod sebagai tindak balas. Dalam kes kami, kami ingin melaksanakan kod ketika pengguna mengklik pada permulaan.

Apabila pengguna mengklik start, kita harus memilih sebut harga, menyiapkan antarmuka pengguna, dan penyiapan pelacakan untuk kata dan waktu semasa. Berikut adalah JavaScript yang perlu anda tambahkan; kita membincangkannya selepas blok skrip.

// pada akhir script.js
document.getElementById('start').addEventListener('click', () => {
  // dapatkan quote
  const quoteIndex = Math.floor(Math.random() * quotes.length);
  const quote = quotes[quoteIndex];
  // Masukkan petikan ke dalam susunan kata
  words = quote.split(' ');
  // tetapkan semula indeks kata untuk penjejakan
  wordIndex = 0;

  // Kemas kini UI
  // Buat susunan elemen span supaya kita dapat mengatur kelas
  const spanWords = words.map(function(word) { return `<span>${word} </span>`});
  // Tukar menjadi rentetan dan tetapkan sebagai innerHTML pada paparan petikan
  quoteElement.innerHTML = spanWords.join('');
  // Serlahkan perkataan pertama
  quoteElement.childNodes[0].className = 'highlight';
  // Kosongkan sebarang mesej sebelumnya
  messageElement.innerText = '';

  // Sediakan kotak teks
  // Kosongkan kotak teks
  typedValueElement.value = '';
  // Sediakan fokus
  typedValueElement.focus();
  // tetapkan pengendali acara

  // Mulakan pemasa
  startTime = new Date().getTime();
});

Mari pecahkan kodnya!

• Siapkan penjejakan perkataan
  • Menggunakan Math.floor dan [Math.random](https://developer.mozilla.org/docs / Web / JavaScript / Rujukan / Global_Objects / Matematik / rawak) membolehkan kita memilih petikan secara rawak dari array quotes
  • Kami menukar quote 'menjadi array kata` sehingga kami dapat mengesan perkataan yang sedang ditaip pemain
  • wordIndex ditetapkan ke 0, kerana pemain akan bermula pada kata pertama
• Sediakan UI
  • Buat array spanWords, yang berisi setiap kata di dalam elemen span
    • Ini akan membolehkan kita menonjolkan perkataan di paparan
  • join array untuk membuat rentetan yang dapat kita gunakan untuk mengemas kini innerHTML pada quoteElement
    • Ini akan memaparkan petikan kepada pemain
  • Tetapkan className elemen span pertama ke highlight untuk menyerlahkannya sebagai kuning
  • Bersihkan messageElement dengan menetapkan "innerText" ke ''
• Sediakan kotak teks
  • Kosongkan nilai semasa di typedValueElement
  • Tetapkan fokus ke typedValueElement
• Mulakan pemasa dengan memanggil getTime

Tambahkan logik menaip

Semasa pemain menaip, acara input akan dinaikkan. Pendengar acara ini akan memeriksa untuk memastikan pemain menaip perkataan dengan betul, dan mengendalikan status permainan semasa. Kembali ke script.js, tambahkan kod berikut hingga akhir. Kami akan memecahkannya selepas itu.

// pada akhir skrip.js
typedValueElement.addEventListener('input', () => {
  // Dapatkan perkataan semasa
  const currentWord = words[wordIndex];
  // dapatkan nilai semasa
  const typedValue = typedValueElement.value;

  if (typedValue === currentWord && wordIndex === words.length - 1) {
    // akhir ayat
    // Paparkan kejayaan
    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) {
    // akhir kata
    // kosongkan typedValueElement untuk perkataan baru
    typedValueElement.value = '';
    // beralih ke perkataan seterusnya
    wordIndex++;
    // tetapkan semula nama kelas untuk semua elemen dalam petikan
    for (const wordElement of quoteElement.childNodes) {
      wordElement.className = '';
    }
    // serlahkan perkataan baru
    quoteElement.childNodes[wordIndex].className = 'highlight';
  } else if (currentWord.startsWith(typedValue)) {
    // betul sekarang
    // serlahkan perkataan seterusnya
    typedValueElement.className = '';
  } else {
    // keadaan ralat
    typedValueElement.className = 'error';
  }
});

Mari pecahkan kodnya! Kami mulakan dengan merebut perkataan semasa dan nilai yang ditaip pemain sejauh ini. Kemudian kita mempunyai logik air terjun, di mana kita memeriksa apakah petikannya lengkap, kata itu lengkap, kata itu betul, atau (akhirnya), jika ada kesalahan.

• Kutipan selesai, ditunjukkan oleh typedValue sama dengan currentWord, dan wordIndex sama dengan satu yang kurang daripanjang 'kata-kata
  • Hitung elapsedTime dengan mengurangkan startTime dari waktu semasa
  • Bahagikan elapsedTime dengan 1,000 untuk menukar dari milisaat hingga saat
  • Paparkan mesej kejayaan
• Kata lengkap, ditunjukkan oleh typedValue yang diakhiri dengan spasi (akhir kata) dan typedValue sama dengan currentWord
  • Tetapkan "nilai" pada "typedElement" menjadi "" untuk membolehkan kata berikutnya ditaip
  • Kenaikan wordIndex untuk beralih ke kata seterusnya
  • Gelung semua "childNodes" "quoteElement" untuk menetapkan "className" ke "" untuk kembali ke paparan lalai
  • Tetapkan className dari kata semasa ke` highlight 'untuk menandakannya sebagai kata seterusnya untuk menaip
• Word saat ini ditaip dengan betul (tetapi tidak lengkap), ditunjukkan oleh currentWord yang dimulakan dengan typedValue
  • Pastikan typedValueElement dipaparkan sebagai lalai dengan membersihkan className
• Sekiranya kita berjaya sejauh ini, kita mempunyai ralat
  • Tetapkan className pada typedValueElement ke error

Uji aplikasi anda

Anda berjaya sampai akhir! Langkah terakhir adalah memastikan aplikasi kita berfungsi. Cubalah! Jangan risau sekiranya terdapat kesilapan; semua pembangun mempunyai kesilapan. Teliti mesej dan debug mengikut keperluan.

Klik start, dan mula menaip! Ia semestinya kelihatan seperti animasi yang kita lihat sebelumnya.

---

🚀 Cabaran

Tambahkan lebih banyak fungsi

• Lumpuhkan pendengar acara input setelah selesai, dan aktifkan semula apabila butang diklik
• Lumpuhkan kotak teks semasa pemain menyelesaikan petikan
• Paparkan kotak dialog mod dengan mesej kejayaan
• Simpan skor tinggi menggunakan localStorage

Kuiz Pasca Kuliah

Kuiz Pasca Kuliah

Mengkaji & Belajar Sendiri

Bacalah semua acara yang ada kepada pembangun melalui penyemak imbas web, dan pertimbangkan senario di mana anda akan menggunakannya.

Tugasan

Buat permainan papan kekunci baru