Jadi untuk memastikan bahwa komputer benar-benar dapat menyelesaikan permainan itu dan menebak angka yang
tepat, kita perlu memeriksa apa yang ditebak komputer dan kemudian mengakhiri
permainan jika itu angka yang kita masukkan. Untuk itu, kita bisa menggunakan hook React lain dan itulah hook useEffect.
useEffect memungkinkan Anda untuk menjalankan efek samping atau secara umum, memungkinkan Anda untuk menjalankan logika setelah setiap siklus render dan sama
seperti yang disebutkan sebelumnya, jika seluruh hal yang berhubungan dengan React ini relatif baru untuk
Anda, pasti lihat beberapa sumber daya kait React khusus atau selami Bereaksi Kursus Panduan
Lengkap tempat saya membahas kait secara detail. Jadi yang akan saya lakukan dengan useEffect sekarang adalah saya akan
memanggilnya di sini setelah menginisialisasi keadaan saya dan referensi saya di sini dan di sana, kami memiliki fungsi, jadi useEffect mengambil fungsi dan fungsi ini
secara default berjalan setelah setiap siklus render untuk komponen ini. Jadi, setiap kali telah
di-render, fungsi ini dieksekusi, setelah di-render, itu juga penting,
bukan sebelumnya, tidak secara bersamaan, setelah.
Sekarang di sana, saya ingin memeriksa apakah komputer yang dibuat tebak saat ini sama dengan pilihan pengguna karena itu
berarti permainan sudah berakhir.
Nah, itu tidak bisa menjadi kasus untuk siklus render pertama karena kami mengecualikan pilihan
pengguna dari angka yang dapat ditebak tetapi dari
baris kedua aktif, jadi setelah kami mengklik lebih rendah atau lebih besar untuk pertama kalinya, itu bisa terjadi.
Jadi di sana, saya kemudian ingin menyalakan
permainan ini selesai pesan dan mengirimkannya ke aplikasi. js sehingga kita bisa menukar layar game dengan game di
atas layar.
Sekarang kita belum memiliki layar itu, jadi mari
kita tambahkan, mari kita tambahkan permainan di layar di sini di folder layar dan mari kita buat yang sangat sederhana untuk saat ini, kita
akan menyetelnya nanti. Di sana,
saya hanya akan memiliki tampilan dan teks dan
stylesheet, jadi apa yang biasanya kita impor dari React Native dan kemudian memiliki komponen game over screen di sana yang mengambil beberapa alat peraga
dan kemudian mengembalikan beberapa jsx pada akhirnya.
Di sini kita memiliki gaya-gaya ini dengan Stylesheet. buat dan kemudian kami mengekspor game melalui layar sebagai default.
Sekarang di sana seperti yang saya katakan, saya ingin membuat ini sesederhana untuk saat ini, saya hanya akan memiliki pandangan di sana dengan teks
permainan selesai dan kami akan menampilkan rincian lebih lanjut di sana nanti. Untuk saat ini, di sini saya
hanya akan menetapkan beberapa gaya, gaya layar saya yang akan saya tambahkan ke objek yang
kami
berikan ke lembar gaya di sini di bagian bawah, atur flex ke 1 dan mungkin justifyContent ke pusat dan kemudian sejajarkan item ke pusat,
sehingga teks ini dipusatkan untuk saat ini.
Sekarang kami memiliki game over screen dan kami ingin menampilkan
ini alih-alih layar game jika game usai. Jadi mari kita kembali ke aplikasi. File js dan mengimpor game over screen
dari folder screens dan ada dari game over screen
dan pertanyaannya sekarang tentu saja, apa kondisi kita untuk rendering ini? Nah pada akhirnya, kita akan memerlukan satu
informasi tambahan dan
itu adalah jumlah putaran yang dibutuhkan komputer untuk menyelesaikan permainan.
Jadi satu hal yang ingin saya simpan di sini dalam komponen aplikasi adalah keadaan lain yang saya kelola dan
itu adalah jumlah putaran yang dibutuhkan untuk menyelesaikan yang nol pada awalnya karena kami belum memulai permainan dan
saya akan menyebutkan perkiraan
ini dan mengatur putaran menebak dan Anda dapat memberi nama ini apa pun yang Anda inginkan.
Sekarang tujuannya adalah untuk mengatur ini ketika permainan selesai.
Jadi untuk itu, saya juga akan menambahkan fungsi lain di sini
ke komponen aplikasi, game over handler dan di sana, saya ingin mendapatkan jumlah putaran saya sebagai argumen, jadi saya berharap untuk
mendapatkan ini di sini sehingga saya bisa memanggil putaran tebakan set
untuk jumlah putaran saya, saya sampai di sini. Sekarang game over handler harus dipicu dari dalam layar game jelas.
Jadi di sini di layar game, saya ingin memberikan prop yang akan saya beri nama
onGameOver, terdengar seperti nama pas yang bisa dipanggil dari dalam layar game itu atau yang memiliki
referensi fungsi yang kemudian dapat dipanggil dari dalam layar game dan referensi fungsi adalah
referensi di game ini atas fungsi handler tentunya.
Jadi di dalam layar game, sekarang kita dapat menggunakan prop onGameOver untuk menjalankan fungsi ini
dan melewati jumlah putaran yang dibutuhkan komputer untuk
menebak nomor kita, kemudian kita mengatur jumlah putaran ini di sini, menyimpannya dalam keadaan putaran dugaan kita dan
sekarang dalam komponen aplikasi, kita tahu bahwa jika ronde menebak adalah nol, game belum dimulai atau sedang berjalan, jika lebih besar
dari nol, maka game over handler dieksekusi dan
game usai.
Jadi kami ingin menampilkan game di
atas layar jika putaran menebak lebih besar dari nol.
Ngomong-ngomong jika kita memulai permainan baru, saya juga ingin mengatur ulang dugaan putaran saya menjadi nol karena jika permainan
baru
dimulai, kami ingin mengatur ulang jumlah putaran yang diambil komputer ke 0.
Jadi, jika lebih besar dari nol, permainan
sudah berakhir, jadi dalam hal ini, saya ingin menunjukkan permainan di layar.
Jadi di sini jika saya memeriksa apakah kita memiliki nomor pengguna, dalam hal ini saya
menunjukkan layar permainan, itu hanya benar jika putaran menebak lebih kecil atau sama dengan nol,
lebih kecil tidak mungkin tetapi masih, kita bisa memeriksanya.
Jadi jika itu masalahnya, maka kita tahu game pasti
berjalan, kalau tidak, menebak putaran lebih besar dari nol, maka kita tahu game sudah berakhir dan karena itu konten
akan sama dengan game di layar, saat
ini itu hanya komponen seperti ini tanpa alat peraga yang kami lewati.
Jadi sekarang kita memiliki kondisi di mana kita membuat game over screen, semua yang perlu kita lakukan sekarang, kita
perlu menggunakan Prop onGameOver di sini di layar game kita untuk pada akhirnya memanggil fungsi ini dan meneruskan jumlah
putaran ke komponen aplikasi .
Jadi kembali ke layar permainan, jika useEffect di sini menentukan bahwa pilihan yang tepat telah dibuat, tebakan yang benar telah
dibuat dan oleh karena itu permainan telah berakhir, maka di sini, saya ingin memanggil alat peraga diGameOver sebagai fungsi
dan meneruskan jumlah putarannya. mengambil komputer untuk menebak hasil kami atau pilihan kami dan karena itu keadaan lain
yang harus kami kelola di sini di layar permainan. Kami memiliki putaran dan putaran kami dan pada awalnya, itu nol,
ketika komponen ini dibuat untuk pertama kalinya, ini tentu saja nol dan oleh karena itu sekarang adalah apa yang saya teruskan di sini karena itu adalah
angka yang akan kita tambahkan dengan setiap tebakan karena di penangan tebakan berikutnya, jika
kita menghasilkan tebakan berikutnya, selain menetapkan tebakan itu di sini di negara kita, saya tentu saja juga
ingin mengatur putaran saya dan di sana menggunakan bentuk fungsi di mana saya mendapatkan putaran saya saat ini dan saya mengembalikan putaran
saat ini tambah satu.
Jadi saya menambahkan satu ke jumlah putaran saya saat ini yang saya simpan di negara saya, sehingga negara baru
adalah putaran lama ditambah satu karena putaran baru dimulai. Jadi dengan itu, kami mengelola jumlah putaran dan kami
menggunakan ini sebagai syarat dalam komponen aplikasi untuk membuat game lebih dari layar dan di layar game, kami memeriksa apakah
game ada di sini dalam useEffect dan sekarang. , kami melakukan ini setiap kali komponen
ini dirender ulang.
Sekarang kita bisa melakukan itu tetapi kita juga bisa lebih jujur atau lebih langsung mengenai ketergantungan dari efek ini dan
itu adalah sesuatu yang bisa Anda lakukan atau Anda bisa lakukan dengan menambahkan argumen
kedua untuk menggunakan Efek, argumen pertama adalah fungsi yang harus dijalankan setelah rendering komponen, argumen kedua
yang Anda berikan untuk menggunakanEffect adalah array dependensi dari fungsi
ini dan di sini Anda harus menentukan nilai apa pun yang berasal dari luar fungsi efek ini.
Jadi dalam kasus kami, itu akan menjadi dugaan saat ini dan itu akan menjadi alat peraga pilihan pengguna dan alat peraga diGameOver dan setiap
kali nilai berubah, efek ini akan dijalankan kembali, jika setiap kali tugas berubah
setelah siklus render, efeknya akan menjalankan kembali saya harus mengatakan . Jika siklus render terjadi dan nilai yang Anda
tentukan di sini masih sama dengan untuk siklus render sebelumnya,
maka efeknya tidak akan dijalankan kembali, jadi efeknya sekarang hanya akan menjalankan kembali
jika salah satu dari dependensi kami berubah. Sekarang seperti yang saya katakan, alat peraga
pilihan pengguna dan alat peraga onGameOver adalah semua dependensi dan untuk mengatasinya, saya akan menggunakan sintaksis Javascript modern di
mana saya menggunakan perusakan objek untuk merusak alat peraga saya dan mendapatkan pilihan pengguna dan onGameOver dari mereka, ini Sintaks mungkin terlihat
aneh
tetapi seperti derestrukturisasi array, hanya untuk objek, kami menarik properti ini, jadi nama-nama properti ini keluar
dari objek props ini dan menyimpannya dalam konstanta dengan nama yang sama sehingga di sini kita sekarang
dapat menggunakan pilihan pengguna dan hanya gunakan onGameOver karena kita memiliki nilai-nilai ini sekarang disimpan dalam konstanta dari nama yang ditarik keluar
dari alat peraga dan saya melakukan ini karena sekarang kita dapat menambahkan pilihan pengguna dan onGameOver sebagai
dependensi dalam daftar ini, kalau tidak kita harus menambahkan alat
peraga di sini dan itu sebenarnya berubah setiap kali komponen induk berubah dan karenanya itu
bukan pemeriksaan yang baik.
Ini adalah pemeriksaan yang lebih baik karena sekarang kami memastikan jika ada yang lain dalam perubahan props, kami tidak peduli,
hanya jika salah satu dari dua nilai ini berubah, maka efek ini harus dijalankan kembali. Sekarang dengan itu, kami memiliki check-in kami di
tempat yang semoga mengarah ke permainan over-screen yang disajikan jika komputer menebak
angka kami, jadi sekarang mari kita simpan
ini dan mari kita coba, mungkin di sini di Android untuk mencampuradukkan semuanya. Jadi saya akan memasukkan angka di sini, 32, konfirmasi, mulai permainan dan ini 2, jadi itu harus lebih besar,
izinkan saya juga menunjukkan
kepada Anda bagaimana peringatan itu terlihat ketika saya di
Android, ini peringatan Android default ini. Jadi 32 itu, jadi karena itu tentu
saja harus lebih besar, masih harus lebih besar, sekarang harus lebih
rendah, harus lebih rendah, harus lebih besar, harus lebih rendah, harus lebih rendah, harus lebih besar, harus lebih besar, harus lebih
besar, semakin game sudah
berakhir.
Itu terlihat bagus, tebakannya mungkin 32, masuk akal mengenai urutan angka yang kami miliki di sini
dan oleh karena itu, output ini masuk akal di sini.