Cara Membina Number Guesser dalam Permainan HTML5 Anda - dummies

Dengan nombor rawak, anda boleh membuat permainan HTML5 yang menarik. Lihatlah permainan mudah yang menggunakan HTML, CSS, dan JavaScript bersama-sama. Permainan ini mempunyai beberapa ciri menarik:

Ia menggunakan laman web sebagai antara muka. Seperti banyak program JavaScript, ia menggunakan laman web sebagai antara muka pengguna. Unsur input digunakan untuk input, div adalah elemen output utama, dan satu butang mencetuskan semua tindakan.
Ia menggunakan CSS untuk gaya. Berbagai bahagian halaman diformat dengan CSS. CSS disimpan dalam lembaran gaya luaran untuk kemudahan dan kebolehbasaian semula.
Ia memberitahu pengguna berapa banyak lilitan yang telah diambilnya. Pada setiap pas, komputer mengingatkan pengguna berapa banyak lilitan yang telah berlaku.
Apabila pengguna telah menangkap dengan betul, butang Restart muncul. Butang ini disembunyikan pada mulanya, dan muncul hanya apabila diperlukan.
Jawapan yang tepat boleh didapati untuk pengaturcara melalui ciri debugging khas. Semasa menguji program, pemaju boleh melihat jawapan yang betul, tetapi maklumat ini tersembunyi dari pengguna.
Fungsi init () memulakan permainan. Fungsi init () berfungsi memulakan permainan. Ia dipanggil apabila program pertama bermula dan lagi apabila pengguna ingin memulakan.
Fungsi lain dilampirkan pada butang. Apabila pengguna mengklik butang Semak Tangkapan Anda, tontonan pengguna semasa dibandingkan dengan jawapan yang betul, dan petunjuk dikembalikan kepada pengguna.

Bagaimana untuk merekabentuk program permainan

Apabila anda membina program yang kompleks, anda perlu memulakan dengan rancangan reka bentuk.

Banyak kerja dalam perkembangan permainan berlaku sebelum anda memulakan pengaturcaraan. Jika anda merancang permainan dengan baik, pengaturcaraan adalah lebih mudah dilakukan. Reka bentuk permainan membantu anda memahami banyak perkara mengenai permainan sebelum anda menulis kod:

Susun atur umum: Walaupun susun atur tidak sepenuhnya diputuskan oleh lukisan ini, mudah untuk melihat rupa umum.
Unsur dinamakan: Setiap elemen yang perlu mempunyai nama telah ditentukan, dan nama-nama ditulis pada dokumen itu. Beberapa elemen (seperti butang pertama) tidak memerlukan nama kerana mereka tidak akan dirujuk dalam kod.
Fungsi butang: Setiap butang akan memanggil fungsi. Rajah menunjukkan fungsi mana-mana butang akan dipanggil.
Pelan fungsi: Setiap fungsi dirancang dengan penerangan bahasa Inggeris tentang fungsi yang akan dilakukan.
Pembolehubah Global: Pembolehubah yang perlu dikongsi antara fungsi diterangkan.

Sebenarnya sukar untuk membuat dokumen reka bentuk yang baik, tetapi dengan demikian menjadikan pengaturcaraan agak mudah. Sukar untuk memikirkan apa yang anda cuba lakukan, dan juga sukar untuk memikirkan cara melakukannya. Mempunyai dokumen reka bentuk memisahkan kedua-dua proses itu supaya anda dapat terlebih dahulu menumpukan pada apa yang anda lakukan, dan kemudian bimbang tentang bagaimana anda akan melakukannya.

Bagaimana untuk membina HTML untuk permainan

Kod HTML untuk permainan meneka nombor adalah cukup mudah untuk ditulis jika anda telah merancang permainan di atas kertas terlebih dahulu. Berikut adalah kod berikut:

Number Guesser

Number Guesser
Saya memikirkan nombor antara 0 dan 100. Tebak nombor saya, dan saya akan beritahu jika anda terlalu tinggi, terlalu rendah, atau betul. Tebak Anda semak tekaan anda cuba lagi

Adalah baik untuk memisahkan HTML, CSS, dan JavaScript kerana amalan ini membolehkan anda untuk "membahagikan dan menakluk" masalah besar ke dalam beberapa masalah yang lebih kecil. Berikut adalah ciri utama dokumen HTML:

Pautan ke CSS dalam fail luaran.

Pada masa ini, CSS tidak kritikal, jadi anda mengalihkannya ke dalam fail berasingan supaya anda boleh bekerjasama dengannya kemudian.
Outsource kod JavaScript.

Anda juga mengalihkan kod JavaScript ke dalam fail luaran supaya anda tidak perlu risau lagi. Dalam kod HTML, hanya buat hubungan dengan fail luaran.
Bina borang sebagai komponen utama halaman.

Aspek yang paling penting dalam halaman ini ialah borang. Seperti kebanyakan bentuk, ia akan mempunyai medan, label, elemen input dan butang.
Buat div untuk output.

Div output hanya div biasa. Anda meletakkannya di dalam medan medan supaya ia akan mengekalkan pautan visual ke seluruh bentuk. Anda boleh meletakkan teks lalai di dalam div (walaupun anda mungkin akan mengubah teks ini kemudian). Kerana div akan dirujuk melalui kod, ia memerlukan atribut id.
Buat kawasan input untuk meneka pengguna.

Pengguna perlu menaip beberapa jenis input angka. Gunakan elemen masukan untuk tujuan ini. Rujuk dokumentasi anda untuk mengingati id elemen ini. (Anda melakukan membuat dokumen reka bentuk, bukan?) Adalah baik untuk menambah label pada input supaya pengguna tahu apa yang diharapkan di sana.
Bina satu butang untuk memeriksa tekaan.

Pengguna tidak melakukan tekaan sehingga dia mengklik butang Semak Tangkapan Anda. Jadi, anda benar-benar perlu mempunyai butang sedemikian. Butang ini tidak memerlukan nama, tetapi ia akan memanggil fungsi checkGuess ().
Bina butang kedua untuk bermula sekali lagi.

Satu ciri menarik program ini adalah butang yang membolehkan pengguna memulakan semula. Butang kedua ini hanya tersedia apabila pengguna betul meneka jawapannya. Anda membuatnya dengan HTML biasa dan menggunakan helah CSS dan JavaScript untuk membuatnya hilang dan muncul apabila diminta.