пытаясь понять игру "Саймон"

Question

Я работаю над игрой Саймона. Мне нужна помощь в понимании того, как ссылаться на идентификатор, и создании действия без щелчка, но, скажем, со ссылкой на страницу sh.

1) на экране refre sh (начало игры), я МОГУ рандомизировать выбранный идентификатор цвета ... и сохранить его в переменной с именем randomColorChosen ... но я НЕ могу понять, как сделать эту переменную randomColorChosen, выполнить те же действия, как если бы они были нажатыми кнопками, как мой код внизу .

2) Мой btn click и анимация цвета и воспроизведения звука ... работают нормально,

Я перепробовал много итераций моего нового ie кодирования ... Теперь я просто угадай, и вот оно последнее состояние ....

... работает произвольно выбранный цвет ... это то, что дальше, мне нужна помощь (объяснения)

... $(document).keydown(function(event) {} работает и протестирован с предупреждением ()

... но остальное, вплоть до щелчка, я столько раз менял, что у меня кружилась голова. Помогите мне понять, где я тупой AF! lol

... пользователь btn click действие и звук события ... отлично работает!

Вот мой код:

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

Было немного неясно, чего вы пытаетесь достичь sh. Я создал пример с некоторым возможным улучшенным кодом.

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