Using JavaScript Math.random() as a random number generator in a shuffling playing cards game

Generating random numbers, such as shuffling playing cards, rolling dice, or spinning roulette wheels are all examples of potential JavaScript projects where you could be using the JavaScript Math.random() method.

In this tutorial, we will help you understand how to generate a random number using the Math.random() method by building simple shuffling playing cards app.

Explaining the Math.random() method

In JavaScript, the Math object is a built-in object with properties and methods for performing mathematical calculations. Math is a placeholder object that contains mathematical functions and constants of which random() is one of these static functions. The random() method is one of the most common methods to create a random number – this function returns a pseudo-random number within a given range. Why a pseudo-random number? Well, random numbers generated by Math.random() do indeed look random, but these numbers will eventually start to repeat and after a certain period of spins the numbers (or cards or dice) will start to display a non-random pattern. The mathematical fact is that in nature the random number generation algorithm cannot be truly random, and this is the reason we call them pseudo-random number generators or PRNGs.

The syntax for the random() function is:

Math.random();

There are no parameters or arguments for the random() function, and the random() function returns a value between 0, which is inclusive, and 1, which is not included in the returned result. So, the Math.random() function doesn’t return a whole number – it returns a floating-point, co-called pseudo-random number in the range 0 to less than 1. The distribution over that range is approximately uniform and later on, you can scale the return to your desired range.

How to get a random number between two values?

function getRandomNumberBetweenTwoValues(minValue, maxValue) {
    return Math.random() * (maxValue - minValue) + minValue;
}

With this example, the function will result in a return of a random number between value1 and value2 – the lowest returned value might be as low as value1, but it may never be as high as value2, it will always be below the highest number.

How to get a random integer between two values?

function getRandomIntegerBetweenTwoValuesExclude(minValue, maxValue) {
    // The Math.ceil() function always rounds a number upwards to the next largest integer, for example 1.3 will be rounded to 2 
    minValue = Math.ceil(minValue);
    // The Math.floor() function always rounds a number downwards to its nearest integer, for example 1.7 will be rounded to 1  
    maxValue = Math.floor(maxValue);
    //The minValue could be included in the result, while the inclusion of maxValue is not possible. 
    return Math.floor(Math.random() * (maxValue - minValue) + minValue); 
}

What if we need both lower and upper values to be included?

So, the upper example excludes the upper value, but what if we need that maxValue to be included as a potential result? The difference is in the last row:

function getRandomIntegerBetweenTwoValuesInclude(minValue, maxValue) {
    minValue = Math.ceil(minValue);
    maxValue = Math.floor(maxValue);
    // Both the minValue and maxValue could be potentially included in the result
    return Math.floor(Math.random() * (maxValue - minValue + 1) + minValue); 
}

Playing card shuffling app with math.random()

OK, so now that we’ve gone through a few basic examples of a random number generator using JavaScript Math.random(), it’s time to take a look at how we can use this function when we want to create a playing card shuffling app. To add a glimpse of magic, let’s use tarot cards.

// let's create an array of cards - we'll put URLs of cards we'll use in our card shuffling game, for our purpose we'll use only five cards  
var cards = [
    'https://i.redd.it/769fxai86zk11.png', 
    'https://i.redd.it/ofxbpu4lqgu11.png', 
    'https://i.redd.it/swemqrfzk8j11.png', 
    'https://i.redd.it/n0oxjlfm8lc11.png', 
    'https://i.redd.it/6zx6teijnwb11.png'
];

var imgElement = document.getElementById('card');

// function that generates a random number between 0 and 4 every time we call it 
// function also replaces a property of image source (img tag) and this way the image also changes 
// we use the same img tag, but we only change the URLs of pictures 

function spin() {
    var randomCardIndex = Math.floor(Math.random() * cards.length);
    // the function takes a random URL from the array of URLs listed above in the var cards 
    // array starts with 0 for the first element of an array 
    imgElement.src = cards[randomCardIndex];
}

spin();