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
Die Idee kombiniert Docker, um Image-Paketierung und Bereitstellung mit einem Klick zu realisieren
1. Docker auf dem Server installieren yum install...
Über das Problem beim Ausführen von Git-Programmen in von Docker bereitgestellten Jenkins
1. Zuerst wird beim Verknüpfen von Git eine Fehle...
Detaillierte Erklärung der Bind-Mounts für die Docker-Datenspeicherung
Bevor Sie diesen Artikel lesen, hoffe ich, dass S...
Vuex implementiert einfache Warenkorbfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Analyse der MySQL-Methode zum Exportieren nach Excel
Dieser Artikel beschreibt, wie Sie MySQL zum Expo...
Detaillierte Erläuterung der Funktionen und Methoden des Vue3-Lebenszyklus
1. Übersicht Bei der sogenannten Lifecycle-Funkti...
Das umfassendste Tutorial zur Installation von Centos8.1 mit VMware15.5 und dem Problem des unzureichenden physischen Speichers
1. Vorbereitung der virtuellen Maschine 1. Erstel...
Implementierung eines einfachen Gobang-Spiels mit nativem JavaScript
In diesem Artikel finden Sie den spezifischen Cod...
So bedienen Sie Datei- und Ordnerberechtigungen unter Linux
Linux-Dateiberechtigungen Überprüfen wir zunächst...
Interaktive Erlebnistrends, die 2015-2016 zum Mainstream werden
Der wichtigste Artikel zum interaktiven Design im...
So ändern Sie die Apt-Get-Quelle in Ubuntu 18.04
Bei Verwendung von apt-get zur Installation ist d...
Für die Verwendung des Docker-Befehls ist kein Sudo erforderlich
Da der Docker-Daemon an den Unix-Socket des Hosts...
Erklärung der horizontalen und vertikalen Tabellenpartitionierung von MySQL
In meinem vorherigen Artikel habe ich gesagt, das...
JavaScript zum Erzielen von Feuerwerkseffekten (objektorientiert)
In diesem Artikel wird der spezifische Code für J...
Was Sie über die Transaktionsisolierung von msyql wissen müssen
Was ist eine Transaktion? Eine Transaktion ist ei...