javascript - trying to understand "Simon" game

Question

I'm Working on Simon game. I need help with understanding how to reference an id and creating an action without a click but say with page refresh.

1) on screen refresh (the start of the game), I CAN randomize the color id chosen...and save it in a var called randomColorChosen... but I can NOT figure out how to make that var randomColorChosen, make the same actions as if they were a clicked on button like my code at the bottom.

2) My btn click and animate color and play sound... work fine,

I have tried many iterations of my newbie coding... Now I'm just guessing and here is it's last state....

... random Color Chosen works... its what's next I need help (explanations on)

... $(document).keydown(function(event) {} works and tested with an alert()

... but the rest, down until my but clicks, I have changed so many times my head is spinning. Help my understand where I am dumb AF! lol

... user btn click event action and sound... works fine!

Here is my code so far:

buttonColors=["btn green","btn red", "btn yellow", "btn blue"];
randomColorChosen=buttonColors[Math.floor(Math.random() * (buttonColors.length))];
$(document).keydown(function(event) { 
setTimeout(2000);  
    $("#id").attr(function(randomColorChosen){
        $(this).fadeOut(100).fadeIn(100);
          var myPadColor = $(this).attr("#id");
        });
      });
$(document).ready(function() {
    $(".btn").click(function(event) {
      $(this).fadeOut(100).fadeIn(100);//when a "this" button is clicked .fadeOut(100).fadeIn(100);
      var myPadColor = $(this).attr("class");
       ;
      switch (myPadColor) {
        case "btn green":
          var greenPad = new Audio('sounds/green.mp3');
          greenPad.play();
          break;
        case "btn red":
          var redPad = new Audio('sounds/red.mp3');
          redPad.play();
          break;
        case "btn yellow":
          var yellowPad = new Audio('sounds/yellow.mp3');
          yellowPad.play();
          break;
        case "btn blue":
          var bluePad = new Audio('sounds/blue.mp3');
          bluePad.play();
          break;
        default:
          console.log(myPadColor);
      }
    });
  });

Answer 1

It was a little unclear what you are trying to accomplish. I created an example with some possible improved code.

$(function() {
  var seq = [];
  var player = [];
  var c;
  var round = 0;
  var sounds = [
    new Audio('sounds/green.mp3'),
    new Audio('sounds/red.mp3'),
    new Audio('sounds/yellow.mp3'),
    new Audio('sounds/blue.mp3')
  ];

  function getRandom() {
    return Math.floor(Math.random() * 4);
  }

  function initSeq(n) {
    for (var i = 0; i < n; i++) {
      seq.push(getRandom());
    }
  }

  function flash(b) {
    //console.log("Flashing Button " + b);
    var btn = $("#game-board .btn").eq(b);
    btn.fadeTo(300, 1.0, function() {
      btn.fadeTo(300, 0.35);
    });
    sounds[b].play();
  }

  function endGame() {
    $("#game-board").hide();
    $("h1").show();
    $("h1").after("<h2>Gome Over. Score: " + player.length + "</h2>");
  }

  function waitUserInput() {
    c = setInterval(endGame, 10 * 1000);
  }

  function playSequence(x) {
    if (x == 0 || x == undefined) {
      x = 20;
    }
    $.each(seq, function(i, s) {
      if (i < x) {
        flash(s);
      }
    });
  }

  function nextRound() {
    playSequence(++round);
  }

  function initGame() {
    initSeq(20);
    player = [];
    c = null;
    round = 0;
    nextRound();
  }

  $(document).keydown(function(event) {
    $("h1").hide();
    $("#game-board").show();
    initGame();
  });

  $("#game-board .btn").click(function(event) {
    var i = $(this).index();
    flash(i);
    player.push(i);
  });

  $("#playSeq").click(function() {
    var p = $(this).next().val();
    console.log("TEST: Play Sequence to " + p + " Position.");
    if (seq.length == 0) {
      initSeq(20);
      $("#game-board").show();
    }
    //console.log("TEST", seq);
    playSequence(p);
  });
});

#game-board {
  width: 410px;
  white-space: normal;
}

.btn {
  width: 200px;
  height: 200px;
  display: inline-block;
  opacity: 0.35;
  padding: 0;
  margin: 0;
  border: 0;
}

.green {
  background: green;
  border-radius: 199px 0 0 0;
}

.red {
  border: 0;
  background: red;
  border-radius: 0 199px 0 0;
}

.yellow {
  border: 0;
  background: yellow;
  opacity: 0.65;
  border-radius: 0 0 0 199px;
}

.blue {
  border: 0;
  background: blue;
  opacity: 0.65;
  border-radius: 0 0 199px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test-bar">
  <button id="playSeq">Play To</button> <input type="number" value="1" style="width: 2.5em;" />
</div>
<h1>Press Any Key to Begin.</h1>
<div id="game-board" style="display: none;">
  <div class="btn green"></div>
  <div class="btn red"></div>
  <div class="btn yellow"></div>
  <div class="btn blue"></div>
</div>