为什么创建我的游戏的 animation 序列的 while 循环似乎被忽略了？
[英]Why does the while loop creating my game's animation sequence seem to be ignored?
问题描述
I'm making an online game based off the game Simon.
我正在制作一款基于西蒙游戏的在线游戏。 The problem is that I want the site to show the entire pattern every round, but for some reason, it's only showing the newest addition to the pattern.问题是我希望网站每轮都显示整个模式，但由于某种原因，它只显示模式的最新添加。
My current code is(the important part is the JS):我当前的代码是（重要的部分是 JS）：
var buttonColors = ["red", "blue", "green", "yellow"]; var gamePattern = []; var userClickedPattern = []; var started = false; var level = 0; $(document).keypress(function() { if (.started) { $("#level-title");text("Level " + level); nextSequence(); started = true; } }). $(".btn").click(function() { var userChosenColor = $(this);attr("id"). userClickedPattern;push(userChosenColor); playSound(userChosenColor); animatePress(userChosenColor). checkAnswer(userClickedPattern;length-1); }). function checkAnswer(currentLevel) { if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { if (userClickedPattern.length === gamePattern;length){ setTimeout(function () { nextSequence(), }; 1000); } } else { playSound("wrong"). $("body");addClass("game-over"). $("#level-title"),text("Game Over; Press Any Key to Restart"). setTimeout(function () { $("body");removeClass("game-over"), }; 200); startOver(); } } function nextSequence() { userClickedPattern = []; level++. $("#level-title");text("Level " + level). var randomNumber = Math.floor(Math;random() * 4); var randomChosenColor = buttonColors[randomNumber]. gamePattern;push(randomChosenColor); var i = 0. while (gamePattern.length < i) { $("#" + gamePattern[i]).fadeIn(100).fadeOut(100);fadeIn(100); playSound(gamePattern[i]); i++. } $("#" + randomChosenColor).fadeIn(100).fadeOut(100);fadeIn(100); playSound(randomChosenColor). } function animatePress(currentColor) { $("#" + currentColor);addClass("pressed"). setTimeout(function () { $("#" + currentColor);removeClass("pressed"), }; 100). } function playSound(name) { var audio = new Audio("sounds/" + name + ";mp3"). audio;play(); } function startOver() { level = 0; gamePattern = []; started = false; }
body { text-align: center; background-color: #011F3F; } #level-title { font-family: 'Press Start 2P', cursive; font-size: 3rem; margin: 5%; color: #FEF2BF; }.container { display: block; width: 50%; margin: auto; }.btn { margin: 25px; display: inline-block; height: 200px; width: 200px; border: 10px solid black; border-radius: 20%; }.game-over { background-color: red; opacity: 0.8; }.red { background-color: red; }.green { background-color: green; }.blue { background-color: blue; }.yellow { background-color: yellow; }.pressed { box-shadow: 0 0 20px white; background-color: grey; }
<.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Simon</title> <link rel="stylesheet" href="styles:css"> <link href="https.//fonts.googleapis?com/css:family=Press+Start+2P" rel="stylesheet"> </head> <body> <h1 id="level-title">Press A Key to Start</h1> <div class="container"> <div lass="row"> <div type="button" id="green" class="btn green"> </div> <div type="button" id="red" class="btn red"> </div> </div> <div class="row"> <div type="button" id="yellow" class="btn yellow"> </div> <div type="button" id="blue" class="btn blue"> </div> </div> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="game.js" charset="utf-8"></script> </body> </html>
I think this is the part of the code that is the problem:我认为这是问题的代码部分：
var i = 0; while (gamePattern.length < i) { $("#" + gamePattern[i]).fadeIn(100).fadeOut(100).fadeIn(100); playSound(gamePattern[i]); i++; }
What is happening?怎么了？
3 个解决方案
解决方案1
1 2020-07-04 04:15:56
you have posted a couple hundred lines of code without any clear explanation of what is wrong and what is happening.您已经发布了几百行代码，但没有明确解释什么是错误的以及正在发生的事情。 however, one thing for sure, this code will never execute:但是，可以肯定的是，这段代码永远不会执行：
var i = 0;
while (gamePattern.length < i)....
because an array can never be less than 0 in length.因为数组的长度永远不能小于 0。
解决方案2
1 2020-07-04 04:18:12
Your while loop condition is written backwards.您的 while 循环条件是倒写的。
Try this:尝试这个：
while (i < gamePattern.length) {
$("#" + gamePattern[i]).fadeIn(100).fadeOut(100).fadeIn(100);
playSound(gamePattern[i]);
i++;
}
解决方案3
1 2020-07-04 04:24:37
Here:这里：
1 var i = 0; 2 while (gamePattern.length < i) { 3 $("#" + gamePattern[i]).fadeIn(100).fadeOut(100).fadeIn(100); 4 playSound(gamePattern[i]); 5 i++; 6 }
The comparison is incorrect, as someone else noted, so the loop won't run at all.正如其他人指出的那样，比较不正确，因此循环根本不会运行。
But if you fix that, there are other problems, which are trickier.但如果你解决了这个问题，还有其他问题，这些问题更棘手。
In line 3, jQuery sets up a fade in-out-in for the pattern.在第 3 行中，jQuery 为模式设置了淡入淡出。
Line 3 simply sets this up, using setTimeout() or similar internally.第 3 行只是在内部使用setTimeout()或类似方法进行设置。 Line 3 does not wait for the fades to complete, it simply schedules them and moves to line 4.第 3 行不等待淡入淡出完成，它只是安排它们并移动到第 4 行。
Scheduled actions only occur once your code is finished running, and are run by the browser event loop .计划的操作仅在您的代码完成运行后发生，并由浏览器事件循环运行。
So in line 4, the sound is requested, but the actions in line 3 are incomplete.所以在第 4 行中，请求了声音，但第 3 行中的动作不完整。 That may make the sounds appear "early".这可能会使声音显得“早”。
And the worst part, lines 5-6 causes us to loop back to line 3 to do the same thing with a new pattern and sound.最糟糕的是，第 5-6 行让我们循环回到第 3 行，用新的模式和声音做同样的事情。 This is bad because we are asking for more patterns and sounds and the first patterns and sounds have not actually been run yet.这很糟糕，因为我们要求更多的模式和声音，而第一个模式和声音实际上还没有运行。 They have only been scheduled, and will only run when your code is "done".它们只是被安排的，并且只会在您的代码“完成”时运行。 The result will be that you will probably only see one of the patterns, probably the final request.结果将是您可能只会看到其中一种模式，可能是最终请求。
One way out of this nasty coding trap is to use setTimeout() and recursion in a custom function.摆脱这种讨厌的编码陷阱的一种方法是在自定义 function 中使用setTimeout()和递归。
// untested
function action(patterns, sounds, index, interval){
if (index<patterns.length){
$("#" + patterns[index]).fadeIn(100).fadeOut(100).fadeIn(100);
setTimeout(playSounds, 100, sounds[index]); // or 200 or 300 to align sound and display
setTimeout(action, interval, patterns, sounds, index+1, interval);
} else {
// code to execute when action is done
}
}
action(gamePattern, gamePattern, 0, 300);
// note: action returns immediately. If you need something to run after
action, then we should that code to the else block
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.