1 00:00:02,440 --> 00:00:07,590 Jadi untuk memastikan bahwa komputer benar-benar dapat menyelesaikan permainan itu dan menebak angka yang 2 00:00:07,720 --> 00:00:12,000 tepat, kita perlu memeriksa apa yang ditebak komputer dan kemudian mengakhiri 3 00:00:12,010 --> 00:00:17,590 permainan jika itu angka yang kita masukkan. Untuk itu, kita bisa menggunakan hook React lain dan itulah hook useEffect. 4 00:00:17,590 --> 00:00:25,670 useEffect memungkinkan Anda untuk menjalankan efek samping atau secara umum, memungkinkan Anda untuk menjalankan logika setelah setiap siklus render dan sama 5 00:00:25,810 --> 00:00:31,300 seperti yang disebutkan sebelumnya, jika seluruh hal yang berhubungan dengan React ini relatif baru untuk 6 00:00:31,300 --> 00:00:36,790 Anda, pasti lihat beberapa sumber daya kait React khusus atau selami Bereaksi Kursus Panduan 7 00:00:36,850 --> 00:00:42,660 Lengkap tempat saya membahas kait secara detail. Jadi yang akan saya lakukan dengan useEffect sekarang adalah saya akan 8 00:00:42,770 --> 00:00:49,370 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 9 00:00:49,370 --> 00:00:54,950 secara default berjalan setelah setiap siklus render untuk komponen ini. Jadi, setiap kali telah 10 00:00:54,950 --> 00:00:59,750 di-render, fungsi ini dieksekusi, setelah di-render, itu juga penting, 11 00:00:59,750 --> 00:01:03,150 bukan sebelumnya, tidak secara bersamaan, setelah. 12 00:01:03,200 --> 00:01:10,290 Sekarang di sana, saya ingin memeriksa apakah komputer yang dibuat tebak saat ini sama dengan pilihan pengguna karena itu 13 00:01:10,290 --> 00:01:11,980 berarti permainan sudah berakhir. 14 00:01:12,120 --> 00:01:16,830 Nah, itu tidak bisa menjadi kasus untuk siklus render pertama karena kami mengecualikan pilihan 15 00:01:16,830 --> 00:01:19,940 pengguna dari angka yang dapat ditebak tetapi dari 16 00:01:19,940 --> 00:01:25,790 baris kedua aktif, jadi setelah kami mengklik lebih rendah atau lebih besar untuk pertama kalinya, itu bisa terjadi. 17 00:01:25,860 --> 00:01:29,220 Jadi di sana, saya kemudian ingin menyalakan 18 00:01:29,220 --> 00:01:35,970 permainan ini selesai pesan dan mengirimkannya ke aplikasi. js sehingga kita bisa menukar layar game dengan game di 19 00:01:35,970 --> 00:01:36,890 atas layar. 20 00:01:36,970 --> 00:01:39,000 Sekarang kita belum memiliki layar itu, jadi mari 21 00:01:39,000 --> 00:01:45,300 kita tambahkan, mari kita tambahkan permainan di layar di sini di folder layar dan mari kita buat yang sangat sederhana untuk saat ini, kita 22 00:01:45,300 --> 00:01:47,250 akan menyetelnya nanti. Di sana, 23 00:01:47,250 --> 00:01:50,660 saya hanya akan memiliki tampilan dan teks dan 24 00:01:50,700 --> 00:02:00,760 stylesheet, jadi apa yang biasanya kita impor dari React Native dan kemudian memiliki komponen game over screen di sana yang mengambil beberapa alat peraga 25 00:02:00,760 --> 00:02:04,000 dan kemudian mengembalikan beberapa jsx pada akhirnya. 26 00:02:04,000 --> 00:02:12,270 Di sini kita memiliki gaya-gaya ini dengan Stylesheet. buat dan kemudian kami mengekspor game melalui layar sebagai default. 27 00:02:12,370 --> 00:02:17,170 Sekarang di sana seperti yang saya katakan, saya ingin membuat ini sesederhana untuk saat ini, saya hanya akan memiliki pandangan di sana dengan teks 28 00:02:17,170 --> 00:02:22,220 permainan selesai dan kami akan menampilkan rincian lebih lanjut di sana nanti. Untuk saat ini, di sini saya 29 00:02:22,230 --> 00:02:28,090 hanya akan menetapkan beberapa gaya, gaya layar saya yang akan saya tambahkan ke objek yang 30 00:02:28,090 --> 00:02:28,560 kami 31 00:02:28,690 --> 00:02:37,720 berikan ke lembar gaya di sini di bagian bawah, atur flex ke 1 dan mungkin justifyContent ke pusat dan kemudian sejajarkan item ke pusat, 32 00:02:37,750 --> 00:02:40,410 sehingga teks ini dipusatkan untuk saat ini. 33 00:02:40,420 --> 00:02:44,440 Sekarang kami memiliki game over screen dan kami ingin menampilkan 34 00:02:44,440 --> 00:02:53,050 ini alih-alih layar game jika game usai. Jadi mari kita kembali ke aplikasi. File js dan mengimpor game over screen 35 00:02:53,050 --> 00:02:56,100 dari folder screens dan ada dari game over screen 36 00:02:56,240 --> 00:03:04,240 dan pertanyaannya sekarang tentu saja, apa kondisi kita untuk rendering ini? Nah pada akhirnya, kita akan memerlukan satu 37 00:03:04,390 --> 00:03:07,000 informasi tambahan dan 38 00:03:07,000 --> 00:03:12,570 itu adalah jumlah putaran yang dibutuhkan komputer untuk menyelesaikan permainan. 39 00:03:12,700 --> 00:03:18,720 Jadi satu hal yang ingin saya simpan di sini dalam komponen aplikasi adalah keadaan lain yang saya kelola dan 40 00:03:18,730 --> 00:03:24,580 itu adalah jumlah putaran yang dibutuhkan untuk menyelesaikan yang nol pada awalnya karena kami belum memulai permainan dan 41 00:03:24,580 --> 00:03:26,120 saya akan menyebutkan perkiraan 42 00:03:26,260 --> 00:03:31,540 ini dan mengatur putaran menebak dan Anda dapat memberi nama ini apa pun yang Anda inginkan. 43 00:03:31,540 --> 00:03:34,130 Sekarang tujuannya adalah untuk mengatur ini ketika permainan selesai. 44 00:03:34,140 --> 00:03:38,230 Jadi untuk itu, saya juga akan menambahkan fungsi lain di sini 45 00:03:38,230 --> 00:03:45,790 ke komponen aplikasi, game over handler dan di sana, saya ingin mendapatkan jumlah putaran saya sebagai argumen, jadi saya berharap untuk 46 00:03:45,790 --> 00:03:50,010 mendapatkan ini di sini sehingga saya bisa memanggil putaran tebakan set 47 00:03:50,020 --> 00:03:56,440 untuk jumlah putaran saya, saya sampai di sini. Sekarang game over handler harus dipicu dari dalam layar game jelas. 48 00:03:56,560 --> 00:04:01,390 Jadi di sini di layar game, saya ingin memberikan prop yang akan saya beri nama 49 00:04:01,420 --> 00:04:06,430 onGameOver, terdengar seperti nama pas yang bisa dipanggil dari dalam layar game itu atau yang memiliki 50 00:04:06,430 --> 00:04:10,960 referensi fungsi yang kemudian dapat dipanggil dari dalam layar game dan referensi fungsi adalah 51 00:04:10,960 --> 00:04:13,600 referensi di game ini atas fungsi handler tentunya. 52 00:04:13,600 --> 00:04:19,450 Jadi di dalam layar game, sekarang kita dapat menggunakan prop onGameOver untuk menjalankan fungsi ini 53 00:04:19,450 --> 00:04:22,720 dan melewati jumlah putaran yang dibutuhkan komputer untuk 54 00:04:22,720 --> 00:04:29,460 menebak nomor kita, kemudian kita mengatur jumlah putaran ini di sini, menyimpannya dalam keadaan putaran dugaan kita dan 55 00:04:29,470 --> 00:04:37,480 sekarang dalam komponen aplikasi, kita tahu bahwa jika ronde menebak adalah nol, game belum dimulai atau sedang berjalan, jika lebih besar 56 00:04:37,480 --> 00:04:40,560 dari nol, maka game over handler dieksekusi dan 57 00:04:40,720 --> 00:04:41,970 game usai. 58 00:04:41,980 --> 00:04:43,840 Jadi kami ingin menampilkan game di 59 00:04:43,870 --> 00:04:46,490 atas layar jika putaran menebak lebih besar dari nol. 60 00:04:46,540 --> 00:04:52,180 Ngomong-ngomong jika kita memulai permainan baru, saya juga ingin mengatur ulang dugaan putaran saya menjadi nol karena jika permainan 61 00:04:52,180 --> 00:04:52,570 baru 62 00:04:52,570 --> 00:04:56,350 dimulai, kami ingin mengatur ulang jumlah putaran yang diambil komputer ke 0. 63 00:04:56,470 --> 00:04:58,600 Jadi, jika lebih besar dari nol, permainan 64 00:04:58,630 --> 00:05:02,110 sudah berakhir, jadi dalam hal ini, saya ingin menunjukkan permainan di layar. 65 00:05:02,110 --> 00:05:07,540 Jadi di sini jika saya memeriksa apakah kita memiliki nomor pengguna, dalam hal ini saya 66 00:05:07,960 --> 00:05:13,110 menunjukkan layar permainan, itu hanya benar jika putaran menebak lebih kecil atau sama dengan nol, 67 00:05:13,120 --> 00:05:16,780 lebih kecil tidak mungkin tetapi masih, kita bisa memeriksanya. 68 00:05:16,900 --> 00:05:20,770 Jadi jika itu masalahnya, maka kita tahu game pasti 69 00:05:20,770 --> 00:05:28,650 berjalan, kalau tidak, menebak putaran lebih besar dari nol, maka kita tahu game sudah berakhir dan karena itu konten 70 00:05:28,650 --> 00:05:31,960 akan sama dengan game di layar, saat 71 00:05:31,980 --> 00:05:37,160 ini itu hanya komponen seperti ini tanpa alat peraga yang kami lewati. 72 00:05:37,180 --> 00:05:43,270 Jadi sekarang kita memiliki kondisi di mana kita membuat game over screen, semua yang perlu kita lakukan sekarang, kita 73 00:05:43,270 --> 00:05:49,330 perlu menggunakan Prop onGameOver di sini di layar game kita untuk pada akhirnya memanggil fungsi ini dan meneruskan jumlah 74 00:05:49,330 --> 00:05:51,010 putaran ke komponen aplikasi . 75 00:05:51,820 --> 00:05:59,510 Jadi kembali ke layar permainan, jika useEffect di sini menentukan bahwa pilihan yang tepat telah dibuat, tebakan yang benar telah 76 00:05:59,530 --> 00:06:07,120 dibuat dan oleh karena itu permainan telah berakhir, maka di sini, saya ingin memanggil alat peraga diGameOver sebagai fungsi 77 00:06:07,240 --> 00:06:14,380 dan meneruskan jumlah putarannya. mengambil komputer untuk menebak hasil kami atau pilihan kami dan karena itu keadaan lain 78 00:06:14,410 --> 00:06:22,750 yang harus kami kelola di sini di layar permainan. Kami memiliki putaran dan putaran kami dan pada awalnya, itu nol, 79 00:06:22,810 --> 00:06:32,280 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 80 00:06:32,290 --> 00:06:37,390 angka yang akan kita tambahkan dengan setiap tebakan karena di penangan tebakan berikutnya, jika 81 00:06:37,390 --> 00:06:43,510 kita menghasilkan tebakan berikutnya, selain menetapkan tebakan itu di sini di negara kita, saya tentu saja juga 82 00:06:43,540 --> 00:06:51,630 ingin mengatur putaran saya dan di sana menggunakan bentuk fungsi di mana saya mendapatkan putaran saya saat ini dan saya mengembalikan putaran 83 00:06:51,760 --> 00:06:53,330 saat ini tambah satu. 84 00:06:53,380 --> 00:06:59,560 Jadi saya menambahkan satu ke jumlah putaran saya saat ini yang saya simpan di negara saya, sehingga negara baru 85 00:06:59,560 --> 00:07:05,930 adalah putaran lama ditambah satu karena putaran baru dimulai. Jadi dengan itu, kami mengelola jumlah putaran dan kami 86 00:07:05,930 --> 00:07:12,530 menggunakan ini sebagai syarat dalam komponen aplikasi untuk membuat game lebih dari layar dan di layar game, kami memeriksa apakah 87 00:07:12,740 --> 00:07:17,480 game ada di sini dalam useEffect dan sekarang. , kami melakukan ini setiap kali komponen 88 00:07:17,490 --> 00:07:18,690 ini dirender ulang. 89 00:07:19,010 --> 00:07:26,240 Sekarang kita bisa melakukan itu tetapi kita juga bisa lebih jujur atau lebih langsung mengenai ketergantungan dari efek ini dan 90 00:07:26,270 --> 00:07:31,640 itu adalah sesuatu yang bisa Anda lakukan atau Anda bisa lakukan dengan menambahkan argumen 91 00:07:31,880 --> 00:07:37,550 kedua untuk menggunakan Efek, argumen pertama adalah fungsi yang harus dijalankan setelah rendering komponen, argumen kedua 92 00:07:37,560 --> 00:07:41,630 yang Anda berikan untuk menggunakanEffect adalah array dependensi dari fungsi 93 00:07:41,630 --> 00:07:47,690 ini dan di sini Anda harus menentukan nilai apa pun yang berasal dari luar fungsi efek ini. 94 00:07:47,690 --> 00:07:53,660 Jadi dalam kasus kami, itu akan menjadi dugaan saat ini dan itu akan menjadi alat peraga pilihan pengguna dan alat peraga diGameOver dan setiap 95 00:07:54,000 --> 00:07:57,260 kali nilai berubah, efek ini akan dijalankan kembali, jika setiap kali tugas berubah 96 00:07:57,290 --> 00:08:03,380 setelah siklus render, efeknya akan menjalankan kembali saya harus mengatakan . Jika siklus render terjadi dan nilai yang Anda 97 00:08:03,380 --> 00:08:06,840 tentukan di sini masih sama dengan untuk siklus render sebelumnya, 98 00:08:06,860 --> 00:08:11,300 maka efeknya tidak akan dijalankan kembali, jadi efeknya sekarang hanya akan menjalankan kembali 99 00:08:11,390 --> 00:08:17,120 jika salah satu dari dependensi kami berubah. Sekarang seperti yang saya katakan, alat peraga 100 00:08:17,120 --> 00:08:24,230 pilihan pengguna dan alat peraga onGameOver adalah semua dependensi dan untuk mengatasinya, saya akan menggunakan sintaksis Javascript modern di 101 00:08:24,320 --> 00:08:32,720 mana saya menggunakan perusakan objek untuk merusak alat peraga saya dan mendapatkan pilihan pengguna dan onGameOver dari mereka, ini Sintaks mungkin terlihat 102 00:08:32,720 --> 00:08:33,400 aneh 103 00:08:33,440 --> 00:08:39,500 tetapi seperti derestrukturisasi array, hanya untuk objek, kami menarik properti ini, jadi nama-nama properti ini keluar 104 00:08:39,500 --> 00:08:45,860 dari objek props ini dan menyimpannya dalam konstanta dengan nama yang sama sehingga di sini kita sekarang 105 00:08:45,860 --> 00:08:53,930 dapat menggunakan pilihan pengguna dan hanya gunakan onGameOver karena kita memiliki nilai-nilai ini sekarang disimpan dalam konstanta dari nama yang ditarik keluar 106 00:08:53,930 --> 00:09:00,350 dari alat peraga dan saya melakukan ini karena sekarang kita dapat menambahkan pilihan pengguna dan onGameOver sebagai 107 00:09:00,350 --> 00:09:04,340 dependensi dalam daftar ini, kalau tidak kita harus menambahkan alat 108 00:09:04,340 --> 00:09:10,370 peraga di sini dan itu sebenarnya berubah setiap kali komponen induk berubah dan karenanya itu 109 00:09:10,420 --> 00:09:11,990 bukan pemeriksaan yang baik. 110 00:09:12,050 --> 00:09:16,430 Ini adalah pemeriksaan yang lebih baik karena sekarang kami memastikan jika ada yang lain dalam perubahan props, kami tidak peduli, 111 00:09:16,430 --> 00:09:23,300 hanya jika salah satu dari dua nilai ini berubah, maka efek ini harus dijalankan kembali. Sekarang dengan itu, kami memiliki check-in kami di 112 00:09:23,300 --> 00:09:28,280 tempat yang semoga mengarah ke permainan over-screen yang disajikan jika komputer menebak 113 00:09:28,280 --> 00:09:31,530 angka kami, jadi sekarang mari kita simpan 114 00:09:31,670 --> 00:09:42,580 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, 115 00:09:42,580 --> 00:09:43,990 izinkan saya juga menunjukkan 116 00:09:43,990 --> 00:09:46,710 kepada Anda bagaimana peringatan itu terlihat ketika saya di 117 00:09:46,750 --> 00:09:50,280 Android, ini peringatan Android default ini. Jadi 32 itu, jadi karena itu tentu 118 00:09:50,290 --> 00:09:53,170 saja harus lebih besar, masih harus lebih besar, sekarang harus lebih 119 00:09:53,200 --> 00:09:58,780 rendah, harus lebih rendah, harus lebih besar, harus lebih rendah, harus lebih rendah, harus lebih besar, harus lebih besar, harus lebih 120 00:09:58,780 --> 00:09:59,780 besar, semakin game sudah 121 00:09:59,830 --> 00:10:00,490 berakhir. 122 00:10:00,580 --> 00:10:05,590 Itu terlihat bagus, tebakannya mungkin 32, masuk akal mengenai urutan angka yang kami miliki di sini 123 00:10:05,590 --> 00:10:08,800 dan oleh karena itu, output ini masuk akal di sini.