-1
我正在嘗試創建一個SimonSays遊戲，但我遇到了inputCheck（）函數的問題。SimonSays序列總是不正確的，即使userChoice匹配
當用戶按下按鈕時，變量userChoice等於用戶按下的任何顏色。然後調用inputCheck函數。問題是，即使用戶按下了正確的顏色，它也總是會提醒您丟失並結束遊戲。我添加了console.logs，用於在控制檯中記錄用戶輸入和當前序列步驟。
任何幫助表示讚賞。謝謝！
var gameRunning = false;
var userClick = "";
var correctSequence = true;
var sequence = [];
var sequenceCountDisplay = document.getElementById("sequenceCountDisplay");
var currentIndex = 0;
var startButton = document.getElementById("startButton");
startButton.addEventListener("click", startGame);
var buttonGreen = document.getElementById("buttonGreen");
buttonGreen.addEventListener("click", buttonPressGreen);
var buttonRed = document.getElementById("buttonRed");
buttonRed.addEventListener("click", buttonPressRed);
var buttonBlue = document.getElementById("buttonBlue");
buttonBlue.addEventListener("click", buttonPressBlue);
var buttonYellow = document.getElementById("buttonYellow");
buttonYellow.addEventListener("click", buttonPressYellow);
var greenSound = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var redSound = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var yellowSound = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var blueSound = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
function buttonPressGreen(){
greenSound.play();
userClick = "green";
if (gameRunning) {
\t inputCheck();
}
console.log(userClick);
console.log(sequence[currentIndex]);
}
function buttonPressRed(){
redSound.play();
userClick = "red";
if (gameRunning) {
\t inputCheck();
}
console.log(userClick);
console.log(sequence[currentIndex]);
}
function buttonPressYellow(){
yellowSound.play();
userClick = "yellow";
if (gameRunning) {
\t inputCheck();
}
console.log(userClick);
console.log(sequence[currentIndex]);
}
function buttonPressBlue(){
blueSound.play();
userClick = "blue";
if (gameRunning) {
\t inputCheck();
}
console.log(userClick);
console.log(sequence[currentIndex]);
}
function generateSequenceStep() {
\t var randomNumber = Math.floor(Math.random() * 4);
\t
\t switch(randomNumber){
\t \t case 0: sequence.push("green");
\t \t \t break;
\t \t case 1: sequence.push("red");
\t \t \t break;
\t \t case 2: sequence.push("yellow");
\t \t \t break;
\t \t case 3: sequence.push("blue");
\t \t \t break;
\t }
}
function playBackSequence() {
\t currentIndex = 0;
\t setInterval(function(){
\t \t if (sequence[currentIndex] == "green") {
\t \t \t buttonGreen.style.opacity = "0.4";
\t \t \t greenSound.play();
\t \t }else if(sequence[currentIndex] == "red"){
\t \t \t buttonRed.style.opacity = "0.4";
\t \t \t redSound.play();
\t \t }else if(sequence[currentIndex] == "yellow"){
\t \t \t buttonYellow.style.opacity = "0.4";
\t \t \t yellowSound.play();
\t \t }else if(sequence[currentIndex] == "blue"){
\t \t \t buttonBlue.style.opacity = "0.4";
\t \t \t blueSound.play();
\t \t }
\t \t currentIndex++;
\t \t setTimeout(function(){
\t \t \t buttonGreen.style.opacity = "1";
\t \t \t buttonRed.style.opacity = "1";
\t \t \t buttonYellow.style.opacity = "1";
\t \t \t buttonBlue.style.opacity = "1";
\t \t }, 500);
\t }, 1000);
\t currentIndex = 0;
}
function inputCheck(){
\t if (userClick == sequence[currentIndex]) {
\t \t currentIndex++;
\t }else{
\t \t correctSequence = false;
\t }
\t if (correctSequence === false) {
\t \t gameOver();
\t }else if (currentIndex >= sequence.length) {
\t \t nextRound();
\t }
}
function gameOver(){
\t if (!correctSequence) {
\t \t alert("Game Over! You were able to remember " + sequence.length + " steps!");
\t \t currentIndex = 0;
\t \t gameRunning = false;
\t }
}
function startGame(){
\t gameRunning = true;
\t currentIndex = 0;
\t sequence = [];
\t correctSequence = true;
\t generateSequenceStep();
\t generateSequenceStep();
\t sequenceCountDisplay.innerHTML = sequence.length;
\t playBackSequence();
\t
}
function nextRound(){
\t correctSequence = true;
\t currentIndex = 0;
\t generateSequenceStep();
\t sequenceCountDisplay.innerHTML = sequence.length;
\t playBackSequence();
}/*General ----------------------------------------------*/
body {}
#pageContainer {
display: block;
position: relative;
text-align: center;
margin: auto;
height: 100%;
width: 100%;
}
/*------------------------------------------------------*/
/*Button Styles -----------------------------------------*/
#buttons {
max-width: 720px;
width: 100%;
height: 100%;
margin: auto;
z-index: -1;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 3px;
}
#buttonYellow {
fill: #fcee21;
}
#buttonYellow:hover {
fill: #fcf14f;
\t stroke-width: 4px;
}
#buttonYellow:active {
fill: #c9bc03;
\t stroke-width: 3px;
}
#buttonGreen {
fill: #00dc00;
}
#buttonGreen:hover {
fill: #1aff1a;
\t stroke-width: 4px;
}
#buttonGreen:active {
fill: #008000;
\t stroke-width: 3px;
}
#buttonRed {
fill: red;
}
#buttonRed:hover {
fill: #ff4d4d;
\t stroke-width: 4px;
}
#buttonRed:active {
fill: #990000;
\t stroke-width: 3px;
}
#buttonBlue {
fill: blue;
}
#buttonBlue:hover {
fill: #3333ff;
\t stroke-width: 4px;
}
#buttonBlue:active {
fill: #000099;
\t stroke-width: 3px;
}
/*------------------------------------------------------*/
/*Center Control --------------------------*/
#center {
position: relative;
top: -500px;
left: -35px;
margin: auto;
width: 100%;
text-align: center;
font-size: 35px;
max-width: 200px;
}
#sequenceCountDisplay {
margin: 20px;
font-size: 45px;
}
#startButton {
margin: 20px;
font-size: 20px;
}<body>
\t \t
\t \t <div id="pageContainer">
\t \t \t <svg id="buttons" viewBox="0 0 500 500"><title>Buttons</title>
\t \t \t \t <path id="buttonYellow" d="M56.08,238.5h46.85c5.93,0,7.28,1.15,8.19,6.92,7.53,47.9,43.75,84,91.68,91.46,5.25.81,6.66,2.32,6.66,7.51q0,47.54-.06,95.09c0,5.33-1.16,6.41-6.63,6A215.32,215.32,0,0,1,96.47,408.82,213.45,213.45,0,0,1,48,364.3c-23.49-29.56-38.7-62.89-44.3-100.39-.91-6.09-1.61-12.21-2.13-18.35-.42-5,1.67-7,6.75-7q23.89,0,47.77,0Z"/>
\t \t \t \t <path id="buttonGreen" d="M56.08,208.57h46.85c5.93,0,7.28-1.15,8.19-6.92,7.53-47.9,43.75-84,91.68-91.46,5.25-.81,6.66-2.32,6.66-7.51q0-47.54-.06-95.09c0-5.33-1.16-6.41-6.63-6A215.32,215.32,0,0,0,96.47,38.25,213.45,213.45,0,0,0,48,82.77c-23.49,29.56-38.7,62.89-44.3,100.39-.91,6.09-1.61,12.21-2.13,18.35-.42,5,1.67,7,6.75,7q23.89,0,47.77,0Z"/>
\t \t \t \t <path id="buttonRed" d="M394.08,208.57H347.23c-5.93,0-7.28-1.15-8.19-6.92-7.53-47.9-43.75-84-91.68-91.46-5.25-.81-6.66-2.32-6.66-7.51q0-47.54.06-95.09c0-5.33,1.16-6.41,6.63-6A215.32,215.32,0,0,1,353.69,38.25a213.45,213.45,0,0,1,48.5,44.52c23.49,29.56,38.7,62.89,44.3,100.39.91,6.09,1.61,12.21,2.13,18.35.42,5-1.67,7-6.75,7q-23.89,0-47.77,0Z"/>
\t \t \t \t <path id="buttonBlue" d="M394.08,238.5H347.23c-5.93,0-7.28,1.15-8.19,6.92-7.53,47.9-43.75,84-91.68,91.46-5.25.81-6.66,2.32-6.66,7.51q0,47.54.06,95.09c0,5.33,1.16,6.41,6.63,6a215.32,215.32,0,0,0,106.29-36.68,213.45,213.45,0,0,0,48.5-44.52c23.49-29.56,38.7-62.89,44.3-100.39.91-6.09,1.61-12.21,2.13-18.35.42-5-1.67-7-6.75-7q-23.89,0-47.77,0Z"/>
\t \t </svg>
\t \t <div id="center">
\t \t \t <h2 id="sequenceCountDisplay">0</h2>
\t \t \t <button id="startButton" type="button">Start New Game</button>
\t \t </div>
\t </div>
\t <script src="scripts.js"></script>
</body>
謝謝你，該訣竅！ 你有一個答案，爲什麼'currentIndex'沒有正確重置？ 我認爲'currentIndex = 0;'會在'playBackSequence（）'函數結束時做到這一點？ – SleepySon
這是因爲函數playBackSequence（）完成了執行（並且currentIndex被設置爲0），然後'setInterval（function（）{'內部的函數自行運行，之後currentIndex被改變，在這種情況下它是異步的 – webbm
啊哈，現在我明白了。謝謝你！ – SleepySon