我用Javascript创建了一个简单的Clickgame,我想知道,当您按“开始”时,会出现一个弹出窗口,您可以在其中选择5、10和15秒。我如何简单地创建它?同样重要的是,您选择的每一秒都会显示Highscore。就像您选择5秒时一样:5秒的最高分是:10次点击!当您选择10秒时:10秒的最高分是:20次点击!
let klick = 0;
let timerId = 0;
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeOut();
$("#welcome").fadeOut();
$("#time").fadeIn(900);
$("#clicker").fadeIn();
var display = document.querySelector('#time'); //referenz auf das Html attribut Time zum anzeigen.
var dauer = 5;
startTimer(dauer, display); //legt die zeit fest, und dass die Funktion gestartet wird.
})
function startTimer(dauer, display) {
let timer = dauer;
let sekunden;
timerId = setInterval(function() {
sekunden = parseInt(timer); //parseInt gibt eine ganze Zahl zurück
display.textContent = sekunden; // zeigt sekunden-variable
--timer; //setzt den timer immer einen herab
if (timer < 0.00) {
timer = dauer;
$("#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 ist ' + highScore(klick));
klick = 0
clearInterval(timerId);
} //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet
}, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
};
$("#clicker").click(function() {
let zufall = Math.floor(Math.random() * 45) + 1 //setzt eine zufällige höhe für den clicker
klick = klick + 1 //setzt den zähler beim klicken eins hoch
$("#clicker").css("margin-top", zufall + "%");
$("#clicker").css("margin-left", zufall + 45 + "%");
})
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Das Spiel startet, indem du dir eine Zeit aussuchst!</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>
答案 0 :(得分:1)
...一个弹出窗口,您可以在其中选择5、10和15秒之间
const fiveOrTenOrFifteen = () => (s = '' + prompt ('5, 10 or 15')) && s.match (/5|10|15/)
? s
: s !== 'null' && fiveOrTenOrFifteen ()
console.log (fiveOrTenOrFifteen () || 'Canceled')