Bagaimana Membangun Guesser Nomor di Game HTML5 Anda - dummies

Dengan nomor acak, Anda dapat membuat game HTML5 yang menarik. Lihatlah permainan sederhana yang menggunakan HTML, CSS, dan JavaScript bersama-sama. Game ini memiliki sejumlah fitur menarik:

• Ini menggunakan halaman web sebagai antarmuka. Seperti banyak program JavaScript lainnya, ia menggunakan halaman web sebagai antarmuka pengguna. Elemen masukan digunakan untuk input, div adalah elemen output utama, dan sebuah tombol memicu semua tindakan.

• Menggunakan CSS untuk styling. Berbagai bagian halaman diformat dengan CSS. CSS disimpan dalam style sheet eksternal untuk kemudahan dan usabilitas.

• Ini memberitahu pengguna berapa banyak belokan yang dia ambil. Pada setiap celah, komputer mengingatkan pengguna berapa banyak belokan yang terjadi.

• Saat pengguna menebak dengan benar, tombol Restart akan muncul. Tombol ini tersembunyi pada awalnya, dan hanya muncul bila dibutuhkan.

• Jawaban yang benar tersedia bagi pemrogram melalui fitur debugging khusus. Saat menguji program, pengembang dapat melihat jawaban yang benar, namun informasi ini tersembunyi dari pengguna.

• Fungsi init () memulai permainan. Fungsi init () menginisialisasi game. Ini disebut saat program pertama dimulai dan lagi saat pengguna ingin memulai dari awal lagi.

• Fungsi lain dilekatkan pada tombol. Saat pengguna mengklik tombol Check Your Guess, perkiraan pengguna saat ini dibandingkan dengan jawaban yang benar, dan petunjuk dikembalikan ke pengguna.

  

Bagaimana merancang program permainan

Bila Anda membangun sebuah program yang kompleks, Anda perlu memulai dengan rencana desain.

Sebagian besar pekerjaan dalam pengembangan game terjadi sebelum Anda memulai pemrograman. Jika Anda merancang permainan dengan baik, pemrogramannya jauh lebih mudah dilakukan. Sebuah desain permainan membantu Anda memahami banyak hal tentang permainan sebelum Anda mulai menulis kode:

• Tata letak umum: Meskipun tata letak tidak sepenuhnya ditentukan oleh gambar ini, mudah untuk melihat tampilan umum.

• Elemen yang dinamai: Setiap elemen yang perlu diberi nama telah ditentukan, dan namanya tertulis di dokumen. Beberapa elemen (seperti tombol pertama) tidak memerlukan nama karena tidak akan disebut kode.

• Tombol fungsi: Setiap tombol akan memanggil fungsi. Diagram menunjukkan fungsi mana yang masing-masing tombol panggil.

• Fungsi rencana: Setiap fungsi direncanakan dengan deskripsi bahasa Inggris tentang apa fungsi yang akan dilakukan.

• Variabel global: Variabel yang perlu dibagi antara fungsi dijelaskan.

Sebenarnya sulit untuk membuat dokumen desain yang bagus, namun hal itu membuat pemrograman menjadi sedikit lebih mudah. Sulit untuk mencari tahu apa yang ingin Anda lakukan, dan juga sulit untuk mengetahui bagaimana melakukannya. Memiliki dokumen desain memisahkan kedua proses itu sehingga Anda dapat berkonsentrasi terlebih dulu pada apa yang Anda lakukan, kemudian khawatir tentang bagaimana Anda akan melakukannya. Bagaimana membangun HTML untuk permainan Kode HTML untuk permainan menebak angka cukup mudah untuk ditulis jika Anda merancang permainan di atas kertas terlebih dahulu. Inilah kodenya: Nomor Guesser Nomor Guesser

Saya memikirkan angka antara 0 dan 100. Tebak nomor saya, dan saya akan tahu apakah Anda terlalu tinggi, terlalu rendah, atau benar. Coba tebak tebakan Anda coba lagi

Menyenangkan untuk memisahkan HTML, CSS, dan JavaScript karena praktik ini memungkinkan Anda untuk "membagi dan menaklukkan" masalah besar ke dalam sejumlah masalah yang lebih kecil. Berikut adalah fitur utama dari dokumen HTML:

Tautkan ke CSS di file eksternal.

Saat ini, CSS tidak penting, jadi Anda memindahkannya ke file terpisah sehingga Anda dapat menggunakannya nanti.
Outsource kode JavaScript.

Anda juga memindahkan kode JavaScript ke file eksternal sehingga Anda tidak perlu khawatir lagi. Dalam kode HTML, cukup buat link ke file eksternal.

1. Buat formulir sebagai komponen utama halaman.

   Aspek yang paling penting dari halaman ini adalah formulirnya. Seperti kebanyakan bentuk, ia akan memiliki fieldset, label, elemen masukan, dan tombol.

2. Buat div untuk output

   Keluaran div hanya div biasa. Anda memasukkannya ke dalam fieldset sehingga akan mempertahankan tautan visual ke keseluruhan formulir. Anda dapat memasukkan teks default ke dalam div (meskipun Anda mungkin akan mengubah teks ini nanti). Karena div akan disebut melalui kode, dibutuhkan atribut id.

3. Buat area masukan untuk tebakan pengguna.

   Pengguna perlu mengetikkan beberapa jenis masukan numerik. Gunakan elemen masukan untuk tujuan ini. Lihat dokumentasi Anda untuk mengingat id dari elemen ini. (Anda

4. benar-benar

   membuat dokumen desain, bukan?) Senang menambahkan label pada input sehingga pengguna tahu apa yang diharapkan di sana.

5. Buat sebuah tombol untuk memeriksa tebakan.

   Pengguna tidak melakukan tebakan sampai dia mengklik tombol Check Your Guess. Jadi, Anda benar-benar harus memiliki tombol seperti itu. Tombol ini tidak memerlukan nama, tapi akan memanggil fungsi checkGuess (). Buat tombol kedua untuk memulai lagi. Salah satu fitur menarik dari program ini adalah tombol yang memungkinkan pengguna untuk me-restart. Tombol kedua ini hanya tersedia bila pengguna sudah benar menebak jawabannya. Anda membuatnya dengan HTML biasa dan menggunakan trik CSS dan JavaScript untuk membuatnya hilang dan muncul sesuai permintaan.