Cara Mengubah Suai Nilai Pemasa JavaScript untuk Permainan Menaip Menggunakan Butang HTML

Pelarasan Pemasa Dinamik untuk Permainan Menaip Menggunakan Butang

Dalam permainan menaip, mengawal rentak permainan adalah penting untuk memastikan pengalaman pengguna yang menarik. Satu faktor penting ialah pemasa, yang menentukan berapa lama pengguna perlu menyelesaikan permainan atau cabaran menaip. Dengan membenarkan pengguna melaraskan pemasa permainan melalui butang HTML mudah, anda boleh memberi mereka lebih kawalan ke atas permainan mereka.

Artikel ini akan menunjukkan kepada anda cara membuat penyelesaian dalam JavaScript yang membolehkan pemain memilih antara tetapan pemasa yang berbeza menggunakan butang. Sebagai contoh, memilih butang '30s' akan melaraskan pemasa kepada 30 saat, manakala mengklik butang '60s' menukarnya kepada 60 saat.

Fungsi JavaScript akan mengambil nilai daripada butang yang diklik dan mengemas kini pemasa dan tajuk permainan secara dinamik. Fleksibiliti jenis ini boleh meningkatkan pengalaman pengguna, menjadikan permainan lebih boleh disesuaikan dan menyeronokkan untuk tahap kemahiran yang berbeza.

Pada penghujung panduan ini, anda akan mempunyai ciri pelarasan pemasa berfungsi sepenuhnya menggunakan HTML dan JavaScript. Kami juga akan membincangkan cara mengemas kini nilai pemasa yang dipaparkan pada tajuk halaman untuk menggambarkan tempoh pemasa yang dipilih.

Perintah	Contoh penggunaan
document.querySelector()	Digunakan untuk memilih elemen HTML
addEventListener()	Mengikat peristiwa tertentu (cth., klik) pada elemen butang. Dalam konteks ini, ia digunakan untuk mencetuskan fungsi changeTimer() apabila pengguna mengklik butang, membenarkan interaksi dinamik dengan tetapan pemasa.
innerText	Sifat ini membenarkan untuk mengubah suai teks yang boleh dilihat dalam elemen HTML. Dalam penyelesaian ini, ia digunakan untuk mengemas kini nilai pemasa dalam tajuk halaman apabila butang diklik.
onClick	Atribut pengendali acara sebaris yang digunakan dalam pendekatan alternatif untuk melampirkan fungsi changeTimer() terus ke acara klik butang. Ini membolehkan cara yang lebih mudah dan kurang modular untuk mengemas kini pemasa secara dinamik.
test()	Kaedah ini digunakan dalam ujian unit dengan Jest. Ia mentakrifkan kes ujian di mana fungsi yang sedang diuji (cth., changeTimer()) dinilai untuk memastikan pemasa dikemas kini dengan betul. Ia memastikan kod berkelakuan seperti yang diharapkan dalam senario yang berbeza.
expect()	Perintah Jest yang menyemak sama ada nilai sebenar (seperti pemasa dikemas kini) sepadan dengan nilai yang dijangkakan. Ia digunakan dalam ujian unit untuk mengesahkan bahawa gameTime dan document.title dikemas kini dengan betul selepas butang klik.
toBe()	Satu lagi perintah Jest yang memeriksa kesamarataan yang ketat. Ia memastikan bahawa selepas memanggil changeTimer(), masa permainan adalah tepat seperti yang dijangkakan (cth., 30,000 ms selama 30 saat).
getElementById()	Digunakan untuk memilih butang tertentu mengikut ID mereka (cth., 'tiga puluh', 'enam puluh'). Kaedah ini penting untuk melampirkan pendengar acara pada butang dan mencetuskan perubahan dinamik pemasa sebagai tindak balas kepada interaksi pengguna.

Mencipta Pemasa Dinamik Menggunakan JavaScript dan Butang HTML

