JavaScript Essentials: Bahagian Dalang dalam Javascript)

Dalam bahagian ini, kami akan melaksanakan permainan yang dipanggil Mastermind dalam JavaScript. Pembangunan permainan ini akan merangkumi banyak konsep yang telah kita bincangkan setakat ini. Kami akan mentakrifkan fungsi, menyampaikan hujah kepada mereka, menggunakan pembolehubah, dan menggunakan pernyataan gelung dan if. Kami akan melihat secara ringkas konsep lain di sekitar fungsi, yang dikenali sebagai IIFE, Ungkapan Fungsi yang Dikenakan Segera. Kami juga akan melihat cara mengambil input pengguna melalui baris arahan. Pada ketika ini, ia hanyalah aplikasi konsol.

Anda boleh merujuk pelaksanaan yang serupa di sini, Master mind dalam python

Mastermind ialah permainan papan mudah yang menggunakan warna tetapi sebaliknya kami akan menggunakan nombor.

Ringkasan: Di belakang palang terdapat empat warna yang dipasang oleh seorang pemain. Pemain lain tidak dapat melihat warna pemain pertama. Warna pemain pertama dipanggil pembuat kod dan warna pemain lain ialah pemutus kod. Pemecah kod mempunyai, secara inklusif, antara 2 hingga 12 percubaan untuk meneka pembuat kod. Bilangan percubaan mestilah genap.

Perlaksanaan

• Buat folder bernama mastermind pada pc anda (atau tempat anda meletakkan projek anda) dan dalam mastermind, mulakan projek nod menggunakan npm init -y (pada baris arahan) . Saya menggunakan mesin Linux jadi beginilah cara saya menyediakan projek saya.

  • Buka terminal saya, jalankan, cd untuk mengalihkan saya ke folder pengguna.
  • Kemudian, cd ~/projek. projek adalah tempat saya menyimpan projek saya.
  • Kemudian mkdir mastermind dan cd mastermind untuk mencipta folder mastermind dan tukar ke folder tersebut.
  • Mulakan projek nod dengan npm init -y. Fail package.json akan dibuat.
  • Buat app.js dengan app.js sentuh.
  • Tulis console.log("Mastermind") ke dalam app.js dan jalankannya dengan node app.js. Saya mengharapkan untuk melihat Mastermind jika tidak saya menghadapi masalah dengan persediaan saya.

• Titik permulaan (masuk) permainan ini akan berada dalam Apl, satu fungsi. Mari buat fungsi yang dipanggil App dan tambah console.log("App"). Kami kemudiannya boleh memanggil App() dan melaksanakan kod dengan nod app.js. Saya tidak akan memberitahu anda untuk menjalankan kod anda tetapi ia adalah sesuatu yang anda harus lakukan semasa anda mengekod bersama. Ini ialah kandungan semasa fail app.js saya.
  
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• Apabila permainan bermula

  • pengguna memasukkan bilangan pusingan yang mereka mahu mainkan dan nilai yang dimasukkan mesti disahkan
  • pengguna memilih sama ada untuk membenarkan pendua atau tidak
  • di suatu tempat pembuat kod dijana secara rawak
  • pengguna telah memasukkan pemecah kod
  • pemutus kod dibandingkan dengan pembuat kod dan pembayang diberikan jika ia tidak sepadan
  • dalam proses itu, kami membuat bilangan pusingan
  • dan untuk menjadikan ini lebih seperti permainan, kami meletakkan keseluruhan Apl ke dalam gelung tak terhingga

• Mari kita laksanakan fungsi untuk menjana nombor rawak untuk pembuatan kod, dengan itu menetapkan nilai rawak kepada pembuat kod.

• Pertama, kita memerlukan cara untuk menjana nombor rawak. Untuk tidak mengganggu kod dalam app.js, mari buat fail lain yang dipanggil scratch_pad.js dan dalam fail ini kami bereksperimen.

