Bagaimana untuk melaksanakan permainan meneka nombor menggunakan JavaScript

Dalam era Internet, permainan boleh dimainkan pada bila-bila masa dan di mana sahaja, yang boleh membawa sejumlah hiburan dan kegembiraan. Antaranya, permainan teka nombor adalah permainan yang lebih klasik dan sesuai untuk semua peringkat umur. Jadi, dalam artikel ini, kami akan memperkenalkan langkah demi langkah bagaimana untuk melaksanakan permainan meneka nombor menggunakan JavaScript.

Langkah 1: Persediaan

Sebelum kita mula menulis kod, kita perlu menyediakan persekitaran kerja. Di sini kita boleh menggunakan mana-mana editor teks atau alat pembangunan. Contohnya: Teks Sublime, Kod VS, dsb. Untuk pemula, saya mengesyorkan menggunakan Codepen.io, alat pembangunan dalam talian yang sangat sesuai untuk menulis projek JavaScript kecil dengan cepat.

Langkah 2: Tulis kod HTML

Mula-mula, kita perlu menulis kod HTML untuk mencipta antara muka pengguna yang mudah. Dalam kod ini, kami akan mencipta elemen div yang mengandungi elemen h1 untuk memaparkan tajuk permainan, elemen input dan elemen butang untuk membenarkan pengguna memasukkan nombor yang diteka dan elemen p untuk memaparkan hasil permainan.

Berikut ialah kod HTML.

<div id="game">
  <h1>猜数字游戏</h1>
  <input type="text" placeholder="请输入你的猜测" id="guess"></input>
  <button onclick="checkGuess()">猜一猜</button>
  <p id="results"></p>
</div>

Di sini, kami mencipta elemen div dengan id "permainan" dan meletakkan tajuk, kotak input, butang dan hasil di dalamnya. Ambil perhatian bahawa kami telah menambah acara onclick pada butang yang memanggil fungsi checkGuess().

Langkah 3: Tulis Kod JavaScript

Sekarang, kita boleh mula menulis kod JavaScript. Sebelum kita mula, kita akan menentukan tiga pembolehubah pembukaan.

var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = [];
var count = 0;

Pembolehubah randomNumber di sini akan menjana nombor rawak dari 1 hingga 100, pembolehubah tekaan akan menyimpan semua tekaan pengguna dan pembolehubah kiraan akan menyimpan bilangan tekaan pengguna.

Seterusnya, kami akan mula menulis fungsi checkGuess().

function checkGuess() {
  var guess = document.getElementById("guess").value;
  if (guesses.indexOf(guess) !== -1) {
    alert("你已经猜过这个数字了，请猜另外一个数字！");
    return;
  }
  guesses.push(guess);
  count++;
  var resultDiv = document.getElementById("results");
  if (guess == randomNumber) {
    alert("恭喜你，你猜对了！你猜了" + count + "次。");
    resultDiv.innerHTML = "恭喜你，你猜对了！你猜了" + count + "次。";
  } else if (guess < randomNumber) {
    resultDiv.innerHTML = "你猜的数字过小";
  } else if (guess > randomNumber) {
    resultDiv.innerHTML = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

Dalam fungsi checkGuess(), kita mula-mula mendapatkan nombor yang dimasukkan oleh pengguna dan menyemak sama ada ia telah diteka. Jika tekaan itu diluluskan, kami akan memaparkan amaran yang memberitahu pengguna mereka perlu meneka nombor lain. Jika tidak, kami terus melaksanakan kod dan menambah nombor ini pada tatasusunan tekaan.

Seterusnya, kami menambah pembilang kiraan sebanyak 1 dan mengemas kini tekaan pengguna dalam elemen resultDiv. Jika pengguna meneka dengan betul, kami akan muncul pop timbul untuk memberitahu mereka bahawa mereka meneka dengan betul dan mengemas kini elemen resultDiv.

Jika pengguna tidak meneka dengan betul, kami akan memberitahu mereka sama ada mereka meneka lebih rendah atau lebih tinggi dan mengemas kini elemen resultDiv.

Akhir sekali, kami akan mengosongkan tekaan pengguna dalam kotak input.

Langkah 4: Uji kod anda

Sekarang, kami telah menulis kod HTML dan JavScript yang diperlukan. Kami boleh menguji kod kami dan melihat sama ada permainan berfungsi dengan betul dalam beberapa langkah mudah. Salin kod di atas ke dalam editor dalam talian dan tekan butang jalankan.

UI permainan kini sepatutnya dipaparkan. Masukkan nombor dalam kotak input dan klik butang "Teka". Jika anda meneka dengan betul, anda akan melihat kotak gesaan yang memberitahu anda bahawa anda meneka dengan betul dan berapa kali anda meneka.

Jika anda salah meneka, anda akan melihat gesaan yang menunjukkan bahawa anda meneka terlalu rendah atau terlalu tinggi. Jika anda masih belum meneka nombor itu, anda boleh terus meneka dan sistem akan merekodkan setiap tekaan anda.

Ringkasnya, melalui artikel ini, anda boleh mempelajari cara menggunakan JavaScript untuk menulis permainan meneka dan anda boleh menikmati faedah permainan itu pada bila-bila masa dan di mana-mana sahaja.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan permainan meneka nombor menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!