Как заставить работать функцию gameOver в Javascript jQuery? ⇐ Jquery

[Anonymous]

Я новичок в JS и работаю над проектом, но у меня по-прежнему возникают проблемы с функцией, которая сбрасывает игру в случае неудачи. Если вы нажмете не ту кнопку в игре на запоминание, она будет сброшена, но затем игра сломается.
HTML и CSS

Код: Выделить всё

Simon





Press Any Key to Start

Код: Выделить всё

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;
}

JS

Код: Выделить всё

//varibles
const buttonColors = ['red', 'blue', 'green', 'yellow'];
let gamePattern = [];

let userClickedPattern = [];
let userChosenColor;

let level = 0;
let started = false;

function playSound(name) {
let sound = new Audio('./sounds/'+name+'.mp3');
sound.play();
}

function gameOver() {
playSound('wrong');
setTimeout(function () {
$('body').removeClass('game-over');
}, 500);
$('#level-title').text('Game Over, Press Any Key to Restart');
$('body').addClass('game-over');

started = false;
level = 0;
gamePattern = [];
}

//get a sequence
function nextSequence() {
userClickedPattern = [];
level++;
$('#level-title').text('Level '+level);

let randomNumber = Math.floor(Math.random() * 4);
let randomColor = buttonColors[randomNumber];
gamePattern.push(randomColor);

for (let i = 0; i < gamePattern.length; i++) {
setTimeout(function () {
$('#'+gamePattern[i]).animate({opacity: 0.25}, 100);
setTimeout(function () {
$('#'+gamePattern[i]).animate({opacity: 1}, 100);
}, 25);

playSound(gamePattern[i]);
}, (500*(i+1)));
}
}

//get the user sequence stuff
function animatePress(currentColor) {
setTimeout(function () {
$('#'+currentColor).removeClass('pressed');
}, 100);
$('#'+currentColor).addClass('pressed');
}

function userSequence() {
$('.btn').click(function () {
userChosenColor = $(this).attr('id');
userClickedPattern.push(userChosenColor);

animatePress(userChosenColor);
playSound(userChosenColor);

checkAnswer(userClickedPattern.length);
});
}

//check if answer is right or wrong
function checkAnswer(currentLevel) {
// let rightCounter = 0;
// if (gamePattern.length == currentLevel) {
//   for (let i = 0; i < gamePattern.length;  i++) {
//     if (gamePattern[i] == userClickedPattern[i]) {
//       rightCounter++;
//     } else {gameOver();}
//   }
//   if (rightCounter == gamePattern.length) {
//     setTimeout(function () {
//       userClickedPattern = [];
//       nextSequence();
//     }, 500);
//   } else {gameOver();}
// }
if (gamePattern[currentLevel-1] == userClickedPattern[currentLevel-1]) {
if (gamePattern.length == currentLevel) {
setTimeout(function () {
nextSequence();
}, 500);
}
}
else {
gameOver();
}
}

//start game
function startGame() {
nextSequence();
userSequence();
}

//start game
$('body').keydown(function () {
if (started == false) {startGame(); started = true;}
});

Я задавал вопросы в ChatGPT, но он всегда давал мне сложные сведения, о которых я не знал, что он делает, и мне хотелось бы понять свой код, поэтому, если я когда-нибудь столкнусь с подобной проблемой , я могу это решить. При нажатии не той кнопки (элемента div) игра завершается, но в глючной версии. Каждый раз, когда вы на что-то нажимаете, оно всегда будет неправильным, даже если оно правильное. Я бы хотел, чтобы он действовал нормально.

Подробнее здесь: https://stackoverflow.com/questions/791 ... query-work