Halo Untuk mengantisipasi dimulainya kursus "Pengembang JavaScript Fullstack", salah satu penulis kami memutuskan untuk berbagi pengalamannya dalam membuat simulator untuk pengetikan sentuh. Dan pada gilirannya, kami ingin menunjukkan kepada Anda materi ini.
Halo semuanya! Hari ini saya memutuskan untuk menunjukkan cara menulis simulator pengetikan sentuh dalam JavaScript. Saya pikir kita masing-masing di awal jalur melatih hasil cetaknya - lagipula, ini adalah salah satu keterampilan pengembang yang paling penting
.
Ada banyak situs dan program di Internet yang dapat membantu Anda mengasah keterampilan mengetik dan bersenang-senang. Ada permainan untuk
anak -
anak , ada
permainan di mana Anda dapat bersaing dengan orang lain yang mencetak lebih cepat! Tetapi misalkan kita ingin membuat simulator pencetakan dengan desain dan kecepatan yang kita inginkan. Dan hari ini kita akan mencoba untuk menulis bagian pertama dari aplikasi kita, tetapi di mana itu akan memungkinkan untuk dimainkan
sekarang .
Jadi, sebagai kerangka kerja tata letak, saya memilih
Bulma.css . Bulma cukup beragam, dan dengan bantuannya Anda dapat melakukannya tanpa menulis css Anda setidaknya pada tahap pertama.
Jadi, mari kita mulai dengan membuat halaman utama. Agar tidak membuang-buang ruang pada kode yang sama untuk semua orang, saya akan mengatakan bahwa di tag
head saya menghubungkan file
javascript ,
bulma , dan
favicon .
<body> <section class="hero is-primary is-large"> <div class="hero-head container"> <h1 class="label is-size-3 has-text-white promo"> </h1> <h3 class="label is-size-4 has-text-link has-text-centered"></h3> <progress id="prog" class="progress is-danger" value="0" max="20"></progress> <h3 class="label is-size-5 has-text-white has-text-centered begin">Press Enter to Start</h3> </div> <div class="hero-body has-background-grey-dark "> <div id="columns"> <div class="buttons columns is-half is-centered "> </div> </div> </div> </section> </body>
Kami membuat panel kecil di mana ada undangan untuk pengguna kami untuk bermain dengan menekan tombol Enter. Pada elemen
buttons , kita akan menggambar tombol kita, yang akan dihasilkan secara acak oleh JS kita. Idealnya, kemajuan dengan kesalahan harus disembunyikan sebelum dimulainya permainan, mungkin kita akan memperbaikinya di bagian selanjutnya.
Oke,
index.html siap, dan
bulma merawat keindahan dan tata letak. Sekarang kita bisa menyelam ke js kita.
Tombol apa pada keyboard yang dilatih terlebih dahulu? Saya pikir semua orang sadar bahwa jari telunjuk Anda harus terletak pada tombol
j dan
f (aplikasi kita akan mengurai tata letak bahasa Inggris sebagai yang paling berguna (programmer 1C, maafkan saya jika Anda bisa)). Jari tengah harus masing-masing pada
k dan
d , dan sebagai tambahan adalah penting bahwa selama latihan kita juga menekan spasi. Total, dalam versi asli kami, kami membutuhkan 5 karakter.
Tidak lebih cepat dikatakan daripada dilakukan. Kami membuat array di mana semua kunci kami berada. Selain itu, kami akan membuat array warna, karena simulator, yang semua hurufnya satu warna, sangat membosankan dan tidak nyaman:
let colors = ['is-info', 'is-success', 'is-warning', 'is-danger', 'is-link'];
Nah, dengan serangkaian warna dan simbol, kami memutuskan. Selanjutnya, kita mendapatkan semua elemen DOM yang diperlukan untuk pekerjaan lebih lanjut:
let begin = document.querySelector(".begin");
Hebat, elemen dasar diterima. Sekarang Anda dapat mulai membuat logika aplikasi kami. Kami membuat fungsi yang dengan bantuan generator acak akan menghasilkan simbol kami untuk kami. Pertama, kami memberikan kode fungsi yang mengembalikan angka acak dari 0 ke angka maksimum yang diberikan. Ini adalah fungsi pembuatan angka acak klasik dari dokumentasi MDN:
function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); }
Oke, sekarang semuanya sudah siap, saatnya untuk mulai menghasilkan elemen DOM:
function drawBoard() { for (let index = 0; index < 20; index++) {
Fungsi siap, sekarang perlu dipanggil. Saya mengingatkan Anda bahwa permulaan permainan terjadi dengan menekan tombol Enter, dan kami masih ingin menyembunyikan tulisan yang mengundang. Namun, gim dan gambar harus dipanggil hanya sekali, jadi kami menggunakan argumen
once untuk
addEventListener :
document.addEventListener('keydown', StartGame, { once: true
Dan di sini adalah fungsi
StartGame :
function StartGame(e) { if (e.key == "Enter") { drawBoard(); begin.style.display = "none";
Di
mainGame , kami mendengarkan semua tombol yang ditekan sehingga kami dapat memahami apakah pengguna menekan tombol pada keyboard dengan benar atau tidak:
function mainGame() { document.addEventListener('keyup', press);
Jadi, dengan fungsi-fungsi penghubung kembali ini, kami sampai pada permainan utama. Mari kita pikirkan tentang variabel yang kita butuhkan. Kita membutuhkan variabel yang akan menghitung kesalahan kita dan variabel yang akan kita tambahkan nilainya ketika berhasil ditekan:
var count_right = 0; var errors_count = 0;
Oke, yang paling mendasar dan enak ada di depan. Untuk keserbagunaan, sehingga aplikasi kita tidak begitu bergantung pada tata letak Rusia dan Inggris, kita bisa menggunakan
keyCode , tetapi ini akan menyulitkan kode. Kita perlu mendapatkan semua karakter yang dihasilkan dan, jika tombol pada keyboard cocok dengan id elemen kita (catatan, saya juga
drawBoard() untuk
drawBoard() setiap elemen yang sama dengan konten teks elemen. Tanpa ragu, Anda hanya bisa membaca konten melalui
textContent , dan di masa depan, mungkin kita akan melakukannya), maka elemen tersebut dihapus. Dalam kasus lain, tambahkan nilai ke variabel yang mempertimbangkan kesalahan pengguna dan menuliskannya dalam
progress :
function press(e) { let elements_arr = document.querySelectorAll(".game-buttons");
Wow! Sekarang aplikasi kita harus siap dan dapat diuji.
Di bagian kedua artikel, kami akan menyelesaikan aplikasi dengan menambahkan penghematan hasil lokal, musik jarum jam, suara klik, animasi, papan peringkat, dan versi aplikasi yang telah diasah hanya untuk programmer, serta memperbaiki bug kecil. Jika ada lebih banyak ide dan komentar, saya menunggu Anda di komentar.
Berikut adalah materi semacam itu. Kami mengingatkan Anda bahwa
materi ini ditulis oleh penulis lepas dan tidak terkait dengan proses pendidikan. Jika Anda tertarik pada pendidikan dan ingin mempelajari lebih lanjut tentang kursus, kami mengundang Anda ke hari terbuka , yang akan diadakan pada hari Senin .