Skrip yang disediakan di atas direka bentuk untuk membolehkan pengguna melaraskan pemasa permainan secara dinamik dalam permainan menaip dengan mengklik butang HTML. Pada mulanya, kami mengisytiharkan pembolehubah , yang menahan masa dalam milisaat (30 saat secara lalai, didarab dengan 1000 untuk menukar kepada milisaat). Fungsi utama terletak pada fungsi, yang mengemas kini nilai pemasa berdasarkan butang yang diklik. Kaedah ini menerima nilai butang (cth., 30, 60, atau 90) dan mengemas kini masa permainan berubah dengan sewajarnya. Selain itu, skrip mengemas kini tajuk halaman untuk menggambarkan tempoh pemasa yang dipilih, menjelaskan kepada pengguna berapa banyak masa yang mereka ada.

Untuk tingkah laku dinamik, kami menggunakan pendengar acara, khususnya perintah. Ini membolehkan skrip bertindak balas apabila pengguna mengklik mana-mana butang. Setiap butang diberikan ID dan, apabila diklik, mencetuskan fungsi, melepasi nilai masa masing-masing. Pendekatan ini berguna untuk mengendalikan berbilang butang dengan cekap tanpa memerlukan JavaScript sebaris berulang dalam struktur HTML. Skrip juga termasuk pilihan sandaran di mana anda boleh menggunakan pengendali acara sebaris seperti jika kesederhanaan lebih diutamakan daripada modulariti.

Dalam penyelesaian alternatif, kami secara langsung mengikat acara ke butang. Kaedah ini melaksanakan berfungsi secara langsung apabila butang diklik. Ia adalah pendekatan yang mudah tetapi tidak mempunyai fleksibiliti kaedah pendengar acara. Kesederhanaan kaedah ini berguna untuk aplikasi yang lebih kecil dan kurang kompleks. Walau bagaimanapun, untuk kod yang lebih berskala, pendengar acara menawarkan lebih fleksibiliti dan membenarkan kemas kini yang lebih mudah pada skrip tanpa mengubah suai struktur HTML secara langsung. Kedua-dua kaedah bertujuan untuk menyelesaikan masalah yang sama, iaitu melaraskan pemasa dan mengemas kini tajuk secara dinamik berdasarkan pemilihan pengguna.

Akhir sekali, kami melaksanakan ujian unit menggunakan Jest, rangka kerja ujian JavaScript. The fungsi adalah penting untuk mengesahkan bahawa pemasa dikemas kini dengan betul. Dengan menguji berbilang senario, seperti sama ada pemasa melaraskan kepada 30 saat, 60 saat atau 90 saat, ujian unit ini memastikan ketepatan skrip. Perintah seperti dan digunakan untuk mengesahkan bahawa nilai pemasa sebenar dan tajuk halaman sepadan dengan hasil yang dijangkakan. Fasa ujian ini memastikan logik pemasa anda berfungsi dengan baik merentas kes penggunaan yang berbeza, memberikan keyakinan terhadap keteguhan penyelesaian anda.

// Solution 1: Using event listeners to change timer value dynamically
let gameTime = 30 * 1000; // Default timer set to 30 seconds
const titleElement = document.querySelector('title');
function changeTimer(value) {
    gameTime = value * 1000; // Update timer to selected value
    titleElement.innerText = value + 's'; // Update the title
}
// Attach event listeners to buttons
document.getElementById('thirty').addEventListener('click', () => changeTimer(30));
document.getElementById('sixty').addEventListener('click', () => changeTimer(60));
document.getElementById('ninety').addEventListener('click', () => changeTimer(90));
// HTML Buttons:
// <button id="thirty" type="button">30s</button>
// <button id="sixty" type="button">60s</button>
// <button id="ninety" type="button">90s</button>

<script>
let gameTime = 30 * 1000;
function changeTimer(value) {
    gameTime = value * 1000;
    document.title = value + 's';
}
</script>
<button onClick="changeTimer(30)">30s</button>
<button onClick="changeTimer(60)">60s</button>
<button onClick="changeTimer(90)">90s</button>

// Jest Test Cases
test('Timer should update to 30 seconds', () => {
    changeTimer(30);
    expect(gameTime).toBe(30000);
    expect(document.title).toBe('30s');
});
test('Timer should update to 60 seconds', () => {
    changeTimer(60);
    expect(gameTime).toBe(60000);
    expect(document.title).toBe('60s');
});
test('Timer should update to 90 seconds', () => {
    changeTimer(90);
    expect(gameTime).toBe(90000);
    expect(document.title).toBe('90s');
});

