试图理解“西蒙”游戏

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>