javascript - Javascript - 暂停直到事件完成,再进行下一个循环迭代(Simon Game )

我要尝试的是循环遍历gamePattern数组,并播放与数组每个项目中的值相关联的声音和按钮动画,但是; 我希望它暂停播放,直到动画和声音播放完毕,然后再执行循环的下一个操作并播放下一个声音和动画(按钮的淡入/淡出)。

这是我的游戏代码(请批判,我是一个新程序员,所以代码看起来很丑,写得很糟糕。 希望它不要太糟糕,以至于你无法理解)


var buttonColors = ["red","blue","green","yellow"];


var gamePattern = [];


var userClickedPattern = [];


var level = 0;



//Sets audio file name of audio file and plays audio file


function playChosenColorSound(chosenColor){


 var audioFilePath = 'sounds/' + chosenColor + '.mp3';


 var sound = new Audio(audioFilePath);


 sound.play();


}



function usersChoice(e){


 var userChosenColor = e.target.id; //Determines what button color the user pressed


 userClickedPattern.push(userChosenColor);


 playChosenColorSound(userChosenColor); //Plays sound of users chosen button color


 $("#" + userChosenColor).fadeOut(200).fadeIn(200); //Animates button user pressed with mouse.



 //Turns off users ability to click a button until new sequence is generated


 $(".btn").off("click"); 


 checkAnswer();


}



//Generates random number used to choose next button color from buttonColors array.


function nextSequence(){



 level++; //Increases level count



 $("#level-title").html(`Level: ${level}`); //Changes H1 title to show level



 //Choses random color from buttonColors array from random generated number.


 var randomChosenColor = buttonColors[Math.round(Math.random()*3)];



 gamePattern.push(randomChosenColor);



 //Fades in/out the buttons associated with the colors listed in the gamePattern array in sequence


 for (var i = 0; i < gamePattern.length; i++){


 $("#" + gamePattern[i]).fadeOut(200).fadeIn(200,playChosenColorSound(gamePattern[i]));


 }



 $(".btn").click(usersChoice); //Gives user ability to click button after gamePattern animations has played



}



function checkAnswer(){



 console.log(gamePattern);


 console.log(userClickedPattern);



 if(userClickedPattern[userClickedPattern.length - 1] === gamePattern[gamePattern.length - 1]){


 nextSequence();


 }


 else{


 wrongAnswer();


 }



}



function start(){


 nextSequence();


 $(document).off("keypress");


}



//Let's user know that their choice was wrong. 


function wrongAnswer(){


 var audioFilePath = 'sounds/wrong.mp3';


 var sound = new Audio(audioFilePath);


 sound.play();


 $("body").css("background-color","red");


 $("#level-title").html("That was the wrong answer. n Press a Key to Play Again");


 $(document).keypress(resetGame);


}



//Resets level value, gamePattern and userClickedPattern array so user can play again.


function resetGame(){


 $("body").css("background-color","#011F3F");


 gamePattern = [];


 userClickedPattern = [];


 level = 0;


 start();


}



$(document).keypress(start);



非常感谢大家,感谢你提供的反馈,提示或建议。

时间:

音频api有一个ended 事件,你可以使用它来解决Promise ,你可以对动画进行同样的操作(animationend ),我不确定你的声音和动画持续时间是否相同,或者你是否需要两者都完成,然后继续下一个循环。

可能是这样的:


generateSoundPromise(color) {


 return new Promise(resolve) {


 const audioFilePath = `sounds/${chosenColor}.mp3`;


 const sound = new Audio(audioFilePath);



 sound.addEventListener('ended', resolve);


 sound.play();


 }


}



generateAnimationPromise(color) {


 return new Promise(resolve) {


 yourElement.addEventListener('animationend', resolve);


 }


}



await Promise.all([


 generateSoundPromise('blue'),


 generateAnimationPromise('blue'),


]);



// Perform next sequence



...