Novoroční ohňostroj v JavaScriptu

S tímto řešením jsem vyhrál - Machr na efekty - Novoroční ohňostroj

Úvod

Pro chod třídy je potřeba jQuery, takže třídu jednoduše vložíte:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="Fireworks.js"></script>

Nastavení

Fireworks.volume = 0.2;//0-1 nastavení celkové hlasitosti aplikace
Fireworks.boomAreaLimitTop = true;//Pokud false - raketa proletí vrchním koncem obrazovky
Fireworks.boomAreaLimitBottom = true;//Pokud false - raketa proletí spodním koncem obrazovky
Fireworks.boomAreaLimitLeft = true;//Pokud false - raketa proletí levým koncem obrazovky
Fireworks.boomAreaLimitRight = true;//Pokud false - raketa proletí pravým koncem obrazovky
//Pokud true - raketa vybouchne před koncem
Fireworks.responsive = true;//true - velikost, ... rakety se přizpůsob velikosti obrazovky
Fireworks.gravitace = 1;// +/- výchozí je 1
Fireworks.w = 500//Šírka pole do kterého bude vykreslovat
Fireworks.h = 500//Výška pole do kterého bude vykreslovat
Fireworks.canvas = "canvas";//jQuery selektor canvasu do kterého se bude vykreslovat

Styly

var raketa = Fireworks.addStyle({
    width:10,//Výška částice
    height:10,//Šířka částice
    name:"Jméno stylu",//Je prakticky k ničemu, ale...
    lineWidth:1,//Tloušťka částice (pokud: type=0)
    strokeStyle:'#FFFFFF',//Barva částice (pokud: type=0)
    shadowBlur:[0,10,15,1,23,48,43,12,65,32,12,1],//Úrovně stínu (blikání)
    shadowColor:'#FF0000',//Barva stínu
    type:0,// 1/0 0-čára, 1-kruh
    fillStyle:'#00FF00'//Vybarvení částice (pokud: type=1)
});

Tato funkce vrací ID stylu, které se použije při vložení rakety.

Rakety

Nebo-li vložení částice

Fireworks.addParticle({
    uhel:45,//Udávejte ve stupních. 0 - vlevo, 180 - vpravo. Mělo by to pokousat it např. -465°, ale větší jistotu budete mít, když to zadáte kladné a nejlépe 0-360
    style:raketa,//ID sylu
    type:1,//Typ částice: 1 - raketa, 2 - částice (to co z ní při výbuchu vyletí), 3 - částice která se při dalším vykreslení nevykreslí a smaže
    speed:5,//Počáteční rychlost částice
    vaha:1,//Váha čátice
    payload:20,//Náklad v raketě, (kolik z toho vyletí částic)
    x:Fireworks.w/2,//Pozice startu x
    y:Fireworks.h,//Pozice startu y
    count:25,//Za jak dlouho vybouchne (nejedná se o čas...) (Pokud budete mít zapnuté responzivní zobrazení tak se to přízpůsobí...)
    subfw:{//Vlastnosti částic, které vyletí z rakety po výbuchu
        style:castice,//ID stylu
        rozpad:50,//Za jak dlouho se rozpadne
        speed:5,//Počáteční rychlost částice
        vaha:0.5,//Váha částice
    }
})

Tato funkce vrací ID částice, které vám je k ničemu.

Vykreslení

Nejdůležitější funkce z oblasti vykreslení je Fireworks.render() Pokud by jste chtěli vykreslovat pouze použitím Fireworks.render(), museli by jste nastavit FPS asi tak nejlépe na 30.

Fireworks.FPS = 30;

Potom už si přizpůsobit nastavení částic...

Jak je to lepší?

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


var ltime = null;

function step(timestamp) {
    requestAnimationFrame(step);
    var progress;
    if (ltime === null)
        ltime = timestamp;
    fps = timestamp - ltime;
    Fireworks.FPS = Math.round(1000/fps);
    Fireworks.render();
    ltime = timestamp;
}

requestAnimationFrame(step);

Budoucnost

Pokud bude čas a nálada, tak se pokusím zapracovat na vzhledu a rozšíření možností přizpůsobení částic.

Galerie

Program byl vytvořen v roce 2013.