Meningkatkan Interaksi Permainan dengan Penyesuaian Pemasa

Satu lagi aspek yang perlu dipertimbangkan semasa menukar pemasa dalam permainan menaip ialah keseluruhan pengalaman pengguna dan antara muka. Selain melaraskan pemasa permainan melalui butang, adalah penting untuk memberi pemain maklum balas visual tentang pemasa pilihan mereka. Ini boleh dicapai dengan mengemas kini elemen lain pada halaman, seperti paparan kira detik. Selepas butang diklik untuk menetapkan pemasa, pemasa undur harus bermula serta-merta, memberikan maklum balas masa nyata kepada pengguna. Ini memastikan interaksi lancar dan intuitif, menjadikan permainan lebih menarik.

Untuk melaksanakan ini, anda boleh menggunakan JavaScript fungsi. Setelah pemasa ditetapkan, setInterval boleh digunakan untuk membuat kira detik yang mengurangkan nilai pemasa setiap saat. Apabila pemasa mencecah sifar, fungsi boleh menghentikan permainan atau memberi amaran kepada pengguna bahawa masa telah tamat. Fungsi ini, digabungkan dengan keupayaan untuk menukar pemasa secara dinamik menggunakan butang, meningkatkan pengalaman permainan dengan ketara. Antara muka responsif adalah kunci untuk memastikan pemain sentiasa terlibat, dan maklum balas masa nyata adalah satu cara untuk mencapainya.

Tambahan pula, pengendalian ralat harus dipertimbangkan. Sebagai contoh, jika pengguna cuba memulakan permainan tanpa menetapkan pemasa, anda boleh menggesa mereka dengan mesej untuk memilih masa yang sah. Dengan menggabungkan mekanisme pengesahan, anda memastikan permainan ini beroperasi dengan lancar dan mengurangkan potensi isu. Pengesahan jenis ini bukan sahaja meningkatkan pengalaman pengguna tetapi juga menyumbang kepada kebolehpercayaan permainan anda, memastikan pemain tidak menghadapi kekeliruan yang tidak perlu.

1. Bagaimana saya menggunakan untuk membuat kira detik?
2. Anda boleh gunakan dengan menetapkannya untuk melaksanakan setiap 1000 milisaat (1 saat) dan mengurangkan nilai pemasa setiap kali. Apabila nilai mencapai sifar, anda boleh menghentikan undur menggunakan .
3. Apakah tujuan ?
4. digunakan untuk menghentikan kira detik atau sebarang tindakan berulang lain yang dimulakan oleh . Adalah penting untuk memastikan kiraan detik dihentikan apabila ia mencapai sifar.
5. Bagaimanakah saya boleh mengemas kini tajuk HTML secara dinamik?
6. guna untuk menetapkan teks tajuk halaman. Ini boleh dikemas kini dalam anda fungsi berdasarkan nilai masa yang dipilih.
7. Bolehkah saya menangani ralat pengguna semasa memilih pemasa?
8. Ya, anda boleh menambah pengesahan dengan menyemak sama ada pilihan pemasa yang sah telah dipilih sebelum memulakan kira detik. Jika tiada masa yang sah dipilih, anda boleh memaparkan amaran atau gesaan.
9. Bagaimanakah cara saya mencetuskan fungsi apabila butang diklik?
10. Anda boleh melampirkan fungsi pada butang menggunakan atau dengan terus menggunakan dalam elemen HTML butang.

Menggabungkan pelarasan pemasa dinamik dalam permainan menaip meningkatkan pengalaman pemain dengan ketara. Dengan membenarkan pengguna menukar pemasa menggunakan butang HTML mudah dan mengemas kini antara muka permainan dalam masa nyata, pembangun boleh menjadikan permainan mereka lebih interaktif dan fleksibel. Kawalan jenis ini membantu untuk menampung tahap kemahiran yang berbeza.

Menggunakan amalan terbaik seperti pendengar acara, pengendalian ralat dan ujian unit memastikan permainan berjalan lancar dan memberikan pengalaman pengguna yang boleh dipercayai. Melaksanakan ciri ini bukan sahaja akan meningkatkan kefungsian permainan tetapi juga memastikan pemain lebih terlibat dengan mekanik yang responsif dan mesra pengguna.