Novoroční ohňostroj v JavaScriptu

JavaScript Objektově orientované programování 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.

 

Stáhnout

Staženo 379x (392.33 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Filip Pýrek
Avatar
Student at SPŠ Purkyňova Brno (CZE), ENTJ (personality type), SW developer, TechEntrepreneur

Jak se ti líbí článek?
Celkem (3 hlasů) :
55555


 



 

 

Komentáře

Avatar
jeremy.cz
Člen
Avatar
jeremy.cz:

Nevim kde začit rád bych měl ohnostroj a k tomu rok 2015 něco takového http://www.js-fireworks.appspot.com/ nebo viz obrázek
Jenže nevim jak na to a moc neumím dělat scripty jsem spíše začátečník ani nevim zda někdo pomůže děkuji

Odpovědět 29.12.2014 1:37
MY CO ŠPATNĚ SLYŠÍME,TAK MÁME VĚTŠINOU PROBLÉM POZNAT IRONII...... .
Avatar
Filip Pýrek
Redaktor
Avatar
Odpovídá na jeremy.cz
Filip Pýrek:

Zkus začít tím, aby to vystřelilo raketu pod určitým úhlem, pak aby uměla explodovat a vytvořit tím další particly. Potom různé barvy, efekty atp.
(raketu stačí udělat jenom jako čáru..)

Odpovědět 29.12.2014 12:12
„The best way to predict the future is to invent it.“ — Alan Kay
Avatar
jeremy.cz
Člen
Avatar
Odpovídá na Filip Pýrek
jeremy.cz:

to sem si stahnul java scriptu pokud je to hotová ale horší je rok 2015 :(

Odpovědět 29.12.2014 13:21
MY CO ŠPATNĚ SLYŠÍME,TAK MÁME VĚTŠINOU PROBLÉM POZNAT IRONII...... .
Avatar
Lukáš Tesař:

No, tak pokud neumíš v HTML ani napsat nápis 2015, tak tu není co řešit...
Koukni sem: http://www.itnetwork.cz/…bove-stranky

 
Odpovědět 29.12.2014 13:29
Avatar
jeremy.cz
Člen
Avatar
Odpovídá na Lukáš Tesař
jeremy.cz:

já je už mam staženou od Filipa Pýrek javascripty, ale chybí ještě rok 2015 jak sem tady dal screen či odkaz

Odpovědět  -2 29.12.2014 14:11
MY CO ŠPATNĚ SLYŠÍME,TAK MÁME VĚTŠINOU PROBLÉM POZNAT IRONII...... .
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:

Jak nastavím, aby mohlo vyletět více raket naráz? Zatím je tam vždy jenom 1, nebo max. 2 zároveň, chtěl bych to číslo trochu zvětšit :-)

Editováno 15.12.2015 21:03
 
Odpovědět 15.12.2015 21:02
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.