JavaScript implementiert Feuerwerkseffekte mit Soundeffekten
|
Ich habe eine halbe Stunde gebraucht, um den Code zu schreiben, und dieses HTML5 Canvas-Neujahrsfeuerwerk wird Sie definitiv nicht enttäuschen! Schauen wir uns zunächst die statischen Renderings an:
Am Ende des Artikels gibt es ein dynamisches Rendering. Schieben Sie einfach den Cursor, um es anzuzeigen! Der JavaScript-Code lautet wie folgt:
$(Funktion() {
var Leinwand = $('#Leinwand')[0];
Leinwand.Breite = $(Fenster).Breite();
Leinwand.Höhe = $(window).Höhe();
var ctx = canvas.getContext('2d');
// Größe ändern
$(window).on('Größe ändern', function() {
Leinwand.Breite = $(Fenster).Breite();
Leinwand.Höhe = $(window).Höhe();
ctx.fillStyle = "#000003";
ctx.fillRect(0, 0, Leinwandbreite, Leinwandhöhe);
Mitte = { x: Leinwandbreite / 2, y: Leinwandhöhe / 2 };
});
// init
ctx.fillStyle = "#000003";
ctx.fillRect(0, 0, Leinwandbreite, Leinwandhöhe);
// Objekte
var listFire = [];
var listFirework = [];
var Listentext = [];
var Spezialliste = [];
var listSpark = [];
var Lichter = [];
var Feuerzahl = 10;
var center = { x: Leinwandbreite / 2, y: Leinwandhöhe / 2 };
Variablenbereich = 100;
var abgefeuert = 0;
var onHold = 0;
var Überraschung = false;
var textIndex = 0;
var Aktionen = [mache ein doppeltes Vollkreisfeuerwerk, mache einen Planetenkreisfeuerwerk, mache einen Vollkreisfeuerwerk, mache ein doppeltes Vollkreisfeuerwerk, mache ein Herzfeuerwerk, mache einen Kreisfeuerwerk, mache ein Zufallsfeuerwerk];
für (var i = 0; i < Feuerzahl; i++) {
var Feuer = {
x: Math.random() * Bereich / 2 - Bereich / 4 + Mitte.x,
y: Math.random() * Bereich * 2,5 + Leinwandhöhe,
Größe: Math.random() + 0,5,
füllen: '#ff3',
vx: Math.random() - 0,5,
vy: -(Math.random() + 4),
ax: Math.random() * 0,06 - 0,03,
Verzögerung: Math.round(Math.random() * Bereich) + Bereich * 4,
halten: falsch,
Alpha: 1,
weit: Math.random() * Bereich + (Mitte.y - Bereich)
};
Feuer.Basis = {
x: Feuer.x,
y: Feuer.y,
vx: feuer.vx,
vy:feuer.vy
};
//
listFire.push(Feuer);
// Ton abspielen
spieleLaunchSound();
}
// Array von Sounds definieren
var listExpSound = $('audio.exp');
var listLaunchSound = $('audio.launch');
// Array-Position des Textes definieren
var textString = "Frohes Mondneujahr 2018";
var textMatrix = [
4,5, 0, 5,5, 0, 6,5, 0, 7,5, 0, 8,5, 0,
0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
5, 2, 6, 2, 7, 2, 8, 2
]
var Zeichen = {
H: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 3, 2, 3, 3, 3, 4, 3,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
],
A: [
2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
],
P: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
],
und: [
0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
],
ich: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 7, 2, 7, 3, 7, 4, 7, 5, 7
],
du: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
1, 7, 2, 7, 3, 7, 4, 7,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
],
N: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
],
e: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
1, 3, 2, 3, 3, 3, 4, 3,
1, 7, 2, 7, 3, 7, 4, 7, 5, 7
],
w: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
],
R: [
0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
1, 5, 2, 5, 3, 6, 4, 6, 5, 7
],
2: [
0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
],
0: [
0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
1, 0, 2, 0, 3, 0, 4, 0,
1, 7, 2, 7, 3, 7, 4, 7,
5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
],
1: [
1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
1, 7, 2, 7, 3, 7, 5, 7
],
7: [
0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
3, 4, 3, 5, 3, 6, 3, 7
]
}
Funktion initText() {
var i = Textindex;
var Geschwindigkeit = Math.random() * 0,25 + 1;
var shift = { x: -(Math.random() + 2), y: -(Math.random() + 3) };
var char = Zeichen[Textzeichenfolge[i]];
var Breite = 80;
var halb = 6,5 * Breite;
var left = Textmatrix[i * 2] * Breite - halb;
var top = TextMatrix[i * 2 + 1] * Bereich * 1,2 - Bereich * 2,4;
für (var j = 0; j < Feuerzahl * Zeichenlänge * 0,25; j++) {
var rand = Math.floor(Math.random() * char.length * 0.5);
var x = char[rand * 2] + shift.x;
var y = char[rand * 2 + 1] + shift.y;
var text = {
x: Mitte.x + links * 0,9,
y: Mitte.y + oben,
links: Mitte.x + links,
Größe: Math.random() + 0,5,
füllen: '#ff3',
vx: x * (Geschwindigkeit + (Math.random() - 0,5) * 0,5),
vy: y * (Geschwindigkeit + (Math.random() - 0,5) * 0,5),
ay: 0,08,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
}
text.base = {
Leben: Text.Leben,
Größe: Textgröße,
};
text.direkt = (text.links - text.x) * 0,08;
listText.push(text);
}
// Ton abspielen
spieleExpSound();
//
Lichter.drücken({ x: Mitte.x + links * 0,9, y: Mitte.y + oben, Farbe: Text.Füllung, Radius: Bereich * 2 });
if (++textIndex < textString.length) {
setTimeout(initText, 10);
}
anders {
TextIndex = 0;
}
}
Funktion initSpark() {
var x = Math.random() * Bereich * 3 - Bereich * 1,5 + Mitte.x;
var vx = Math.random() – 0,5;
var vy = -(Math.random() + 4);
var ax = Math.random() * 0,04 – 0,02;
var far = Math.random() * Bereich * 4 - Bereich + Mittelpunkt.y;
var direkt = ax * 10 * Math.PI;
var max = Feuerzahl * 0,5;
für (var i = 0; i < max; i++) {
var Spezial = {
x: x,
y: Math.random() * Bereich * 0,25 + Leinwandhöhe,
Größe: Math.random() + 2,
füllen: '#ff3',
vx: vx,
vj: vj,
Axt: Axt,
direkt: direkt,
Alpha: 1
};
special.far = weit – (special.y – Canvas.Höhe);
listSpecial.push(spezial);
// Ton abspielen
spieleLaunchSound();
}
}
Funktion Randfarbe() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var Farbe = "rgb($r, $g, $b)";
Farbe = Farbe.Ersetzen('$r', r);
Farbe = Farbe.Ersetzen('$g', g);
Farbe = Farbe.Ersetzen('$b', b);
Farbe zurückgeben;
}
Funktion playExpSound() {
var sound = listExpSound[Math.floor(Math.random() * listExpSound.length)];
Ton.Lautstärke = Math.random() * 0,4 + 0,1;
Ton abspielen();
}
Funktion playLaunchSound() {
setzeTimeout(Funktion() {
var sound = listLaunchSound[Math.floor(Math.random() * listLaunchSound.length)];
Tonlautstärke = 0,05;
Ton abspielen();
}, 200);
}
Funktion makeCircleFirework(Feuer) {
var Farbe = Randfarbe();
var Geschwindigkeit = Math.random() * 2 + 6;
var max = Feuerzahl * 5;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 2
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makeDoubleCircleFirework(Feuer) {
var Farbe = Randfarbe();
var Geschwindigkeit = Math.random() * 2 + 8;
var max = Feuerzahl * 3;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe = Randfarbe();
Geschwindigkeit = Math.random() * 3 + 4;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makePlanetCircleFirework(Feuer) {
var Farbe = "#aa0609";
var Geschwindigkeit = Math.random() * 2 + 4;
var max = Feuerzahl * 2;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
max = Feuerzahl * 4;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit * Math.random(),
vy: Math.sin(rad) * Geschwindigkeit * Math.random(),
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
max = Feuerzahl * 3;
Farbe = "#ff9";
var drehen = Math.random() * Math.PI * 2;
var vx = Geschwindigkeit * (Math.random() + 2);
var vy = Geschwindigkeit * 0,6;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
// x, y für Ellipse berechnen
var cx = Math.cos(rad) * vx + (Math.random() - 0,5) * 0,5;
var cy = Math.sin(rad) * vy + (Math.random() - 0,5) * 0,5;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: cx * Math.cos(rotieren) - cy * Math.sin(rotieren), // x-Ellipse drehen
vy: cx * Math.sin(rotieren) + cy * Math.cos(rotieren), // y-Ellipse drehen
ay: 0,02,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
gebe '#aa0609' zurück;
}
Funktion makeFullCircleFirework(Feuer) {
var Farbe = Randfarbe();
var Geschwindigkeit = Math.random() * 8 + 8;
var max = Feuerzahl * 3;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,06,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
max = Feuerzahl * Math.Runde(Math.Random() * 4 + 4);
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit * Math.random(),
vy: Math.sin(rad) * Geschwindigkeit * Math.random(),
ay: 0,06,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makeDoubleFullCircleFirework(Feuer) {
var Farbe = Randfarbe();
var Geschwindigkeit = Math.random() * 8 + 8;
var max = Feuerzahl * 3;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,04,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe = Randfarbe();
Geschwindigkeit = Math.random() * 3 + 4;
max = Feuerzahl * 2;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,06,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
max = Feuerzahl * 4;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit * Math.random(),
vy: Math.sin(rad) * Geschwindigkeit * Math.random(),
ay: 0,06,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makeHeartFirework(Feuer) {
var Farbe = Randfarbe();
var Geschwindigkeit = Math.random() * 3 + 3;
var max = Feuerzahl * 5;
var drehen = Math.random() * Math.PI * 2;
für (var i = 0; i < max; i++) {
var rad = (i * Math.PI * 2) / max + drehen;
var v, p;
wenn (rad - drehen < Math.PI * 0,5) {
p = (rad – Drehung) / (Math.PI * 0,5);
v = Geschwindigkeit + Geschwindigkeit * p;
}
sonst wenn (rad - drehen > Math.PI * 0,5 und rad - drehen < Math.PI) {
p = (rad – Drehung – Math.PI * 0,5) / (Math.PI * 0,5);
v = Geschwindigkeit * (2 - p);
}
sonst wenn (rad - drehen > Math.PI und rad - drehen < Math.PI * 1,5) {
p = (rad – Drehung – Math.PI) / (Math.PI * 0,5);
v = Geschwindigkeit * (1 - p);
}
sonst wenn (rad - drehen > Math.PI * 1,5 und rad - drehen < Math.PI * 2) {
p = (rad – Drehung – Math.PI * 1,5) / (Math.PI * 0,5);
v = Geschwindigkeit * p;
}
anders {
v = Geschwindigkeit;
}
v = v + (Math.random() - 0,5) * 0,25;
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.cos(rad) * v,
vy: Math.sin(rad) * v,
ay: 0,02,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 1,5
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makeRandomFirework(Feuer) {
var Farbe = Randfarbe();
für (var i = 0; i < Feuerzahl * 5; i++) {
var Feuerwerk = {
x: Feuer.x,
y: Feuer.y,
Größe: Math.random() + 1,5,
Füllung: Farbe,
vx: Math.random() * 15 - 7,5,
vy: Math.random() * -15 + 5,
ay: 0,05,
Alpha: 1,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 2
};
Feuerwerk.Basis = {
Leben: Feuerwerk.Leben,
Größe: Feuerwerksgröße
};
listFirework.push(Feuerwerk);
}
Farbe zurückgeben;
}
Funktion makeSpark(spezial) {
var Farbe = Spezialfüllung;
var Geschwindigkeit = Math.random() * 6 + 12;
var max = Feuerzahl;
für (var i = 0; i < max; i++) {
var rad = (Math.random() * Math.PI * 0,3 + Math.PI * 0,35) + Math.PI + special.direct;
var Funke = {
x: spezial.x,
y: spezial.y,
Größe: Math.random() + 1,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,02,
Alpha: 1,
rad: rad,
direkt: spezial.direkt,
Kette: Math.round(Math.random() * 2) + 2,
Leben: Math.round(Math.random() * Bereich / 2) + Bereich / 2
};
spark.base = {
Leben: Funke.Leben,
Geschwindigkeit: Geschwindigkeit
};
listSpark.push(spark);
}
Farbe zurückgeben;
}
Funktion ChainSpark (ElternSpark) {
var Farbe = parentSpark.fill;
wenn (parentSpark.chain > 0) {
var Geschwindigkeit = parentSpark.base.velocity * 0,6;
var max = Math.round(Math.random() * 5);
für (var i = 0; i < max; i++) {
var rad = (Math.random() * Math.PI * 0,3 - Math.PI * 0,15) + parentSpark.rad + parentSpark.direct;
var Funke = {
x: parentSpark.x,
y: parentSpark.y,
Größe: parentSpark.size * 0,6,
Füllung: Farbe,
vx: Math.cos(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
vy: Math.sin(rad) * Geschwindigkeit + (Math.random() - 0,5) * 0,5,
ay: 0,02,
Alpha: 1,
rad: rad,
direkt: parentSpark.direct,
Kette: parentSpark.chain,
Leben: parentSpark.base.life * 0,8
};
spark.base = {
Leben: Funke.Leben,
Größe: Spark.size,
Geschwindigkeit: Geschwindigkeit
};
listSpark.push(spark);
}
wenn (Math.random() > 0,9 und parentSpark.chain > 1) {
// Ton abspielen
spieleExpSound();
}
}
Farbe zurückgeben;
}
(Funktionsschleife() {
requestAnimationFrame(Schleife);
aktualisieren();
ziehen();
})();
Funktion update() {
// Feuerlogik aktualisieren
für (var i = 0; i < listFire.length; i++) {
var Feuer = ListeFeuer[i];
//
wenn (Feuer.y <= Feuer.weit) {
// Ton abspielen
spieleExpSound();
// Fall Feuerwerk hinzufügen
gefeuert++;
var Farbe = Aktionen [Math.floor(Math.random() * Aktionen.length)](Feuer);
// Licht
Lichter.drücken({ x: Feuer.x, y: Feuer.y, Farbe: Farbe, Radius: Bereich * 2 });
// zurücksetzen
Feuer.y = Feuer.Basis.y;
Feuer.x = Feuer.Basis.x;
//besonders
wenn (gefeuert % 33 == 0) {
initSpark();
}
// in der Warteschleife
Überraschung = gefeuert % 100 == 0? True: Überraschung;
wenn (Überraschung) {
Feuer.vx = 0;
feuer.vy = 0;
Feuer.ax = 0;
Feuer.halten = wahr;
in Warteschleife++;
}
anders {
feuer.vx = feuer.base.vx;
feuer.vy = feuer.base.vy;
Feuer.ax = Math.random() * 0,06 – 0,03;
// Ton abspielen
spieleLaunchSound();
}
}
//
wenn (Feuer.halten && Feuer.Verzögerung <= 0) {
in der Warteschleife--;
Feuer.halten = falsch;
Feuer.Verzögerung = Math.round(Math.random() * Bereich) + Bereich * 4;
feuer.vx = feuer.base.vx;
feuer.vy = feuer.base.vy;
Feuer.ax = Math.random() * 0,06 – 0,03;
Feuer.Alpha = 1;
// Ton abspielen
spieleLaunchSound();
}
sonst wenn (Feuer.halten und Feuer.Verzögerung > 0) {
Feuer.Verzögerung--;
}
anders {
feuer.x += feuer.vx;
feuer.y += feuer.vy;
Feuer.vx += Feuer.ax;
Feuer.Alpha = (Feuer.Y - Feuer.Fern) / Feuer.Fern;
}
}
// Feuerwerkslogik aktualisieren
für (var i = listFirework.length - 1; i >= 0; i--) {
var Feuerwerk = ListeFeuerwerk[i];
if (Feuerwerk) {
Feuerwerk.vx *= 0,9;
Feuerwerk.vy *= 0,9;
Feuerwerk.x += Feuerwerk.vx;
Feuerwerk.y += Feuerwerk.vy;
Feuerwerk.vy += Feuerwerk.ay;
Feuerwerk.Alpha = Feuerwerk.Leben / Feuerwerk.Basis.Leben;
Feuerwerk.Größe = Feuerwerk.Alpha * Feuerwerk.Basis.Größe;
Feuerwerk.alpha = Feuerwerk.alpha > 0,6 ? 1 : Feuerwerk.alpha;
//
Feuerwerk.Leben--;
if (Feuerwerk.Leben <= 0) {
listFirework.splice(i, 1);
}
}
}
// Überraschung, frohes neues Jahr!
if (unterstützen && onHold == 10) {
Überraschung = falsch;
setTimeout(initText, 3000);
}
// Textlogik aktualisieren
für (var i = Listentext.Länge - 1; i >= 0; i--) {
var text = Listentext[i];
text.vx *= 0,9;
text.vy *= 0,9;
text.direkt *= 0,9;
text.x += text.vx + text.direkt;
text.y += text.vy;
text.vy += text.ay;
text.alpha = text.Leben / text.Basis.Leben;
text.größe = text.alpha * text.basisgröße;
text.alpha = text.alpha > 0,6 ? 1 : text.alpha;
//
text.leben--;
wenn (text.leben <= 0) {
listText.splice(i, 1);
}
}
// Speziallogik aktualisieren
für (var i = listSpecial.length - 1; i >= 0; i--) {
var Spezial = ListeSpezial[i];
if (spezial.y <= spezial.weit) {
// Ton abspielen
spieleExpSound();
// Licht
Lichter.drücken({ x: spezial.x, y: spezial.y, Farbe: spezial.füllung, Alpha: 0,02, Radius: Bereich * 2 });
//
makeSpark(spezial);
// aus der Liste entfernen
listSpecial.splice(i, 1);
}
anders {
spezial.x += spezial.vx;
speziell.y += speziell.vy;
spezial.vx += spezial.ax;
speziell.alpha = (spezial.y - speziell.weit) / speziell.weit;
}
}
// Spark-Logik aktualisieren
für (var i = listSpark.length - 1; i >= 0; i--) {
var spark = listSpark[i];
wenn (Funke) {
spark.vx *= 0,9;
spark.vy *= 0,9;
spark.x += spark.vx;
spark.y += spark.vy;
spark.vy += spark.ay;
spark.alpha = spark.Leben / spark.base.Leben + 0,2;
//
Funke.Leben--;
wenn (spark.life < spark.base.life * 0,8 und spark.life > 0) {
//
Funke.Kette--;
KetteSpark(Funke);
}
wenn (spark.life <= 0) {
listSpark.splice(i, 1);
}
}
}
}
Funktion zeichnen() {
// klar
ctx.globalCompositeOperation = "Quelle-over";
ctx.globalAlpha = 0,2;
ctx.fillStyle = "#000003";
ctx.fillRect(0, 0, Leinwandbreite, Leinwandhöhe);
// neu zeichnen
ctx.globalCompositeOperation = "Bildschirm";
für (var i = 0; i < listFire.length; i++) {
var Feuer = ListeFeuer[i];
ctx.globalAlpha = feuer.alpha;
ctx.beginPath();
ctx.arc(Feuer.x, Feuer.y, Feuer.größe, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = Feuer.Füllen;
ctx.fill();
}
für (var i = 0; i < listFirework.length; i++) {
var Feuerwerk = ListeFeuerwerk[i];
ctx.globalAlpha = Feuerwerk.alpha;
ctx.beginPath();
ctx.arc(Feuerwerk.x, Feuerwerk.y, Feuerwerk.größe, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = Feuerwerk.Füllen;
ctx.fill();
}
für (var i = 0; i < listSpecial.length; i++) {
var Spezial = ListeSpezial[i];
ctx.globalAlpha = spezial.alpha;
// ctx.beginPath();
// ctx.arc(spezial.x, spezial.y, spezial.größe, 0, Math.PI * 2);
// ctx.closePath();
// ctx.fill();
ctx.fillStyle = Spezial.Füllung;
ctx.fillRect(spezial.x – Spezialgröße, Spezial.y – Spezialgröße, Spezialgröße * 2, Spezialgröße *2);
}
für (var i = 0; i < listSpark.length; i++) {
var spark = listSpark[i];
ctx.globalAlpha = spark.alpha;
// ctx.beginPath();
// ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
// ctx.closePath();
// ctx.fill();
ctx.fillStyle = spark.fill;
ctx.fillRect(spark.x – spark.Größe, spark.y – spark.Größe, spark.Größe * 2, spark.Größe *2);
}
// Lichteffekt
während (Lichter.Länge) {
var Licht = Lichter.pop();
var gradient = ctx.createRadialGradient(licht.x, licht.y, 0, licht.x, licht.y, licht.radius);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(0.2, helle Farbe);
gradient.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.globalAlpha = Licht.Alpha? Licht.Alpha: 0,25;
ctx.fillStyle = Farbverlauf;
ctx.fillRect(Licht.x – Licht.Radius, Licht.y – Licht.Radius, Licht.Radius * 2, Licht.Radius * 2);
}
// Überraschung: EIN FROHES NEUES MONDJAHR 2018!
für (var i = 0; i < Listentext.Länge; i++) {
var text = Listentext[i];
ctx.globalAlpha = text.alpha;
ctx.fillStyle = text.füllen;
ctx.fillRect(text.x – Textgröße, text.y – Textgröße, Textgröße * 2, Textgröße * 2);
}
}
})Der Code der Index-Startseite lautet wie folgt: <!DOCTYPE html> <html lang="de" > <Kopf> <meta charset="UTF-8"> <title>Frohes neues Jahr</title> <link rel="stylesheet" href="css/style.css" rel="externes nofollow" > </Kopf> <Text> <Leinwand-ID="Leinwand"></Leinwand> <div Klasse="Block-Audio"> <audio class="exp" src="m/exp1.mp3" steuert></audio> <audio class="exp" src="m/exp1.mp3" steuert></audio> <audio class="exp" src="m/exp1.mp3" steuert></audio> <audio class="exp" src="m/exp2.mp3" steuert></audio> <audio class="exp" src="m/exp2.mp3" steuert></audio> <audio class="exp" src="m/exp2.mp3" steuert></audio> <audio class="exp" src="m/exp3.mp3" steuert></audio> <audio class="exp" src="m/exp3.mp3" steuert></audio> <audio class="exp" src="m/exp3.mp3" steuert></audio> <audio class="exp" src="m/exp4.mp3" steuert></audio> <audio class="exp" src="m/exp4.mp3" steuert></audio> <audio class="exp" src="m/exp4.mp3" steuert></audio> <audio class="exp" src="m/exp5.mp3" steuert></audio> <audio class="exp" src="m/exp5.mp3" steuert></audio> <audio class="exp" src="m/exp5.mp3" steuert></audio> <audio class="exp" src="m/exp6.mp3" steuert></audio> <audio class="exp" src="m/exp6.mp3" steuert></audio> <audio class="exp" src="m/exp6.mp3" steuert></audio> <audio class="exp" src="m/exp7.mp3" steuert></audio> <audio class="exp" src="m/exp7.mp3" steuert></audio> <audio class="exp" src="m/exp7.mp3" steuert></audio> <audio class="exp" src="m/exp8.mp3" steuert></audio> <audio class="exp" src="m/exp8.mp3" steuert></audio> <audio class="exp" src="m/exp8.mp3" steuert></audio> <audio class="launch" src="m/launch1.mp3" steuert></audio> <audio class="launch" src="m/launch1.mp3" steuert></audio> <audio class="launch" src="m/launch2.mp3" steuert></audio> <audio class="launch" src="m/launch2.mp3" steuert></audio> <audio class="launch" src="m/launch3.mp3" steuert></audio> <audio class="launch" src="m/launch3.mp3" steuert></audio> <audio class="launch" src="m/launch4.mp3" steuert></audio> <audio class="launch" src="m/launch4.mp3" steuert></audio> <audio class="launch" src="m/launch5.mp3" steuert></audio> <audio class="launch" src="m/launch5.mp3" steuert></audio> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Der CSS-Code lautet wie folgt:
Leinwand {
Anzeige: Block;
}
.block-audio {
Anzeige: keine;
}
Körper {Padding: 0px; Rand: 0px}Führen Sie abschließend das dynamische Diagramm für die Spezialeffekte des Feuerwerks wie folgt aus:
Oben finden Sie Einzelheiten zur Verwendung von JavaScript zum Erzielen von Feuerwerkseffekten mit Soundeffekten. Weitere Informationen zu JavaScript-Feuerwerkseffekten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Centos8 erstellt NFS basierend auf KDC-Verschlüsselung
>>: Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch
Artikel empfehlen
So fügen Sie Wettervorhersagen in Ihre Website ein
Wir hoffen, dass wir durch die Einbindung der Wet...
Beispiel zum Erstellen eines Datenbanknamens mit Sonderzeichen in MySQL
Vorwort In diesem Artikel wird erklärt, wie Sie i...
Lösen Sie das Problem des Tomcat 404-Fehlers bei der Bereitstellung von Spring Boot + Jar-Verpackungen
1. Spring Boot unterstützt kein JSP-JAR-Paket, JS...
Die Verwendung des V-Modells in Vue3-Komponenten und ausführliche Erklärung
Inhaltsverzeichnis Verwenden Sie bidirektionale B...
Eine kurze Diskussion über die Lösung des Problems mit verstümmeltem Code und der Portbelegung bei Tomcat
Der Tomcat-Server ist ein kostenloser und quellof...
Ausführliche Erläuterung der Kenntnisse zu MySql-Tabellen, Datenbanken, Sharding und Partitionierung
1. Einleitung Wenn die Datenmenge in der Datenban...
Erstellen Sie in 5 Minuten einen WebRTC-Videochat
Im vorherigen Artikel habe ich den detaillierten ...
Einige weniger bekannte Sortiermethoden in MySQL
Vorwort ORDER BY 字段名升序/降序. Ich glaube, jeder hier...
Drei Verwendungszwecke und Unterschiede von MySQL sind nicht gleich
Urteilssymbole werden in MySQL häufig verwendet, ...
Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)
Vorwort: Ich wollte schon immer wissen, wie eine ...
Einführung in Netzwerktreiber für Linux-Geräte
Kabelgebundenes Netzwerk: Ethernet Drahtloses Net...
Warum kann mein Tomcat nicht starten?
Inhaltsverzeichnis Phänomen: Portnutzung: Rechtsc...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.21-Dekomprimierungsversion
In diesem Artikel wird der detaillierte Vorgang z...
Fälle, in denen bestimmte Bibliotheken beim Sichern der Datenbank mit mysqldump ausgeschlossen werden
veranschaulichen: Mit mysqldump –all-databases we...
Detaillierte Erklärung der Lösung für HTML-Layout mit festen linken und rechten Breiten und adaptiver Mitte
In diesem Artikel wird eine detaillierte Erläuter...