即使userChoice匹配，SimonSays序列也始终不正确

时间：2017-06-05 18:15:17

标签： javascript arrays

我正在尝试创建一个SimonSays游戏，但我遇到了inputCheck（） - 函数的问题。

当用户按下按钮时，变量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) {
  	inputCheck();
  }
  console.log(userClick);
  console.log(sequence[currentIndex]);
}
function buttonPressRed(){
  redSound.play();
  userClick = "red";
  if (gameRunning) {
  	inputCheck();
  }
  console.log(userClick);
  console.log(sequence[currentIndex]);
}
function buttonPressYellow(){
  yellowSound.play();
  userClick = "yellow";
  if (gameRunning) {
  	inputCheck();
  }
  console.log(userClick);
  console.log(sequence[currentIndex]);
}
function buttonPressBlue(){
  blueSound.play();
  userClick = "blue";
  if (gameRunning) {
  	inputCheck();
  }
  console.log(userClick);
  console.log(sequence[currentIndex]);
}


function generateSequenceStep() {
	var randomNumber = Math.floor(Math.random() * 4);
	
	switch(randomNumber){
		case 0: sequence.push("green");
			break;
		case 1: sequence.push("red");
			break;
		case 2: sequence.push("yellow");
			break;
		case 3: sequence.push("blue");
			break;
	}
}

function playBackSequence() {
	currentIndex = 0;
	setInterval(function(){
		if (sequence[currentIndex] == "green") {
			buttonGreen.style.opacity = "0.4";
			greenSound.play();
		}else if(sequence[currentIndex] == "red"){
			buttonRed.style.opacity = "0.4";
			redSound.play();
		}else if(sequence[currentIndex] == "yellow"){
			buttonYellow.style.opacity = "0.4";
			yellowSound.play();
		}else if(sequence[currentIndex] == "blue"){
			buttonBlue.style.opacity = "0.4";
			blueSound.play();
		}
		currentIndex++;
		setTimeout(function(){
			buttonGreen.style.opacity = "1";
			buttonRed.style.opacity = "1";
			buttonYellow.style.opacity = "1";
			buttonBlue.style.opacity = "1";
		}, 500);
	}, 1000);
	currentIndex = 0;
}

function inputCheck(){
	if (userClick == sequence[currentIndex]) {
		currentIndex++;
	}else{
		correctSequence = false;
	}

	if (correctSequence === false) {
		gameOver();
	}else if (currentIndex >= sequence.length) {
		nextRound();
	}
}

function gameOver(){
	if (!correctSequence) {
		alert("Game Over! You were able to remember " + sequence.length + " steps!");
		currentIndex = 0;
		gameRunning = false;
	}
}

function startGame(){
	gameRunning = true;
	currentIndex = 0;
	sequence = [];
	correctSequence = true;
	generateSequenceStep();
	generateSequenceStep();
	sequenceCountDisplay.innerHTML = sequence.length;
	playBackSequence();

	
}

function nextRound(){
	correctSequence = true;
	currentIndex = 0;
	generateSequenceStep();
	sequenceCountDisplay.innerHTML = sequence.length;
	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;
	stroke-width: 4px;
}
#buttonYellow:active {
 fill: #c9bc03;
	stroke-width: 3px;
}

#buttonGreen {
 fill: #00dc00;
}
#buttonGreen:hover {
 fill: #1aff1a;
	stroke-width: 4px;
}
#buttonGreen:active {
 fill: #008000;
	stroke-width: 3px;
}

#buttonRed {
 fill: red;
}
#buttonRed:hover {
 fill: #ff4d4d;
	stroke-width: 4px;
}
#buttonRed:active {
 fill: #990000;
	stroke-width: 3px;
}

#buttonBlue {
 fill: blue;
}
#buttonBlue:hover {
 fill: #3333ff;
	stroke-width: 4px;
}
#buttonBlue:active {
 fill: #000099;
	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>
		
		<div id="pageContainer">
			<svg id="buttons" viewBox="0 0 500 500"><title>Buttons</title>
				<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"/>
				<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"/>
				<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"/>
				<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"/>
		</svg>
		<div id="center">
			<h2 id="sequenceCountDisplay">0</h2>
			<button id="startButton" type="button">Start New Game</button>
		</div>
	</div>

	<script src="scripts.js"></script>
</body>

1 个答案:

答案 0 :(得分：0)

在currentIndex

之后，

playBackSequence()未正确设置为0

更改函数以使用临时变量：

function playBackSequence() {
    tmpCurrentIndex = currentIndex;
    setInterval(function(){
        if (sequence[tmpCurrentIndex] == "green") {
            buttonGreen.style.opacity = "0.4";
            greenSound.play();
        }else if(sequence[tmpCurrentIndex] == "red"){
            buttonRed.style.opacity = "0.4";
            redSound.play();
        }else if(sequence[tmpCurrentIndex] == "yellow"){
            buttonYellow.style.opacity = "0.4";
            yellowSound.play();
        }else if(sequence[tmpCurrentIndex] == "blue"){
            buttonBlue.style.opacity = "0.4";
            blueSound.play();
        }
        tmpCurrentIndex++;
        setTimeout(function(){
            buttonGreen.style.opacity = "1";
            buttonRed.style.opacity = "1";
            buttonYellow.style.opacity = "1";
            buttonBlue.style.opacity = "1";
        }, 500);
    }, 1000);
    currentIndex = 0;
}
相关问题
最新问题