how to implement random pattern in Javascript game

Randomly generate the pattern at the beginning of the game. You’ll need to:

-Add a function for generating the pattern. (Hint: JavaScript’s Math.random) function may be useful to you) -Call your new function from the startGame function

I am having trouble implementing this. I am just confused on how to generate random numbers from the array I created called pattern and have it play the clues randomly.

JS File:

//Global Contants

const cluePauseTime = 333; //how long to pause in between clues
const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence

//Global variables
var clueHoldTime = 200; //how long to hold each clue's light/sound
var pattern = [2, 3, 1, 4, 6, 1, 2, 4, 3, 5];
var progress = 0;
var gamePlaying = false;
var tonePlaying = false;
var volume = 0.5;
var guessCounter = 0;

function startGame() {
  progress = 0;
  
  gamePlaying = true;

  document.getElementById("startBtn").classList.add("hidden");
  document.getElementById("stopBtn").classList.remove("hidden");

  playClueSequence();

}

function stopGame() {
  gamePlaying = false;

  document.getElementById("startBtn").classList.remove("hidden");
  document.getElementById("stopBtn").classList.add("hidden");
}

function lightButton(btn) {
  document.getElementById("button" + btn).classList.add("lit");
}
function clearButton(btn) {
  document.getElementById("button" + btn).classList.remove("lit");
}

function playSingleClue(btn) {
  if (gamePlaying) {
    lightButton(btn);
    playTone(btn, clueHoldTime);
    setTimeout(clearButton, clueHoldTime, btn);
  }
}

function playClueSequence() {
  guessCounter = 0;
  let delay = nextClueWaitTime; //set delay to initial wait time
  for (let i = 0; i <= progress; i++) {
    // for each clue that is revealed so far
    console.log("play single clue: " + pattern[i] + " in " + delay + "ms");
    setTimeout(playSingleClue, delay, pattern[i]); // set a timeout to play that clue
    delay += clueHoldTime;
    delay += cluePauseTime;
  }
}

function loseGame() {
  stopGame();
  alert("Game Over. You lost.");
}
function winGame() {
  stopGame();
  alert("Yayyyyy, you win!!");
}

function guess(btn) {
  console.log("user guessed: " + btn);
  if (!gamePlaying) {
    return;
  }
  if (pattern[guessCounter] == btn) {
    if (guessCounter == progress) {
      if (progress == pattern.length - 1) {
        winGame();
      } else {
        progress++;
        playClueSequence();
      }
    } else {
      guessCounter++;
    }
    //guessCounter++;
  } else {
    loseGame();
  }
}
// Sound Synthesis Functions
const freqMap = {
  1: 261.6,
  2: 329.6,
  3: 392,
  4: 466.2,
  5: 432.8,
  6: 336.2
};
function playTone(btn, len) {
  o.frequency.value = freqMap[btn];
  g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);
  tonePlaying = true;
  setTimeout(function() {
    stopTone();
  }, len);
}
function startTone(btn) {
  if (!tonePlaying) {
    o.frequency.value = freqMap[btn];
    g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);
    tonePlaying = true;
  }
}
function stopTone() {
  g.gain.setTargetAtTime(0, context.currentTime + 0.05, 0.025);
  tonePlaying = false;
}

//Page Initialization
// Init Sound Synthesizer
var context = new AudioContext();
var o = context.createOscillator();
var g = context.createGain();
g.connect(context.destination);
g.gain.setValueAtTime(0, context.currentTime);
o.connect(g);
o.start(0);

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Hello!</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>
    <h1>Memory Game</h1>

    <p>
      Welcome to the game that will test your memory!
    </p>

    <button id="startBtn" onclick="startGame()">
      Start
    </button>
    <button id="stopBtn" class="hidden" onclick="stopGame()">
      Stop
    </button>

    <div id="gameButtonArea">
      <button
        id="button1"
        onclick="guess(1)"
        onmousedown="startTone(1)"
        onmouseup="stopTone()"
      ></button>
      <button
        id="button2"
        onclick="guess(2)"
        onmousedown="startTone(2)"
        onmouseup="stopTone()"
      ></button>
      <button
        id="button3"
        onclick="guess(3)"
        onmousedown="startTone(3)"
        onmouseup="stopTone()"
      ></button>
      <button
        id="button4"
        onclick="guess(4)"
        onmousedown="startTone(4)"
        onmouseup="stopTone()"
      ></button>
      <button
        id="button5"
        onclick="guess(5)"
        onmousedown="startTone(5)"
        onmouseup="stopTone()"
      ></button>
      <button
        id="button6"
        onclick="guess(6)"
        onmousedown="startTone(6)"
        onmouseup="stopTone()"
      ></button>
    </div>
  </body>
</html>

CSS:

body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
  background-color: slategrey;
  color: white;
}

h1 {
  font-family: verdana, arial, sans-serif;
  color: yellow;
}

button {
  padding: 15px;
  border-radius: 15px;
}

#gameButtonArea > button {
  width: 200px;
  height: 200px;
  margin: 2px;
}

.hidden {
  display: none;
}

#button1 {
  background: lightgreen;
}
#button1:active,
#button1.lit {
  background: green;
}

#button2 {
  background: lightblue;
}
#button2:active,
#button2.lit {
  background: blue;
}

#button3 {
  background: pink;
}
#button3:active,
#button3.lit {
  background: red;
}

#button4 {
  background: lightyellow;
}
#button4:active,
#button4.lit {
  background: yellow;
}

#button5 {
  background: lightgray;
}
#button5:active,
#button5.lit {
  background: black;
}

#button6 {
  background: white;
}
#button6:active,
#button6.lit {
  background: purple;
}

Answer

As you can see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

The following function will easily meet your needs to generate random numbers.

function getRandomInt(max) {
 return Math.floor(Math.random() * Math.floor(max) + 1); // + 1 so we don't get 0
}

All you need to do it call it in a loop at the start to populate your array, something like below.

var pattern = [];
var clueLength = 10;

function startGame() {

pattern = []; // reset so array doesn't get longer then 5 if we restart game
for (var i =0; i < clueLength; i ++) {
  pattern.push(getRandomInt(5));
}
console.log('pattern: ' + pattern);

progress = 0;

gamePlaying = true;

document.getElementById("startBtn").classList.add("hidden");
document.getElementById("stopBtn").classList.remove("hidden");

playClueSequence();

}

Here is a JSFiddle with my changes in place i hope this helped. https://jsfiddle.net/dm5pq4cr/2/