HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng JavaScript Math.random() làm Trình tạo số ngẫu nhiên


Thông thường, trong khi phát triển các dự án, bạn sẽ thấy mình đang tìm cách tạo các số ngẫu nhiên.

Các trường hợp sử dụng phổ biến nhất để tạo số ngẫu nhiên là các trò chơi may rủi như tung xúc xắc, xáo bài và quay bánh xe roulette.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một số ngẫu nhiên bằng cách sử dụng Math.random() phương pháp bằng cách xây dựng một trò chơi súc sắc nhỏ.

Phương thức Math.random()

Các Math đối tượng trong JavaScript là một đối tượng tích hợp sẵn có các thuộc tính và phương thức để thực hiện các phép tính toán học.

Một cách sử dụng phổ biến của Math đối tượng là tạo một số ngẫu nhiên bằng cách sử dụng random() phương pháp.

const randomValue = Math.random();

Nhưng Math.random() phương thức không thực sự trả về một số nguyên. Thay vào đó, nó trả về một giá trị dấu phẩy động giữa 0 (bao gồm) và 1 (không bao gồm). Ngoài ra, lưu ý rằng giá trị được trả về từ Math.random() là giả ngẫu nhiên trong tự nhiên.

Số ngẫu nhiên được tạo bởi Math.random() có vẻ ngẫu nhiên, nhưng những con số đó sẽ lặp lại và cuối cùng hiển thị một mẫu không ngẫu nhiên trong một khoảng thời gian.

Điều này là do việc tạo số ngẫu nhiên theo thuật toán không bao giờ có thể thực sự ngẫu nhiên về bản chất. Đây là lý do tại sao chúng tôi gọi chúng là bộ tạo số giả ngẫu nhiên (PRNG).

Đọc thêm  10 Thư Viện JavaScript Tuyệt Vời Bạn Nên Dùng Thử Trong Năm 2021

Để tìm hiểu thêm về Math.random() phương pháp bạn có thể kiểm tra hướng dẫn này.

Hàm tạo số ngẫu nhiên

Bây giờ hãy sử dụng Math.random() để tạo một hàm sẽ trả về một số nguyên ngẫu nhiên giữa hai giá trị (đã bao gồm).

const getRandomNumber = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

Hãy phá vỡ logic ở đây.

Các Math.random() sẽ trả về một số dấu phẩy động trong khoảng từ 0 đến 1 (độc quyền).

Vì vậy, các khoảng thời gian sẽ như sau:

[0 .................................... 1)

[min .................................... max)

Để phân tích khoảng thời gian thứ hai, trừ min từ cả hai đầu. Vì vậy, điều đó sẽ cung cấp cho bạn một khoảng giữa 0 và max-min.

[0 .................................... 1)

[0 .................................... max - min)

Vì vậy, bây giờ, để có được một giá trị ngẫu nhiên, bạn sẽ làm như sau:

const x = Math.random() * (max - min)

Đây x là giá trị ngẫu nhiên.

Hiện tại, max được loại trừ khỏi khoảng thời gian. Để bao hàm, hãy thêm 1. Ngoài ra, bạn cần thêm min trở lại đã được trừ trước đó để có được một giá trị giữa [min, max).

const x = Math.random() * (max - min + 1) + min

Được rồi, bây giờ bước cuối cùng còn lại là đảm bảo rằng x luôn là một số nguyên.

const x = Math.floor(Math.random() * (max - min + 1)) + min

Bạn có thể sử dụng Math.round() phương pháp thay vì floor(), nhưng điều đó sẽ cung cấp cho bạn phân phối không đồng đều. Điều này có nghĩa là cả hai maxmin sẽ có một nửa cơ hội để đi ra như một kết quả. sử dụng Math.floor() sẽ cung cấp cho bạn phân phối đồng đều hoàn hảo.

Đọc thêm  Hướng dẫn API tìm nạp JavaScript với các ví dụ về tiêu đề và bài viết tìm nạp JS

Vì vậy, bây giờ bạn đã hiểu rõ về cách thức hoạt động của một thế hệ ngẫu nhiên, hãy sử dụng chức năng này để mô phỏng xúc xắc lăn.

Trò chơi lăn xúc xắc

Trong phần này, chúng ta sẽ tạo một trò chơi xúc xắc nhỏ thực sự đơn giản. Hai người chơi nhập tên của họ và tung xúc xắc. Người chơi có xúc xắc có số lớn hơn sẽ thắng vòng.

Đầu tiên, tạo một chức năng rollDice mô phỏng hành động tung xúc xắc.

Bên trong thân hàm, gọi getRandomNumber() chức năng với 16 như các đối số. Điều này sẽ cung cấp cho bạn bất kỳ số ngẫu nhiên nào từ 1 đến 6 (bao gồm cả hai) giống như cách thức hoạt động của xúc xắc thật.

const rollDice = () => getRandomNumber(1, 6);

Tiếp theo, tạo hai trường nhập và một nút như hình bên dưới:

<div id="app">
      <div>
        <input id="player1" placeholder="Enter Player 1 Name" />
      </div>
      <div>
        <input id="player2" placeholder="Enter Player 2 Name" />
      </div>
      <button id="roll">Roll Dice</button>
      <div id="results"></div>
    </div>

Khi nhấp vào nút ‘Roll Dice’, hãy lấy tên người chơi từ các trường nhập và gọi rollDice() chức năng cho mỗi người chơi.

const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;


const rollDice = () => getRandomNumber(1, 6);

document.getElementById("roll").addEventListener("click", function () {
  // fetch player names from the input fields
  const player1 = document.getElementById("player1").value;
  const player2 = document.getElementById("player2").value;

  // roll dice for both players
  const player1Score = rollDice();
  const player2Score = rollDice();

  // initialize empty string to store result
  let result = "";

  // determine the result
  if (player1Score > player2Score) {
    result = `${player1} won the round`;
  } else if (player2Score > player1Score) {
    result = `${player2} won the round`;
  } else {
    result = "This round is tied";
  }

  // display the result on the page
  document.getElementById("results").innerHTML = `
  <p>${player1} => ${player1Score}</p>
  <p>${player2} => ${player2Score}</p>
  <p>${result}</p>
  `;
});

Bạn có thể xác thực các trường tên của người chơi và chỉnh sửa đánh dấu bằng một số CSS. Với mục đích ngắn gọn, tôi sẽ giữ nó đơn giản cho hướng dẫn này.

Đọc thêm  Giải thích phương thức JavaScript Math.random()

Đó là nó. Bạn có thể kiểm tra bản demo ở đây.

Phần kết luận

Vì vậy, việc tạo số ngẫu nhiên trong JavaScript không phải là quá ngẫu nhiên. Tất cả những gì chúng tôi đang làm là lấy một số số đầu vào, sử dụng một số phép toán và đưa ra một số giả ngẫu nhiên.

Đối với hầu hết các ứng dụng và trò chơi dựa trên trình duyệt, mức độ ngẫu nhiên này là đủ và phục vụ mục đích của nó.

Đó là nó cho hướng dẫn này. Giữ an toàn và tiếp tục mã hóa như một con thú.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status