试图理解“西蒙”游戏

Question

我正在开发 Simon 游戏。我需要帮助来了解如何引用 id 和创建操作而无需单击但要说页面刷新。

1) 在屏幕刷新（游戏开始）时，我可以随机化选择的颜色 id...并将其保存在一个名为 randomColorChosen 的变量中...但我不知道如何制作该变量 randomColorChosen，做出与点击按钮一样的操作，就像我在底部的代码一样。

2) 我的 btn 点击和动画颜色和播放声音...工作正常，

我已经尝试了很多次我的新手编码迭代...... 现在我只是猜测，这是它的最后一个状态......

...随机颜色选择有效...接下来我需要帮助（解释）

...$(document).keydown(function(event) {} 使用 alert() 工作和测试

...但其余的，直到我点击，我已经改变了很多次，我的头在旋转。帮助我了解我在哪里愚蠢的AF！哈哈

...用户 btn 点击事件动作和声音...工作正常！

到目前为止，这是我的代码：

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

有点不清楚您要完成什么。我用一些可能的改进代码创建了一个示例。

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