我开发了一个小型点击游戏，一旦达到高分就会显示烟花表演。在这方面，我现在有两个问题：
如果游戏在例如 5 秒后结束，则会显示一条警报，说明在该时间内进行了多少次点击。如果高分被破解，则必须在烟花开始前确认警报。那么如何启动与警报平行的烟花呢？
我怎样才能停止烟花？一旦我开始新游戏，它就不应该再显示了。使用我目前的编码，一旦高分被破解，它将永久显示烟花。
在这里你可以看到代码：
let klick = 0;
display = document.querySelector('#time');
$("#start").click(function() { //clickfunktion beim starten.
$("#start").fadeToggle(); //Der Startbutton geht weg
$("#welcome").fadeToggle(); // Das Willkommensschild geht weg
$("#zeitauswahl").fadeToggle(); //Die Auswahl der Sekunden verschwindet
$("#time").fadeToggle(900); //Timer kommt
$("#clicker").animate({
height: 'toggle' //inverse aktion...keine height --> klappt auf // aufgeklappt ---> macht height weg
}); //clicker wird gestartet
var d = $("#zeitauswahl option:selected").val(); //referenziert auf zeitauswahl und option
var dauer = parseInt(d); //verwandelt Dauer in einen Int
startTimer(dauer); //übergibt die variable dauer, und die Funktion wird gestartet.
})
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); //debug info
$("#start").fadeToggle();
$("#welcome").fadeToggle();
$("#zeitauswahl").fadeToggle();
$("#time").fadeToggle();
$("#clicker").fadeToggle();
$("#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)); // zeigt den HighScore
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() * 400) -200 //setzt eine zufällige höhe für den clicker
let zufal = Math.floor(Math.random() * 450) //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', //macht den klicker leicht durchsichtig
left: zufall + "px",
top: zufal + "px"
}, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
} else {
$("#clicker").animate({
opacity: '1.0', //macht den Klicker sichtbar
left: zufall + "px",
top: zufal + "px"
}, "fast")
}
});
function highScore(score) {
var saved = 0;
saved = parseFloat(localStorage.getItem('highScore')) || 0; //nimmt zeichenketten Argument (highscore) und gibt Float. highscore oder 0
score = parseFloat(score) || 0;
document.getElementById("highscore").innerHTML = saved;
if (score > saved) {
saved = score; //speichert neuen Highscore, wenn der score größer ist als die gespeicherte variable
localStorage.setItem('highScore', score);//speichert highscore im browser
var rnd = Math.random,
flr = Math.floor;
let canvas = document.createElement('canvas');
document.getElementById('firework').appendChild(canvas);
canvas.style.position = 'relative';
canvas.style.width = '100%';
canvas.style.height = '300px';
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
let ctx = canvas.getContext('2d');
function rndNum(num) {
return rnd() * num + 1;
}
function vector(x, y) {
this.x = x;
this.y = y;
this.add = function(vec2) {
this.x = this.x + vec2.x;
this.y = this.y + vec2.y;
}
}
function particle(pos, vel) {
this.pos = new vector(pos.x, pos.y);
this.vel = vel;
this.dead = false;
this.start = 0;
this.update = function(time) {
let timeSpan = time - this.start;
if (timeSpan > 500) {
this.dead = true;
}
if (!this.dead) {
this.pos.add(this.vel);
this.vel.y = this.vel.y + gravity;
}
};
this.draw = function() {
if (!this.dead) {
drawDot(this.pos.x, this.pos.y, 1);
}
}
}
function firework(x, y) {
this.pos = new vector(x, y);
this.vel = new vector(0, -rndNum(10) - 3);
this.color = 'hsl(' + rndNum(360) + ', 100%, 50%)'
this.size = 4;
this.dead = false;
this.start = 0;
let exParticles = [],
exPLen = 100;
let rootShow = true;
this.update = function(time) {
if (this.dead) {
return;
}
rootShow = this.vel.y < 0;
if (rootShow) {
this.pos.add(this.vel);
this.vel.y = this.vel.y + gravity;
} else {
if (exParticles.length === 0) {
flash = true;
for (let i = 0; i < exPLen; i++) {
exParticles.push(new particle(this.pos, new vector(-rndNum(10) + 5, -rndNum(10) + 5)));
exParticles[exParticles.length - 1].start = time;
}
}
let numOfDead = 0;
for (let i = 0; i < exPLen; i++) {
let p = exParticles[i];
p.update(time);
if (p.dead) {
numOfDead++;
}
}
if (numOfDead === exPLen) {
this.dead = true;
}
}
}
this.draw = function() {
if (this.dead) {
return;
}
ctx.fillStyle = this.color;
if (rootShow) {
drawDot(this.pos.x, this.pos.y, this.size);
} else {
for (let i = 0; i < exPLen; i++) {
let p = exParticles[i];
p.draw();
}
}
}
}
function drawDot(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
var fireworks = [],
gravity = 0.2,
snapTime = 0,
flash = false;
function init() {
let numOfFireworks = 20;
for (let i = 0; i < numOfFireworks; i++) {
fireworks.push(new firework(rndNum(canvas.width), canvas.height));
}
}
function update(time) {
for (let i = 0, len = fireworks.length; i < len; i++) {
let p = fireworks[i];
p.update(time);
}
}
function draw(time) {
update(time);
ctx.fillStyle = '#fff';
if (flash) {
flash = false;
}
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
ctx.font = "30px Arial";
let newTime = time - snapTime;
snapTime = time;
//ctx.fillText(newTime,10,50);
ctx.fillStyle = 'blue';
for (let i = 0, len = fireworks.length; i < len; i++) {
let p = fireworks[i];
if (p.dead) {
fireworks[i] = new firework(rndNum(canvas.width), canvas.height);
p = fireworks[i];
p.start = time;
}
p.draw();
}
window.requestAnimationFrame(draw);
}
window.addEventListener('resize', function() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
});
init();
draw();
}
return saved;
}
//callback funktion erklären!
//document ready einbauen