我要创建一个点击游戏。它工作得很好(感谢几个人的帮助)。为了完成它，我想添加另一个功能。
我希望用户在单击“开始”时选择是要播放 5 秒、10 秒还是 15 秒。其他秒数应该省略，否则高分太复杂。
然后，高分功能的工作方式应该是在最后显示 5、10 或 15 秒的高分，具体取决于玩家的选择。
内附HTML、JavaScript和样式表代码，附5秒打分功能。
HTML
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>
CSS
body
{
width: 100%;
height:100%;
margin: 0 auto;
padding: 0;
background-color:black;
display:flex;
flex-direction:column;
}
#welcome {
font-size:20px;
margin:auto;
width:400px;
height:50px;
color:white;
border-style:solid;
border-color:white;
text-align:center;
margin-top:5%;
}
#start {
color:white;
background-color:black;
margin:auto;
margin-top:0%;
border-style:solid;
border-color:white;
text-align:center;
font-size:40px;
width:100px;
height:80px;
transition: transform 0.7s;
}
#start:hover {
background-color:white;
color:black;
cursor:pointer;
transform: scale(1, -1);
}
#time{
margin-top:5%;
margin-left:5%;
color:white;
font-size:50px;
display:none;
}
#clicker{
color:white;
background-color:black;
margin:auto;
margin-top:10%;
border-style:solid;
border-color:white;
text-align:center;
font-size:40px;
width:200px;
height:100px;
display:none;
position:absolute;
margin-left:35%;
}
#clicker:hover {
cursor:pointer;
}
JavaScript
let klick = 0;
display = document.querySelector('#time');
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeOut(); //Der Startbutton geht weg
$("#welcome").fadeOut(); // Das Willkommensschild geht weg
$("#time").fadeIn(900); //Timer kommt
$("#clicker").animate({
height: 'toggle'
}); //clicker wird gestartet
var dauer = 5;
startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.
})
function startTimer(dauer) {
let timer = 5;
runTimer();
zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
function runTimer(){
display.textContent = parseInt(timer); // zeigt sekunden-variable
--timer; //setzt den timer immer einen herab
if (timer < 0.00) {
timer = 5;
console.log(timer);
$("#start").fadeIn();
$("#welcome").fadeIn();
$("#time").fadeOut();
$("#clicker").fadeOut();
$("#clicker").css("margin-top", "10%");
$("#clicker").css("margin-left", "50%");
alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
alert('High Score is ' + highScore(klick));
klick = 0
console.log(timer);
clearInterval(zeit);
} //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
}
};
$("#clicker").click(function() {
let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert
klick = klick + 1 //setzt den zähler beim klicken eins hoch
if (klick % 2 == 0) {
$("#clicker").animate({
opacity: '0.3',
left: zufall + "%",
top: zufal + "%"
}, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
} else {
$("#clicker").animate({
opacity: '1.0',
left: zufall + "%",
top: zufal + "%"
}, "fast")
}
});
function highScore(score) {
var saved = 0;
saved = parseFloat(localStorage.getItem('highScore')) || 0;
score = parseFloat(score) || 0;
if (score > saved) {
saved = score;
localStorage.setItem('highScore', score);
}
return saved;
}
最佳答案
该解决方案实际上在我的系统上尝试并运行良好。Bellow 是我更改的 html 和 js
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<select id="gt" style="position:fixed;right:300px;top:65px;height:40px;width:100px;">
<option value="5">five second</option>
<option value="10">Ten second</option>
<option value="15">Finteen second</option>
</select>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>let klick = 0;
display = document.querySelector('#time');
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeOut(); //Der Startbutton geht weg
$("#welcome").fadeOut(); // Das Willkommensschild geht weg
$("#time").fadeIn(900); //Timer kommt
$("#clicker").animate({
height: 'toggle'
}); //clicker wird gestartet
var d = $("#gt option:selected").val();
var dauer = parseInt(d);
startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.
})
function startTimer(dauer) {
let timer = parseInt(dauer);
runTimer();
zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
function runTimer(){
display.textContent = parseInt(timer); // zeigt sekunden-variable
--timer; //setzt den timer immer einen herab
if (timer < 0.00) {
timer = 5;
console.log(timer);
$("#start").fadeIn();
$("#welcome").fadeIn();
$("#time").fadeOut();
$("#clicker").fadeOut();
$("#clicker").css("margin-top", "10%");
$("#clicker").css("margin-left", "50%");
alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
alert('High Score is ' + highScore(klick));
klick = 0
console.log(timer);
clearInterval(zeit);
} //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
}
};
$("#clicker").click(function() {
let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert
klick = klick + 1 //setzt den zähler beim klicken eins hoch
if (klick % 2 == 0) {
$("#clicker").animate({
opacity: '0.3',
left: zufall + "%",
top: zufal + "%"
}, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
} else {
$("#clicker").animate({
opacity: '1.0',
left: zufall + "%",
top: zufal + "%"
}, "fast")
}
});
function highScore(score) {
var saved = 0;
saved = parseFloat(localStorage.getItem('highScore')) || 0;
score = parseFloat(score) || 0;
if (score > saved) {
saved = score;
localStorage.setItem('highScore', score);
}
return saved;
}关于javascript - 如何插入允许用户在开始时选择秒数的功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53350222/