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
HTML/CSS-Grundlagen - Einige Vorsichtsmaßnahmen beim Schreiben von HTML-Code (unbedingt lesen)
Die Warnhinweise in diesem Artikel haben nichts m...
Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)
Ich habe viele Projekte geschrieben, bei denen de...
Drei Möglichkeiten, durch Klicken auf ein Button-Tag in HTML zu einer Seite zu springen
Methode 1: Verwenden des Onclick-Ereignisses <...
Die Einhandregel von WEB 2.0
<br />Mein vorheriger Artikel über CSS wurde...
CSS, um in wenigen Schritten visuelle Effekte im Stil von Cyberpunk 2077 zu erzielen
Hintergrund Bevor wir mit dem Artikel beginnen, w...
Sicherheitsüberlegungen zur Windows-Serververwaltung
Webserver 1. Der Webserver schaltet unnötige IIS-...
Über die Position des H1-Tags in XHTML
In letzter Zeit wurde viel über H1 diskutiert (auf...
Detailliertes Tutorial zur Installation von MySQL 5.7.18 unter Linux (CentOS 7) mit YUM
Das Projekt muss MySQL verwenden. Da ich es zuvor...
So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest
Im Vergleich zu FTP bietet der SSH-basierte SFTP-...
Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung
<br /> Im ersten und zweiten Teil haben wir ...
Einführung in das Hinzufügen neuer Benutzer zu MySql, das Erstellen von Datenbanken für Benutzer und das Zuweisen von Berechtigungen an Benutzer
1. Neuen Benutzer hinzufügen Nur lokalen IP-Zugri...
jQuery implementiert die Funktion zum Deaktivieren der Steuertaste zum Senden des Bestätigungscodes
Gewünschte Wirkung: Nach dem Klick auf die Übermi...
Detaillierte Erläuterung des Prozesses zum Bereitstellen des verteilten Konfigurationscenters Apollo mit einem Klick mithilfe von Docker Compose
Einführung Wenn wir über Verteilung sprechen, müs...
Eine kurze Einführung in die Gesamtstruktur von Tomcat
Tomcat ist weithin als Webcontainer bekannt. Es h...
Detaillierte Erläuterung der Verwendung des Linux-Zeitbefehls
1. Befehlseinführung Mit „time“ werden die für di...