Novoročný ohňostroj v JavaScripte

S týmto riešením som vyhral - Machr na efekty - Novoročný ohňostroj

Úvod

Pre chod triedy je potreba jQuery, takže triedu jednoducho vložíte:

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

Nastavenie

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

Štýly

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)
});

Táto funkcia vracia ID štýlu, ktoré sa použije pri vložení rakety.

Rakety

Alebo ak vloženie častice

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
    }
})

Táto funkcia vracia ID častice, ktoré vám je k ničomu.

Vykreslenie

Najdôležitejšie funkcie z oblasti vykreslenie je Fireworks.render () Ak by ste chceli vykresľovať len použitím Fireworks.render (), museli by ste nastaviť FPS asi tak najlepšie na 30.

Fireworks.FPS = 30;

Potom už si prispôsobiť nastavenie častíc ...

Ako je to lepšie?

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);

Budúcnosť

Pokiaľ bude čas a nálada, tak sa pokúsim zapracovať na vzhľade a rozšírenie možností prispôsobenia častíc.

Galéria