• JavaScript mempunyai cara mudah untuk menjana nombor rawak memanggil Math.random(). Dalam pad calar, mari kita log 4 nombor rawak menggunakan binaan gelung.
  
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• apa yang kita mahu ialah integer (nombor seperti) 0, 1, 2, ..., 9 bukan perpuluhan. Kita boleh mendarab nilai yang dikembalikan daripada Math.random() dengan 10 dan kita akan mempunyai x.sesuatu di mana x kini berada dalam 1,2,3,...,9. Ingat eksperimen ini semuanya dilakukan pada pad calar. Cubalah.

• Apa yang kita mahu ialah nombor sebelum titik, bahagian nombor bulat. Kita boleh menulis kod untuk menukar nombor kepada rentetan dan kemudian memisahkannya dengan "." dan dapatkan elemen pertama. Walau bagaimanapun, terdapat fungsi untuk lantai yang dipanggil yang boleh kami gunakan.
  

for (let i = 0; i < 4; i++) {
  console.log(Math.random());
}
// 0.10037268097853191
// 0.20981624777230534
// 0.47828165742292583
// 0.8160883929470153

• Cara ini berfungsi ialah, jika kita ingin mendapatkan nombor rawak antara beberapa nombor min dan maks, di mana maks lebih besar daripada min, maka kita boleh lakukan, min Math.floor(Math.random() * (maks - min 1)). min ialah nilai jangkaan minimum dan maks ialah nilai jangkaan maksimum. Dalam kes kami, kami mempunyai nilai minimum kami ialah 0 dan maksimum ialah 9.
• Ini adalah coretan saya untuk menjana nombor rawak. Saya menambah parameter pada fungsi kerana saya tidak mahu fungsi mempunyai keadaan dalaman.

for (let i = 0; i < 4; i++) {
  console.log(Math.floor(Math.random() * 10));
}
// 4
// 7
// 3
// 4

• Pada ketika ini, kita kini boleh kembali ke app.js kami dan menambah fungsi di atas untuk menjana nombor rawak bagi pembuat kod. Letakkannya di atas fungsi Apl.

• Daripada ringkasan bilangan warna yang digunakan ialah 4. Jadi kita perlu menjana 4 nombor untuk pembuat kod. Kami juga perlu mengendalikan jika pendua dibenarkan. Kembali ke pad calar.

• Kami mempunyai fungsi, pernyataan if and else, gelung for dan while, dsb. Semua binaan ini mempunyai blok atau badan. Pembolehubah yang dimulakan dalam blok ini boleh digunakan di dalam blok dan bukan di luarnya. Ini dikenali sebagai skop pembolehubah. Jadi pembolehubah boleh wujud dalam skop global, yang bermaksud bahawa pembolehubah itu boleh digunakan atau dinilai di mana-mana. Apabila kita mengisytiharkan pembolehubah dalam blok. Pembolehubah menjadi dalaman atau terhad dalam skop itu. Jalankan ini dalam pad conteng.
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• Sekarang kemas kini ini dengan memulakan pembolehubah,x, dalam pernyataan if, console.log(x) di luar blok if dan jalankan pad calar anda. Anda sepatutnya mendapat ralat yang serupa dengan ini.

for (let i = 0; i < 4; i++) {
  console.log(Math.random());
}
// 0.10037268097853191
// 0.20981624777230534
// 0.47828165742292583
// 0.8160883929470153

Pada ketika ini saya ingin membawa kepada perhatian anda idea tentang skop.

• Apabila menjana pembuat kod, kami ingin tahu sama ada pendua dibenarkan dan pada ketika ini, kami tahu bahawa pembuat kod ialah tatasusunan nombor (atau rentetan angka). Mari kita mulakan dengan pad calar. Kami mahu melaksanakan fungsi yang mengambil hujah boolean yang menunjukkan jika pendua dibenarkan. Fungsi ini akan menambah (tolak) empat nombor ke dalam pembuat kod tetapi sebelum itu, kita perlu menyemak sama ada pendua dibenarkan dan mengendalikan apabila tidak.

for (let i = 0; i < 4; i++) {
  console.log(Math.floor(Math.random() * 10));
}
// 4
// 7
// 3
// 4

• kami juga telah menulis kod kami sedemikian rupa sehingga pembuat kod tidak diakses secara global dalam fungsi pembuat kod. Jadi akan mengembalikan pembuat kod sebaliknya.

