This is a Higher or Lower game where the user guesses which driver has higher or lower stat depending on the difficulty. The play again button is the problem. What I want is when the user presses the play again button when the game ends it should pick 2 random drivers but not the same two drivers from the last game like my code does. I guess this is just a small problem but I’m not seeing what’s wrong.
// Define F1 driver data
const f1Drivers = [
{
name: 'Lewis Hamilton',
wins: 103,
podiums: 192,
points: 4443.5
},
{
name: 'Michael Schumacher',
wins: 91,
podiums: 155,
points: 1566
},
{
name: 'Sebastian Vettel',
wins: 53,
podiums: 122,
points: 3098
},
{
name: 'Alain Prost',
wins: 51,
podiums: 106,
points: 798.5
},
{
name: 'Ayrton Senna',
wins: 41,
podiums: 80,
points: 614
},
{
name: 'Nigel Mansell',
wins: 31,
podiums: 59,
points: 482
},
{
name: 'Jim Clark',
wins: 25,
podiums: 32,
points: 274.5
},
{
name: 'Juan Manuel Fangio',
wins: 24,
podiums: 35,
points: 277.64
},
{
name: 'Niki Lauda',
wins: 25,
podiums: 54,
points: 420.5
},
{
name: 'Jack Brabham',
wins: 14,
podiums: 31,
points: 261
},
{
name: 'Fernando Alonso',
wins: 32,
podiums: 101,
points: 2106
},
{
name: 'Max Verstappen',
wins: 37,
podiums: 80,
points: 2080.5
},
{
name: 'Nico Rosberg',
wins: 23,
podiums: 57,
points: 1594.5
},
{
name: 'Kimi Raikkonen',
wins: 21,
podiums: 103,
points: 1873
},
{
name: 'Mika Hakkinen',
wins: 20,
podiums: 51,
points: 420
},
{
name: 'Jenson Button',
wins: 15,
podiums: 50,
points: 1235
},
{
name: 'Jackie Stewart',
wins: 27,
podiums: 43,
points: 359
},
{
name: 'Damon Hill',
wins: 22,
podiums: 42,
points: 360
},
{
name: 'Felipe Massa',
wins: 11,
podiums: 41,
points: 1167
},
{
name: 'Valtteri Bottas',
wins: 10,
podiums: 67,
points: 1791
},
{
name: 'Mark Webber',
wins: 9,
podiums: 50,
points: 1235
},
{
name: 'Daniel Ricciardo',
wins: 8,
podiums: 32,
points: 1311
},
{
name: 'Charles Leclerc',
wins: 5,
podiums: 24,
points: 874
},
{
name: 'Sergio Perez',
wins: 5,
podiums: 28,
points: 1255
},
];
// Get HTML elements
const difficultySelect = document.getElementById('difficulty-select');
const startGameButton = document.querySelector('button');
const gameContainer = document.getElementById('game-container');
const higherButton = document.getElementById('higher-button');
const lowerButton = document.getElementById('lower-button');
const resultContainer = document.getElementById('result-container');
const playAgainButton = document.getElementById('play-again-button');
const frontImage = document.getElementById('bikar');
const easy = document.getElementById('easy_level');
const normal = document.getElementById('normal_level');
const hard = document.getElementById('hard_level');
const diff = document.getElementById('diff-text');
let currentDriverIndex;
let previousDriverIndex;
let currentDifficulty;
let score;
// Add event listener to the "Start Game" button
startGameButton.addEventListener('click', startGame);
function startGame() {
startGameButton.style.display = 'none'
frontImage.style.display = 'none';
easy.style.display = 'none';
normal.style.display = 'none';
hard.style.display = 'none';
difficultySelect.style.display = 'none'
diff.style.display = 'none'
currentDifficulty = difficultySelect.value;
// Show the type of data to be guessed by the user
const dataTypeElement = document.getElementById('data-type');
if (currentDifficulty === 'easy') {
dataTypeElement.textContent = 'Guess the driver with more wins';
} else if (currentDifficulty === 'normal') {
dataTypeElement.textContent = 'Guess the driver with more podiums';
} else if (currentDifficulty === 'hard') {
dataTypeElement.textContent = 'Guess the driver with more points';
}
higherButton.addEventListener('click', onHigherButtonClicked);
lowerButton.addEventListener('click', onLowerButtonClicked);
score = 0;
// Hide the result container and play again button
resultContainer.textContent = '';
playAgainButton.style.display = 'none';
// Show the first driver
showNextDriver();
}
function onHigherButtonClicked() {
checkAnswer('higher');
}
function onLowerButtonClicked() {
checkAnswer('lower');
}
let lastDriverIndex;
function showNextDriver() {
// Clear the previous driver's data
gameContainer.innerHTML = '';
// Pick two random drivers from the list
if (!currentDriverIndex) {
currentDriverIndex = getRandomDriverIndex();
}
if (!previousDriverIndex) {
previousDriverIndex = getRandomDriverIndex(currentDriverIndex);
}
// Create and append elements to display the two drivers and their data
const currentDriverElement = document.createElement('div');
const previousDriverElement = document.createElement('div');
const currentDriverDataElement = document.createElement('ul');
const previousDriverDataElement = document.createElement('ul');
const vsElement = document.createElement('div');
currentDriverElement.classList.add('driver');
previousDriverElement.classList.add('driver');
vsElement.textContent = "Vs";
currentDriverElement.innerHTML = `
<h2>${f1Drivers[currentDriverIndex].name}</h2>
<img src="driver-images/${f1Drivers[currentDriverIndex].name.toLowerCase().replace(' ', '-')}.png">
`;
previousDriverElement.innerHTML = `
<h2>${f1Drivers[previousDriverIndex].name}</h2>
<img src="driver-images/${f1Drivers[previousDriverIndex].name.toLowerCase().replace(' ', '-')}.png">
`;
currentDriverElement.appendChild(currentDriverDataElement);
previousDriverElement.appendChild(previousDriverDataElement);
gameContainer.appendChild(currentDriverElement);
gameContainer.appendChild(vsElement);
gameContainer.appendChild(previousDriverElement);
// Show the "Higher or Lower" buttons
const buttonContainer = document.getElementById('button-container');
buttonContainer.style.display = 'block';
}
function getRandomDriverIndex(excludeIndex) {
let index;
do {
index = Math.floor(Math.random() * f1Drivers.length);
} while (index === excludeIndex);
return index;
}
function checkAnswer(guess) {
const previousDriver = f1Drivers[previousDriverIndex];
const currentDriver = f1Drivers[currentDriverIndex];
let previousData, currentData;
if (currentDifficulty === 'easy') {
previousData = previousDriver.wins;
currentData = currentDriver.wins;
} else if (currentDifficulty === 'normal') {
previousData = previousDriver.podiums;
currentData = currentDriver.podiums;
} else if (currentDifficulty === 'hard') {
previousData = previousDriver.points;
currentData = currentDriver.points;
}
const answerIsCorrect =
(guess === 'higher' && currentData <= previousData) ||
(guess === 'lower' && currentData >= previousData);
if (answerIsCorrect) {
score++;
currentDriverIndex = previousDriverIndex;
previousDriverIndex = null;
showNextDriver();
} else {
endGame();
}
}
function endGame() {
// Remove event listeners from the buttons
higherButton.removeEventListener('click', onHigherButtonClicked);
lowerButton.removeEventListener('click', onLowerButtonClicked);
let message = "";
if (score <= 1) {
const messages = [
"You may need to get a new pit crew - they're clearly not feeding you the right information!",
"That answer is a bit like a car stuck in the gravel trap - not quite what we were hoping for!",
"Looks like you need to spend less time watching the races and more time studying the history books!",
"Looks like you need some more practice laps before you get the hang of this."
];
const randomIndex = Math.floor(Math.random() * messages.length);
message = `${messages[randomIndex]} ${message}`;
} else if (score <= 4) {
const messages = [
"Let's just say, if you were driving in the F1, you'd be lapped by now.",
"Very Bad - You might want to stick to bumper cars!",
"Don't worry, even the best drivers have their off days. Maybe you'll do better next time.",
"Well, that answer was definitely not pole position material."
];
const randomIndex = Math.floor(Math.random() * messages.length);
message = `${messages[randomIndex]} ${message}`;
} else if (score <= 10) {
const messages = [
"You're like a midfield driver - solid, but not quite podium material.",
"You're doing okay, but maybe you should watch a few more races before playing again.",
"You're not exactly setting the track on fire, but you're not stalling out either.",
"Not bad, not bad at all! You're definitely on the right track to becoming an F1 expert."
];
const randomIndex = Math.floor(Math.random() * messages.length);
message = `${messages[randomIndex]} ${message}`;
} else {
const messages = [
"I think we need to do a doping test on you because that score is unreal!",
"Congratulations! You just set a new lap record for F1 trivia. Absolutely amazing!",
"Wow, you're like the Lewis Hamilton of F1 trivia! Impressive!",
"Hold on, let me check if you're not secretly connected to the FIA. Your knowledge is on another level!"
];
const randomIndex = Math.floor(Math.random() * messages.length);
message = `${messages[randomIndex]} ${message}`;
}
// Display the user's score and message
resultContainer.textContent = `Game over! You got ${score} correct. ${message}`;
playAgainButton.style.display = 'block';
playAgainButton.addEventListener('click', startGame);
}