كيفية استخدام Math.random() في JavaScript لتوليد الأرقام العشوائية

مرحباً بك أيها المطور الطموح! غالباً ما تجد نفسك، أثناء تطوير المشاريع البرمجية، تبحث عن طرق لتوليد أرقام عشوائية. تتضمن حالات الاستخدام الأكثر شيوعاً لتوليد الأرقام العشوائية ألعاب الحظ مثل رمي النرد، خلط أوراق اللعب، وتدوير عجلات الروليت. في هذا الدليل، ستتعلم كيفية توليد رقم عشوائي باستخدام الدالة Math.random() من خلال بناء لعبة نرد مصغرة.

فهم الدالة Math.random() في JavaScript

يُعد الكائن Math في JavaScript كائناً مدمجاً يحتوي على خصائص ودوال (methods) لأداء العمليات الحسابية. أحد الاستخدامات الشائعة للكائن Math هو إنشاء رقم عشوائي باستخدام الدالة random().

const randomValue = Math.random();

لكن الدالة Math.random() لا تُرجع في الواقع عدداً صحيحاً. بدلاً من ذلك، تُرجع قيمة عشرية (floating-point value) تتراوح بين 0 (شامل) و 1 (غير شامل). تجدر الإشارة أيضاً إلى أن القيمة المُرجعة من Math.random() هي ذات طبيعة شبه عشوائية (pseudo-random). قد تبدو الأرقام التي تُولدها Math.random() عشوائية، لكن هذه الأرقام ستتكرر وتُظهر في النهاية نمطاً غير عشوائي على مدى فترة زمنية طويلة. هذا لأن توليد الأرقام العشوائية الخوارزمي لا يمكن أن يكون عشوائياً بشكل حقيقي بطبيعته. لهذا السبب نُطلق عليها مولدات الأرقام شبه العشوائية (PRNGs).

بناء دالة لتوليد الأعداد الصحيحة العشوائية ضمن نطاق محدد

الآن، دعنا نستخدم الدالة Math.random() لإنشاء دالة تُرجع عدداً صحيحاً عشوائياً بين قيمتين (شاملتين).

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

تحليل منطق دالة توليد الأرقام العشوائية

دعنا نفكك المنطق هنا. ستُرجع الدالة Math.random() رقماً عشرياً بين 0 و 1 (غير شامل). لذا، ستكون الفترات كالتالي:

[ 0 .................................... 1 )
[min .................................... max)

لمراعاة الفترة الثانية، نطرح min من كلا الطرفين. هذا سيمنحك فترة بين 0 و max - min.

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

الآن، للحصول على قيمة عشوائية، ستفعل ما يلي:

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

هنا x هي القيمة العشوائية. حالياً، max مستبعدة من الفترة. لجعلها شاملة، أضف 1. أيضاً، تحتاج إلى إعادة إضافة min التي تم طرحها سابقاً للحصول على قيمة بين [min, max).

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

حسناً، الخطوة الأخيرة المتبقية هي التأكد من أن x هو دائماً عدد صحيح.

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

يمكنك استخدام الدالة Math.round() بدلاً من floor()، لكن ذلك سيمنحك توزيعاً غير موحد (non-uniform distribution). هذا يعني أن كلاً من max و min سيكون لديهما نصف فرصة للظهور كنتيجة. استخدام Math.floor() سيمنحك توزيعاً متساوياً تماماً.

الآن بعد أن أصبح لديك فهم جيد لكيفية عمل توليد الأرقام العشوائية، دعنا نستخدم هذه الدالة لمحاكاة رمي النرد.

تطبيق عملي: لعبة النرد البسيطة

في هذا القسم، سنقوم بإنشاء لعبة نرد مصغرة بسيطة جداً. يدخل لاعبان اسميهما ويقومان برمي النرد. اللاعب الذي يحصل على رقم أعلى في النرد سيفوز بالجولة.

إنشاء دالة رمي النرد (rollDice)

أولاً، أنشئ دالة rollDice تحاكي حركة رمي النرد. داخل جسم الدالة، استدعِ الدالة getRandomNumber() مع 1 و 6 كمعاملات. هذا سيعطيك أي رقم عشوائي بين 1 و 6 (كلاهما شامل)، تماماً كما يعمل النرد الحقيقي.

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

تصميم واجهة المستخدم (HTML)

بعد ذلك، أنشئ حقلي إدخال وزراراً كما هو موضح أدناه:

<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>

ربط المنطق بالواجهة (JavaScript)

عند النقر على زر ‘Roll Dice’، احصل على أسماء اللاعبين من حقلي الإدخال واستدعِ الدالة rollDice() لكل لاعب.

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>
  `;
});

يمكنك التحقق من صحة حقول أسماء اللاعبين وتجميل الواجهة ببعض أنماط CSS. لأغراض الإيجاز، أبقينا الأمر بسيطاً في هذا الدليل.

الخلاصة التقنية

إذاً، توليد الأرقام العشوائية في JavaScript ليس عشوائياً تماماً كما قد يبدو للوهلة الأولى. كل ما نقوم به هو أخذ بعض الأرقام المدخلة، واستخدام بعض العمليات الرياضية (Math)، وإخراج رقم شبه عشوائي. بالنسبة لمعظم تطبيقات وألعاب المتصفح، فإن هذا القدر من العشوائية كافٍ ويخدم الغرض منه بشكل ممتاز. ومع ذلك، من الأهمية بمكان للمطورين فهم طبيعة مولدات الأرقام شبه العشوائية (PRNGs) هذه، خاصة عند التعامل مع تطبيقات تتطلب مستوى عالياً من الأمان أو التشفير، حيث قد تكون هناك حاجة إلى مصادر عشوائية حقيقية. لكن للاستخدامات اليومية والألعاب البسيطة، تُقدم الدالة Math.random() حلاً فعالاً وموثوقاً.