function generateRandomNumbersBetween(min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}

for (let i = 0; i < 4; i++) {
  console.log(generateRandomNumbersBetween(0, 9));
}

• Dalam app.js kini kita boleh menambah fungsi pembuat kod dan pembolehubah untuk pembuatan kod.
• Sekarang kembali ke pad calar. Kami mahu mengambil input daripada pengguna daripada terminal. Javascript mempunyai cara untuk melakukannya juga. Cuba coretan ini.

const HP = 100;

if (true) {
  console.log("IF BLOCK::", HP);
}

console.log("End::", HP);

// IF BLOCK:: 100
// End:: 100

• Tiada masalah dengan pendekatan mengambil input pengguna ini. Cuma kita perlu menggunakan fungsi panggil balik dan tiada cara untuk menghantar input yang dimasukkan ke skop luar fungsi panggil balik readlineOInstance.question.

• Apa yang anda fikirkan? Cubalah dalam "pad calar". Jika anda berfikir tentang mengisytiharkan pembolehubah dalam skop luar readlineOInstance.soalkan memberikan input yang dimasukkan kepadanya, maka ia adalah pendekatan yang baik tetapi ... Masih mencubanya.

• Adakah anda masih ingat konsep Janji? Kita boleh menggunakan janji di sini dan menyelesaikan input. Walau bagaimanapun, kita perlu membungkus keseluruhan proses dalam fungsi. Terdapat beberapa bahagian readlineOInstance.question mempunyai pengepala yang serupa dengan question(query: string, callback: (answer: string) => void. Query ialah pertanyaan (atau prompt) kepada pengguna dan callback ialah bagaimana kami mengendalikan koleksi input Memandangkan kami mungkin menggunakan semula fungsi yang sama di suatu tempat kemudian, kami akan memberikan pertanyaan sebagai hujah.
  

  console.log("Mastermind");
  
  function App() {
    console.log("App");
  }
  
  App();
  

  • Kini kita boleh menambah fungsi getInput pada app.js. Jangan lupa import, const readline = require("readline"). Kandungan app.js hendaklah serupa dengan coretan di bawah.

  for (let i = 0; i < 4; i++) {
    console.log(Math.random());
  }
  // 0.10037268097853191
  // 0.20981624777230534
  // 0.47828165742292583
  // 0.8160883929470153
  

  • Kini kami meminta pengguna memasukkan bilangan pusingan dan jika pendua dibenarkan. Kami tahu bahawa bilangan pusingan mestilah genap dan antara 2 hingga 12. Kami akan melaksanakan fungsi untuk mengesahkan nilai (nombor) menjadi genap dan antara 2 dan 12. Ia akan mengembalikan boolean. Nombor genap apabila nombor modulo 2 ialah sifar. (iaitu nombor % 2 == 0).

  for (let i = 0; i < 4; i++) {
    console.log(Math.floor(Math.random() * 10));
  }
  // 4
  // 7
  // 3
  // 4
  

  • Dalam badan fungsi Apl, kami boleh meminta input dan mengesahkannya. Kami akan terus meminta input yang betul untuk bilangan pusingan. Untuk nilai pendua dalam kod, apabila pengguna memasukkan apa-apa selain daripada yang dijangkakan, kami akan menganggap bahawa pengguna tidak mahu pendua. Kami akan menggunakan gelung sementara dan menetapkan syarat menjadi benar dan hanya pecah apabila pusingan sah namun menggunakan percubaan dan tangkapan (untuk pengendalian ralat), apabila pengguna memasukkan nilai tidak sah kami log mesej yang menunjukkan bahawa nilai dimasukkan adalah tidak sah. Cubalah.

  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  for (let i = 0; i < 4; i++) {
    console.log(generateRandomNumbersBetween(0, 9));
  }
  

  Jalankan app.js dan berinteraksi dengannya. Ini adalah output yang serupa semasa interaksi.
  

  const HP = 100;
  
  if (true) {
    console.log("IF BLOCK::", HP);
  }
  
  console.log("End::", HP);
  
  // IF BLOCK:: 100
  // End:: 100
  

  • Kami telah mengambil bilangan pusingan dan nilai untuk pendua. Sekarang kita boleh menjana pembuat kod. Untuk melakukan ini, kita boleh memanggil fungsi generateCodeMaker dan memberikan nilai pilihan pendua kepadanya (atau biarkan kerana ia secara lalai palsu).

   IF BLOCK:: 100
   /home/Projects/mastermind/scratch_pad.js:8
   console.log(x)
      ^
  
   ReferenceError: x is not defined
      at Object.<anonymous> (/home/Projects/mastermind/scratch_pad.js:8:13)
      at Module._compile (node:internal/modules/cjs/loader:1469:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
      at node:internal/main/run_main_module:28:49
  
   Node.js v20.17.0
  

  • Kini kita boleh meminta pengguna untuk pemecah kod dan membandingkannya dengan pembuat kod. Pemecah kod juga merupakan susunan nombor. Kami juga akan menambah pembayang untuk pengguna mengetahui sejauh mana mereka dari kod tertentu. Jadi jika kod untuk pemutus kod lebih besar daripada kod pembuat kod, kami mengatakan lebih banyak. Kami mengatakan sama apabila ia adalah sama dan jika tidak, kami mengatakan kurang apabila kod daripada pemutus kod kurang daripada kod pemutus kod. Mari pergi ke pad calar.
  • Kami akan mencipta fungsi yang akan mengambil tatasusunan angka 4 elemen dan kemudian membandingkan input pengguna (pemutus kod).

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        CODE_MAKER.push(code);
        counter += 1;
      } else if (!CODE_MAKER.includes(code)) {
        CODE_MAKER.push(code);
        counter += 1;
      }
    }
  }
  
  console.log(CODE_MAKER);
  generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  // reset the code maker
  CODE_MAKER = [];
  generateCodeMaker(false);
  console.log(CODE_MAKER);
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  • Kami mempunyai pembolehubah untuk mengendalikan pembayang dan nilai untuk setiap kod yang berkaitan dengan pembuat dan pemutus kod.
  • Kami menghantar pembuat kod kepada fungsi untuk membandingkannya dengan input daripada pengguna.
  • Kami mengemas kini pembayang untuk memberitahu pengguna cara mengemas kini nilai dalam pemecah kod

  • Kini kita boleh menambah PETUA dan fungsi compareCode pada app.js. Ia adalah masa yang sesuai untuk menjalankan app.js anda, di atas fungsi Apl.

  • Sekarang kami melaksanakan fungsi untuk membandingkan pembuat kod dan pemutus kod, kini kami boleh meletakkan ini dalam gelung untuk mengambil kira pusingan (pusingan = bilangan kali untuk bermain permainan). Jadi jika bilangan pusingan ialah 6, maka permainan akan dimainkan 6 kali tetapi kami perlu menamatkan permainan apabila pengguna meneka semua kod dengan betul, iaitu apabila nilai dalam PETUNJUK semuanya 0s. Jadi apabila kita mengira bilangan 0 dalam PETUNJUK dan ia adalah 4, kita boleh menamatkan permainan dan mengatakan pengguna menang.
    

  console.log("Mastermind");
  
  function App() {
    console.log("App");
  }
  
  App();
  

  • Bilangan pusingan dikurangkan dan kami akan tahu sama ada pengguna menang atau tidak jika bilangan pusingan bukan 0.

  for (let i = 0; i < 4; i++) {
    console.log(Math.random());
  }
  // 0.10037268097853191
  // 0.20981624777230534
  // 0.47828165742292583
  // 0.8160883929470153
  

  • Sesetengah output apabila anda menjalankan program

  for (let i = 0; i < 4; i++) {
    console.log(Math.floor(Math.random() * 10));
  }
  // 4
  // 7
  // 3
  // 4
  

  • Apabila saya tekan enter

  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  for (let i = 0; i < 4; i++) {
    console.log(generateRandomNumbersBetween(0, 9));
  }
  

  • Saya rasa kita boleh menikmati kerja keras kita setakat ini. Saya mempunyai kira-kira 130 baris. Berapa banyak yang anda ada?

  • Ini ialah kod penuh
    

  const HP = 100;
  
  if (true) {
    console.log("IF BLOCK::", HP);
  }
  
  console.log("End::", HP);
  
  // IF BLOCK:: 100
  // End:: 100
  

  Adakah terdapat ruang untuk penambahbaikan?

  Walaupun ini ialah apl berasaskan konsol/terminal/teks yang ringkas, banyak lagi yang boleh kita lakukan mengenainya.

  • Kita boleh menggantikan semua pemalar seperti rentetan dan nombor.
  • Kami boleh menarik keluar (refactor) input pemutus kod dan pemisahannya, daripada kod bandingkan dan kemudian lulus pemutus kod dan pembuat kod sebagai hujah. Kita juga boleh membiarkan fungsi mengembalikan pembayang daripada mengakses pembayang secara global. Kami akan mencipta pembolehubah pembayang baharu dan mengembalikannya. Jadi compareCode akan mengembalikan pembayang yang diberikan kepada pembolehubah pembayang.

   IF BLOCK:: 100
   /home/Projects/mastermind/scratch_pad.js:8
   console.log(x)
      ^
  
   ReferenceError: x is not defined
      at Object.<anonymous> (/home/Projects/mastermind/scratch_pad.js:8:13)
      at Module._compile (node:internal/modules/cjs/loader:1469:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
      at node:internal/main/run_main_module:28:49
  
   Node.js v20.17.0
  

  • kita juga boleh membungkus console.clear() ke dalam fungsi.
  • kita boleh biarkan program perlahan sebelum perlawanan seterusnya
  • kita boleh mengeluarkan HINTS.filter((value) => 0 === value).length === 4 sebagai fungsi. Tujuannya adalah untuk menyemak sama ada pemecah kod telah meneka dengan betul pembuat kod.
  • kita juga boleh melakukan perkara yang sama untuk mengisytiharkan siapa yang memenangi permainan

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        CODE_MAKER.push(code);
        counter += 1;
      } else if (!CODE_MAKER.includes(code)) {
        CODE_MAKER.push(code);
        counter += 1;
      }
    }
  }
  
  console.log(CODE_MAKER);
  generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  // reset the code maker
  CODE_MAKER = [];
  generateCodeMaker(false);
  console.log(CODE_MAKER);
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  • Letakkan semua fungsi yang boleh berdiri sendiri ke dalam fail mereka sendiri, functions.js dan eksportnya. Kami kemudiannya boleh memfaktorkan semula fungsi kendiri yang bergantung pada pembolehubah global dan kemudian menghantar data tersebut sebagai hujah kepada fungsi menggunakan parameter.
  • Kami juga boleh mempunyai fail berasingan untuk

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
    let codeMaker = [];
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        codeMaker.push(code);
        counter += 1;
      } else if (!codeMaker.includes(code)) {
        codeMaker.push(code);
        counter += 1;
      }
    }
  
    return codeMaker;
  }
  
  console.log(CODE_MAKER);
  CODE_MAKER = generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  CODE_MAKER = generateCodeMaker(false);
  console.log(CODE_MAKER);
  
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  Kesimpulan

  Kami telah menggunakan semua yang telah kami pelajari dalam projek ini dan banyak lagi. Saya menyebut bahawa kita boleh mengumpulkan beberapa fungsi dan mengeksportnya. Untuk ini, kita akan membincangkan cara mengimport dan mengeksport dalam Javascript. Saya akan menyediakan satu lagi projek yang saya fikir akan berguna kepada anda. Ini adalah pengakhiran permainan dalang dan saya harap anda juga akan melakukan beberapa pemfaktoran semula kerana terdapat banyak tempat yang perlu difaktorkan semula. Semoga berjaya...
  

  const readline = require("readline");
  
  const readlineOInstance = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });
  
  readlineOInstance.question("Enter code maker: ", (userInput) => {
    console.clear();
    console.log(`INPUT: ${userInput}`);
    readlineOInstance.close();
  });
  

  Sumber

  • wiki-main-dalang
  • wikipedia-dalang
  • Master minda dalam python

  Atas ialah kandungan terperinci JavaScript Essentials: Bahagian Dalang dalam Javascript). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!