我正在制作一款游戏，试图根据他所驾驶的车队来猜测车手。我想让用户看到他猜了多少，他猜了多少。例如，如果司机驾驶了 3 个团队，则用户只能猜测 3 次，然后当用户第一次猜测时，占位符应该是“猜 1 个，共 3 个”，如果用户猜对了游戏结束，它应该显示所有的司机的职业。但是，如果用户猜错了，那么下一个占位符应该是“猜三选二”等等。
html:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="guess_driver_path.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<head>
<title>formula1.pro</title>
<style>
.home {
color: white; /* Change the color to black */
text-decoration: none; /* Remove the underline */
}
body {
/* background-image: url("background.png"); */
background-color: #adadad;
}
.container {
margin: 50px auto;
max-width: 800px;
padding: 100px;
background-color: #f2f2f2;
border-radius: 10px;
}
.career {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
.guess[type="text"], textarea {
width: 100%;
padding:15px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
.guess {
margin-top: 20px;
}
.guess {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}
#guess_count {
margin-bottom: 10px;
}
header h1 {
margin: 0;
}
header button {
background-color: white;
color: #000;
border: none;
padding: 10px 10px;
border-radius: 5px;
cursor: pointer;
}
header button:hover {
background-color: #f5f5f5
}
</style>
</head>
<body>
<header>
<div class="wrapper">
<h1>
<a style="justify-content: left; font-size: 2em;" class="home" href="index.html">
Formula1
</a>
</h1>
<div class="menu">
<div class="nav-menu">
<a href="higher_or_lower.html" class="menu-link">Higher or Lower</a>
<a href="guess_driver_path.html" class="menu-link">Guess Drivers Path</a>
<a href="rankings.html" class="menu-link">Standings</a>
<a href="chat.html" class="menu-link">Chat</a>
</div>
<img src="rotate.png" class="car" />
<div class="follow">
≡
</div>
</div>
</div>
</header>
<div class="container">
<h1 class="title">Guess the driver's career</h1>
<form id="guess_driver_path">
<div class="h3">Drivers Career:</div>
<div class="career">
</div>
<div class="gues">
<label style="font-size: 2em;" for="guess">Guess the driver:</label>
<textarea id="guess" placeholder="Guess x of x" name="guess" rows="1" required></textarea>
</div>
</form>
</div>
<script src="guess_driver_path.js"></script>
<div class="contact">
<h1><a id="contact" href="mailto:@gmail.com">Contact</a></h1>
<h1><a id="privacy" href="...">Privacy</a></h1>
</div>
</body>
</html>
js:
// Define the list of drivers with their respective career paths
const drivers = [
{
name: "Sebastian Vettel",
aliases: ["sebastian","vettel"],
career: [
{ team: "Red Bull", years: "2009-2014" },
{ team: "Ferrari", years: "2015-2020" },
{ team: "Aston Martin", years: "2021-2022" }
],
maxGuesses: 3
},
{
name: "Lewis Hamilton",
aliases: ["lewis","hamilton"],
career: [
{ team: "McLaren", years: "2007-2012" },
{ team: "Mercedes", years: "2013-" }
],
maxGuesses: 2
},
{
name: "Max Verstappen",
aliases: ["max","verstappen"],
career: [
{ team: "Toro Rosso", years: "2015" },
{ team: "Red Bull", years: "2016-" }
],
maxGuesses: 2
},
{
name: "Michael Schumacher",
aliases: ["michael","schumacher"],
career: [
{ team: "Jordan", years: "1991" },
{ team: "Benetton", years: "1991-1995" },
{ team: "Ferrari", years: "1996-2006" },
{ team: "Mercedes", years: "2010-2012" }
],
maxGuesses: 4
},
// Add more drivers here
];
// Get the elements from the HTML document
const form = document.querySelector("#guess_driver_path");
const guessInput = form.querySelector("#guess");
const careerDiv = document.querySelector(".career");
const textArea = document.querySelector("#guess");
// Generate a random driver for the user to guess
let currentDriverIndex = Math.floor(Math.random() * drivers.length);
let currentDriver = drivers[currentDriverIndex];
let currentTeamIndex = 0;
// Display the first team for the current driver
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
// Handle the form submission
form.addEventListener("submit", (event) => {
event.preventDefault();
const guess = guessInput.value.trim();
guessInput.value = "";
// Check if the guess matches the current driver
if (guess.toLowerCase() === currentDriver.name.toLowerCase()) {
alert(`That's correct! The driver is ${currentDriver.name}`);
// Generate a new random driver for the user to guess
currentDriverIndex = Math.floor(Math.random() * drivers.length);
currentDriver = drivers[currentDriverIndex];
currentTeamIndex = 0;
careerDiv.innerHTML = ""; // Clear the contents of the careerDiv element
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
} else {
alert(`Sorry, that's not correct. Keep guessing!`);
// Display the next team for the current driver, if there is one
if (currentTeamIndex < currentDriver.career.length - 1) {
currentTeamIndex++;
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
}
}
});
guessInput.addEventListener("keyup", event => {
if (event.keyCode === 13) {
event.preventDefault();
form.dispatchEvent(new Event("submit"));
}
});
我在第二个变量列表中添加了两个变量：``guessMax'' 由驾驶员的职业数量决定，以及 guessesNumber - 当前的猜测数，在猜测之前为 1。
当然最好一开始就在HTML中改正这个，把x写成1，或者把HTML中的标题完全去掉，让JS写。
这就是（相关部分）代码现在的样子：
let currentDriverIndex = Math.floor(Math.random() * drivers.length);
let currentDriver = drivers[currentDriverIndex];
let currentTeamIndex = 0;
//The number of possible guesses based on the number of driver careers
let guessesMax = currentDriver.career.length;
let guessesNumber = 1;
// a function that updates the guess number.
function UpdatedSveralGuesses(){
guessInput.placeholder = `Guess ${guessesNumber} of ${guessesMax}`;
}
// Display the first team for the current driver
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
UpdatedSveralGuesses();
// Handle the form submission
form.addEventListener("submit", (event) => {
event.preventDefault();
const guess = guessInput.value.trim();
guessInput.value = "";
// Check if the guess matches the current driver
if (guess.toLowerCase() === currentDriver.name.toLowerCase()) {
alert(`That's correct! The driver is ${currentDriver.name}`);
// Generate a new random driver for the user to guess
currentDriverIndex = Math.floor(Math.random() * drivers.length);
currentDriver = drivers[currentDriverIndex];
currentTeamIndex = 0;
careerDiv.innerHTML = ""; // Clear the contents of the careerDiv element
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
} else {
alert(`Sorry, that's not correct. Keep guessing!`);
//Update the number of guesses
guessesNumber++;
UpdatedSveralGuesses();
// Display the next team for the current driver, if there is one
if (currentTeamIndex < currentDriver.career.length - 1) {
currentTeamIndex++;
careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
}
}
});
guessInput.addEventListener("keyup", event => {
if (event.keyCode === 13) {
event.preventDefault();
form.dispatchEvent(new Event("submit"));
}
});
请注意，您需要改进代码中的更多内容。首先，你必须保证用户在超过最大猜测次数后不能继续猜测。
其次，您需要向用户添加一条消息，该消息将在超过最大值时显示。
为了方便大家工作，把代码整理好。例如，你写了两次加载新驱动的命令和关于驱动的提示（
careerDiv.innerHTML