1 00:00:02,380 --> 00:00:06,940 Jadi kita bisa mencapai layar permainan sekarang dan komputer menebak angka 2 00:00:06,970 --> 00:00:12,340 di sini, angka acak yang mengecualikan angka asli kita untuk tebakan awal pertama. 3 00:00:12,370 --> 00:00:18,010 Sekarang kita perlu memastikan bahwa tebakan selanjutnya dapat dilakukan ketika kita menekan tombol lebih rendah atau lebih besar 4 00:00:18,010 --> 00:00:21,350 di sini di layar permainan. Untuk itu, mari 5 00:00:21,400 --> 00:00:27,820 kita tambahkan fungsi di dalam komponen fungsional kami karena fungsi ini akan memerlukan akses ke 6 00:00:27,820 --> 00:00:36,790 keadaan sekitar dan ke komponen sekitarnya dan berikan nama apa pun yang Anda inginkan, seperti pengendali tebakan berikutnya, nama apa pun yang 7 00:00:36,790 --> 00:00:38,700 Anda inginkan dan ini adalah 8 00:00:38,710 --> 00:00:43,810 fungsi yang Anda benar-benar harus mendapatkan argumen, arah tebakan selanjutnya, jadi lebih 9 00:00:43,810 --> 00:00:47,390 rendah atau lebih besar. Sekarang hal pertama 10 00:00:47,390 --> 00:00:54,060 yang ingin saya lakukan di sini adalah saya ingin memastikan bahwa kami memvalidasi arah. 11 00:00:54,110 --> 00:00:59,600 Sekarang fungsi ini di sini harus dieksekusi ketika tombol-tombol di bawah ditekan tetapi tentu 12 00:00:59,600 --> 00:01:04,970 saja nilai arahannya, jadi nilai yang kita berikan sebagai argumen harus berbeda 13 00:01:05,240 --> 00:01:06,190 berdasarkan tombol. 14 00:01:06,200 --> 00:01:13,070 Jadi di sini kita memiliki pengendali tebakan berikutnya yang terhubung ke onPress, tanpa tanda kurung untuk hanya 15 00:01:13,100 --> 00:01:19,140 menyediakan penunjuk itu pada fungsi kita ke onPress sehingga ini akan dieksekusi pada akhirnya ketika 16 00:01:19,140 --> 00:01:26,060 pengguna menekan ini, tetapi saya pergi untuk mengkonfigurasi ulang argumen yang akan diteruskan ke penebak tebakan berikutnya ketika 17 00:01:26,060 --> 00:01:27,350 ini dijalankan. 18 00:01:27,350 --> 00:01:33,530 Kita dapat melakukan ini dengan bind, bind ini karena argumen pertama untuk mengikat adalah selalu apa ini harus merujuk 19 00:01:33,530 --> 00:01:38,450 pada fungsi yang dipanggil, tidak masalah di sini sehingga kita bisa mengikatnya dengan ini. 20 00:01:38,600 --> 00:01:44,780 Nilai kedua yang kami lewati di sini untuk mengikat akan menjadi argumen pertama yang diterima oleh fungsi kami dan 21 00:01:44,810 --> 00:01:51,580 oleh karena itu, ini akan menjadi arah yang diterima di sini dan tentu saja terserah Anda logika mana yang Anda gunakan 22 00:01:51,580 --> 00:01:52,560 di sini, 23 00:01:52,600 --> 00:02:00,820 bagi saya masuk akal untuk hanya menggunakan string di mana di sini kita lewat lebih rendah sebagai string dan untuk tombol lainnya, kita melewati lebih besar 24 00:02:00,970 --> 00:02:02,710 sehingga kita memiliki dua pengidentifikasi 25 00:02:02,740 --> 00:02:08,830 ini yang pada dasarnya diteruskan ke penangan tebakan berikutnya. Jadi arahnya akan lebih rendah atau 26 00:02:08,830 --> 00:02:10,780 lebih besar dan 27 00:02:10,900 --> 00:02:14,110 sekarang kami ingin memvalidasi apakah itu benar. 28 00:02:14,110 --> 00:02:20,670 Jadi misalnya, jika Anda memilih angka katakanlah 55 dan komputer menebak 60, maka jika Anda memberi 29 00:02:20,800 --> 00:02:25,390 komputer petunjuk angka harus lebih besar, itu jelas salah karena jumlahnya 30 00:02:25,390 --> 00:02:30,190 harus lebih kecil, nomor Anda adalah 55, tebak adalah 60, itu 31 00:02:30,190 --> 00:02:31,690 salah jika Anda 32 00:02:31,690 --> 00:02:37,290 memberi tahu komputer bahwa nomor yang seharusnya ditebak selanjutnya harus lebih besar dari 60, 33 00:02:37,290 --> 00:02:37,790 kan? 34 00:02:37,810 --> 00:02:39,340 Jadi kami ingin 35 00:02:39,540 --> 00:02:43,370 memvalidasi ini dan oleh karena itu di sini kami dapat 36 00:02:43,390 --> 00:02:54,870 memeriksa apakah arahnya sama dengan yang lebih rendah, jadi jika Anda menekan tombol yang lebih rendah dan tebakan saat ini lebih kecil maka props pilihan pengguna, sehingga komputer benar-benar 37 00:02:54,880 --> 00:03:01,270 menebak angka yang lebih kecil dari pilihan kita, maka yang lebih rendah adalah petunjuk yang salah 38 00:03:01,270 --> 00:03:01,870 benar 39 00:03:01,900 --> 00:03:03,900 karena jumlahnya memang harus lebih 40 00:03:03,970 --> 00:03:11,100 rendah, perlu lebih besar karena tebakannya sudah terlalu rendah. Jadi itulah satu kemungkinan skenario di mana kita mendapatkan petunjuk 41 00:03:11,100 --> 00:03:16,110 yang salah, alternatifnya dan saya akan membungkusnya dalam tanda kurung untuk memperjelas bahwa ini 42 00:03:16,110 --> 00:03:18,300 adalah satu syarat di sini. 43 00:03:18,330 --> 00:03:20,440 Jadi alternatif untuk itu, 44 00:03:20,490 --> 00:03:26,010 syarat kedua yang ingin saya periksa adalah bahwa arah di sini sebenarnya lebih besar dan 45 00:03:26,250 --> 00:03:30,920 pada saat yang sama tebakan saat ini sudah lebih besar dari pilihan 46 00:03:30,930 --> 00:03:33,460 kita dan kemudian itu juga petunjuk yang 47 00:03:33,480 --> 00:03:35,600 salah, hanya di arah yang berlawanan. 48 00:03:35,940 --> 00:03:41,220 Dalam kedua kasus di mana kami memberikan petunjuk yang salah, saya ingin memberikan peringatan dan Anda mengetahui bahwa Anda dapat melakukan ini 49 00:03:41,220 --> 00:03:48,300 dengan API peringatan, kelas peringatan yang dapat Anda impor dari Bereaksi Asli pada akhirnya. Kemudian di sini, di cek kami, saya akan menggunakan lansiran 50 00:03:48,300 --> 00:03:55,460 waspada untuk melemparkan lansiran dengan judul katakanlah jangan berbohong, tentu saja Anda dapat memilih nama yang Anda inginkan, saya lolos 51 00:03:55,530 --> 00:03:57,820 dari satu kutipan yang saya 52 00:03:57,840 --> 00:04:03,240 cetak sebagai karakter di sini dengan garis miring terbalik terkemuka karena jika tidak maka akan 53 00:04:03,240 --> 00:04:07,710 menutup string karena saya menggunakan tanda kutip tunggal untuk mengelilingi string saya. 54 00:04:07,710 --> 00:04:09,010 Jadi itulah judul saya dan 55 00:04:09,090 --> 00:04:13,230 kemudian teksnya bisa jadi Anda tahu bahwa ini salah, tetapi tentu saja Anda dapat memiliki teks yang 56 00:04:13,230 --> 00:04:19,480 Anda inginkan di sini, Anda juga dapat menjadi kurang bermoral jika Anda mau. Sekarang saya ingin menyajikan satu tombol di sini 57 00:04:19,480 --> 00:04:25,260 dan tombol mengatakan sudah dijelaskan adalah objek yang Anda lewati untuk argumen argumen ketiga 58 00:04:25,320 --> 00:04:32,880 yang memerlukan peringatan dan teks di sana bisa minta maaf dan gaya dapat dibatalkan dan Anda tidak perlu memberikan penangan 59 00:04:32,880 --> 00:04:39,120 onPress, jika Anda tidak memberikan satu, satu-satunya hal yang akan terjadi adalah mengklik tombol itu akan 60 00:04:39,120 --> 00:04:41,400 menutup peringatan yang baik-baik saja. 61 00:04:42,000 --> 00:04:47,550 Jadi di sini, kami memberikan pengguna ketukan pada jari-jarinya sehingga untuk mengatakan dan memastikan bahwa tidak ada petunjuk 62 00:04:47,550 --> 00:04:48,530 yang salah 63 00:04:48,600 --> 00:04:50,040 diberikan dan saya ingin kembali 64 00:04:50,040 --> 00:04:54,590 ke sini, jadi saya ingin menghentikan eksekusi fungsi jika kami memiliki nilai yang salah. 65 00:04:54,780 --> 00:04:56,580 Jika kita berhasil melewati ini 66 00:04:56,580 --> 00:05:01,330 jika blok, jadi jika kita memberikan petunjuk yang benar, maka kita ingin menghasilkan nomor acak baru. 67 00:05:01,920 --> 00:05:06,940 Jadi di sini, saya ingin memeriksa apakah arahnya lebih rendah dan 68 00:05:07,200 --> 00:05:08,850 sekarang kita tahu 69 00:05:08,850 --> 00:05:15,810 itu benar, sehingga komputer harus menebak angka yang lebih rendah dari angka sebelumnya, maka kita tahu 70 00:05:15,810 --> 00:05:22,170 bahwa angka acak baru harus dihasilkan ke arah dugaan saat ini adalah batas atas maksimum. 71 00:05:22,200 --> 00:05:29,940 Jadi karena itu, kita dapat memanggil menghasilkan acak antara lagi dan jumlah minimum, baik itu mungkin satu tetapi bagaimana 72 00:05:30,060 --> 00:05:32,930 jika pengguna sudah menebak nomor lain 73 00:05:32,940 --> 00:05:39,440 di mana kita memberi tahu komputer bahwa itu terlalu kecil dan kemudian kita akan memiliki masalah 74 00:05:39,540 --> 00:05:44,410 di sini karena yang terendah batas tidak selalu satu, bagaimana jika pengguna 75 00:05:44,430 --> 00:05:48,430 menebak 10 dan kami berkata tidak, itu harus lebih besar? 76 00:05:48,480 --> 00:05:53,670 Kalau begitu pengguna menebak 50 dan kami mengatakan itu harus lebih rendah dari itu, komputer tentu 77 00:05:53,670 --> 00:05:54,410 saja dan 78 00:05:54,420 --> 00:06:00,240 menebak lagi tetapi tidak boleh menebak di bawah 10 karena kami telah menyebutkan bahwa ini terlalu kecil sebelumnya. 79 00:06:00,330 --> 00:06:08,700 Jadi maksimum dan minimum kami saat ini harus menyesuaikan dari waktu ke waktu karena kami memberikan petunjuk mengenai apakah angka yang ditebak 80 00:06:08,700 --> 00:06:11,080 komputer terlalu kecil atau terlalu besar. 81 00:06:12,130 --> 00:06:16,690 Jadi karena itu, kita dapat menggunakan pengait lain yang disediakan oleh React dan itulah pengait useRef. 82 00:06:16,690 --> 00:06:23,290 Sekarang Anda mungkin tahu hook itu sebagai hook yang memungkinkan Anda untuk membuat objek yang dapat Anda ikat ke input, 83 00:06:23,350 --> 00:06:28,960 jadi ke elemen input Anda di jsx untuk mendapatkan akses ke mereka dalam kode Anda dan itu 84 00:06:28,960 --> 00:06:33,870 salah satu cara menggunakannya tetapi useRef juga memungkinkan Anda untuk melakukan sesuatu yang keren. 85 00:06:34,120 --> 00:06:39,720 Hal ini memungkinkan Anda untuk menentukan nilai yang bertahan rendering ulang komponen, sehingga yang bertahan 86 00:06:39,760 --> 00:06:42,810 bahwa komponen ini dibangun kembali dan itulah 87 00:06:43,120 --> 00:06:48,940 yang kami butuhkan di sini karena kami ingin login minimum dan maksimum yang dapat kami ubah 88 00:06:49,180 --> 00:06:53,320 tetapi yang tidak dibuat ulang hanya karena komponen dirender lagi. 89 00:06:53,320 --> 00:07:00,060 Jadi di sini di bagian atas komponen ini, setelah menginisialisasi keadaan, kita dapat membuat konstanta 90 00:07:00,360 --> 00:07:10,430 baru, currentLow mungkin di mana useRef adalah satu dan kemudian konstanta, currentHigh di mana useRef adalah 100, ini adalah batas awal kami 91 00:07:10,440 --> 00:07:16,590 yang kami gunakan untuk acak nomor dan sekarang kami dapat memperbarui referensi ini 92 00:07:17,160 --> 00:07:18,240 di sini. 93 00:07:18,390 --> 00:07:20,790 Jadi kita tahu arahnya harus lebih rendah, apa yang bisa 94 00:07:20,790 --> 00:07:27,450 kita lakukan dalam kasus itu, daripada langsung menghasilkan nomor baru, kita dapat mengatur currentHigh. saat ini, karena referensi yang dihasilkan oleh 95 00:07:27,450 --> 00:07:33,960 Bereaksi adalah objek yang memiliki properti saat ini di mana nilai aktual disimpan, 96 00:07:33,960 --> 00:07:36,120 jadi kami menetapkan 97 00:07:36,150 --> 00:07:39,320 arus sama dengan tebakan saat ini. 98 00:07:39,330 --> 00:07:45,570 Jadi yang kami katakan adalah jika saya memberi tahu Anda, komputer yang angka yang Anda duga terlalu besar dan Anda 99 00:07:45,570 --> 00:07:53,610 harus menebak yang lebih rendah, maka saya tahu angka ini yang saya duga adalah arus saya sekarang. Tinggi, angka yang benar dapat ' t lebih tinggi 100 00:07:53,610 --> 00:07:55,320 dari yang ini, jadi saya 101 00:07:55,320 --> 00:07:58,780 menyimpan angka yang baru saya duga sebagai tinggi saya saat ini. 102 00:07:58,800 --> 00:08:05,160 Dan lagi, konstanta referensi ini di sini tidak diregenerasi ketika komponen ini dibuat lagi, sebaliknya 103 00:08:05,160 --> 00:08:11,700 jika mereka telah diinisialisasi sekali, sedikit seperti keadaan sebenarnya, maka mereka disimpan terlepas dari komponen 104 00:08:11,790 --> 00:08:17,490 itu dan Bereaksi mengakui bahwa mereka telah diinisialisasi dan itu tidak akan membuat 105 00:08:17,490 --> 00:08:22,440 ulang mereka melainkan menginisialisasi currentHigh dengan nilai yang disimpan sebelumnya. 106 00:08:22,440 --> 00:08:28,240 Jadi agak seperti jika Anda mengelola ini dalam keadaan, perbedaannya dengan keadaan alih-alih jika Anda mengubah nilai yang disimpan 107 00:08:28,240 --> 00:08:32,290 di sana, komponen tidak dirender ulang karena kami tidak menginginkannya di sini. 108 00:08:32,370 --> 00:08:37,890 Saya tidak ingin merender ulang komponen itu hanya karena saya menyimpan tinggi baru, yang tidak berdampak pada pandangan 109 00:08:37,890 --> 00:08:39,780 saya, pada kode jsx saya, 110 00:08:39,780 --> 00:08:44,020 itu hanya berdampak pada logika saya tetapi untuk itu, saya tidak perlu merender 111 00:08:44,070 --> 00:08:47,580 ulang komponen, itu sebabnya saya menggunakan referensi di sini alih-alih keadaan. 112 00:08:47,640 --> 00:08:50,730 Jadi itu terjadi jika lebih rendah, jika kita 113 00:08:50,760 --> 00:08:55,980 memberi tahu komputer bahwa tebakan itu terlalu kecil dan jumlah sebenarnya harus lebih 114 00:08:55,980 --> 00:08:57,060 tinggi, harus lebih 115 00:08:57,060 --> 00:09:04,970 besar, baik dalam hal ini kita menetapkan arus rendah ke tebakan saat ini karena kita tahu kami memiliki batas 116 00:09:04,970 --> 00:09:06,020 bawah. 117 00:09:06,230 --> 00:09:12,230 Dan sekarang tujuannya atau triknya adalah untuk menghasilkan angka acak baru yang memperhitungkan batasan-batasan ini, jadi di 118 00:09:12,230 --> 00:09:13,280 mana kita 119 00:09:13,280 --> 00:09:22,190 menggunakan low saat ini dengan ref kita dan kemudian. saat ini sebagai minimum dan saat ini Tinggi. saat ini sebagai maksimum dan saya 120 00:09:22,190 --> 00:09:30,850 ingin mengecualikan tebakan saat ini sehingga kami tidak dapat menebak angka yang sama lagi di sini, sehingga untuk peran 121 00:09:30,850 --> 00:09:38,440 selanjutnya, kami pasti akan mendapatkan nomor yang berbeda. Jadi itu adalah sesuatu yang saya simpan di angka berikutnya 122 00:09:38,440 --> 00:09:39,900 yang konstan, ini dihasilkan 123 00:09:39,910 --> 00:09:41,200 di sini ketika 124 00:09:41,350 --> 00:09:46,020 pengendali tebakan berikutnya dijalankan yang terjadi ketika kita mengetuk salah satu tombol ini. 125 00:09:46,240 --> 00:09:49,140 Dan sekarang angka berikutnya adalah angka berikutnya yang ingin 126 00:09:49,150 --> 00:09:54,370 kita gunakan, jadi sekarang apa yang bisa kita lakukan adalah memanggil set tebakan saat ini dan tambahkan 127 00:09:54,370 --> 00:10:01,660 nomor berikutnya, sekarang komponen akan dirender ulang dan akan menampilkan tebakan berikutnya. Jadi mari kita coba, untuk saat ini kami tidak 128 00:10:01,660 --> 00:10:02,960 memiliki permainan yang 129 00:10:02,980 --> 00:10:06,820 sudah lewat, tapi setidaknya kami bisa mencoba menebak angka di sini. 130 00:10:06,850 --> 00:10:09,250 Jadi saya memasukkan 53 sebagai nomor 131 00:10:09,250 --> 00:10:12,040 saya, sekarang kita mulai dan komputer menebak 85. 132 00:10:12,100 --> 00:10:18,220 Jika sekarang saya katakan lebih besar, kami mendapat peringatan itu karena kami berbohong, kami memiliki angka 53, jadi tebakannya terlalu 133 00:10:18,220 --> 00:10:21,590 tinggi, itu harus lebih rendah. 134 00:10:21,610 --> 00:10:23,260 Sekarang 28, yah itu terlalu rendah, itu harus lebih besar. 135 00:10:23,260 --> 00:10:28,830 Jadi jika saya mengetuk lebih rendah, saya mendapatkan peringatan, jika saya mengetuk lebih besar, kita naik sekarang 136 00:10:28,840 --> 00:10:34,030 78 dan sekarang pada saat ini, 23, tebakan sebelumnya akan menjadi batas bawah kita dan sekarang 137 00:10:34,030 --> 00:10:38,360 ketika saya mengetuk lebih rendah, 78 tebakan saat ini akan menjadi batas atas 138 00:10:38,380 --> 00:10:44,300 kita, jadi tebakan berikutnya tentu tidak akan di atas 78 dan tidak di bawah 23 tetapi masih terlalu 139 00:10:44,430 --> 00:10:46,690 rendah, itu terlalu besar maksud saya, itu 140 00:10:46,690 --> 00:10:48,460 terlalu rendah jadi mari kita 141 00:10:48,460 --> 00:10:49,580 gunakan yang 142 00:10:49,600 --> 00:10:51,520 lebih besar, lebih rendah dan 143 00:10:51,520 --> 00:10:53,460 itu akan menjadi yang benar . 144 00:10:53,500 --> 00:10:53,850 Sekarang 145 00:10:53,860 --> 00:10:56,560 untuk saat ini kami tidak memiliki apa pun yang memeriksa apakah 146 00:10:56,580 --> 00:10:57,820 komputer menebak dengan benar. 147 00:10:58,120 --> 00:11:00,130 Jadi itulah hal berikutnya yang harus kita laksanakan di sini.