A JQuery library to let off online fireworks, as you see in the gif.
Move your mouse, type your keyboard and you'll get fireworks! Though the demo website isn't finished, you can still have a try with my fireworks. The website also supports youtube music, replay and captions, which is not packaged in this library. By the way, the upload feature is not done.
http://noootown.github.io/FireWork
<script src="jquery.min.js"></script> <!--Firework is a jquery library!!!-->
<script src="firework.min.js"></script> <!--placed in dist/ directory -->
- Implemented with html5 canvas api
- You can let off fireworks automatically or by keyboard.
- 35 types of firework!!!
Purpose: Generate firework manager in a canvas
Important: Because of the graphic efficiency, FireWork only supports one canvas at a time to let off fireworks.
<script>
$('#mainCanvas').firework({
speed: 20,
time: 30,
period: 500,
fire:[ [0, 36], [300, 5, 500, 500] ]
});
</script>
Overall parameters:
Option | Type | Default | Range | Description |
---|---|---|---|---|
height | number | $(window).height() | > 0 | specify the height of the canvas (optional) |
width | number | $(window).width() | > 0 | specify the width of the canvas (optional) |
speed | number | 30 | 10 ~ 60 | specify how fast the firework points flies (optional) |
time | number | 30 | 10 ~ 60 | specify how long the firework appears (optional) |
fire | array | null | x | specify the detail of the firework (below this table, optional) |
period | integer | null | > 0 | the period of firework (ms) (optional) |
Fire array form:
[ [time offset, type, x, y] ]
Fire parameters:
Option | Type | Range | Description |
---|---|---|---|
time offset | number | > 0 | time offset since the firework function was called |
type | number | 0 ~ 36 | specify the type of the firework (36 means random) |
x | number | real number | specify the x-coordinate that the firework explodes (optional, if ignore then it's random) |
y | number | real number | specify the y-coordinate that the firework explodes (optional, if ignore then it's random) |
Example:
$('#mainCanvas').firework({
period:500,
firework:[ [0, 36], [250, 5, 500, 500] ]
});
It means letting off a random type firework every 500ms and a type 5 firework at (500, 500) with 250ms time offset.
Coordinate:
(0,0)--------> x
|
|
|
V
y
Purpose: Resize canvas
Parameters:
Option | Type | Default | Range | Description |
---|---|---|---|---|
height | number | $(window).height() | > 0 | specify the height of the canvas (optional) |
width | number | $(window).width() | > 0 | specify the width of the canvas (optional) |
Example:
$(window).on('resize',function(){
$('#mainCanvas').setCanvas();
});
Purpose: Let off fireworks immediately.
Form:
[type, x, y]
Parameters:
Option | Type | Range | Description |
---|---|---|---|
type | number | 0 ~ 36 | specify the type of the firework (36 is random) |
x | number | real number | specify the x-coordinate that the firework explodes (optional, if ignore then it's random) |
y | number | real number | specify the y-coordinate that the firework explodes (optional, if ignore then it's random) |
Example:
var fireworkMap={//keycode to ascii code
//0~9
48:[0,48], //keycode:[type,ascii code]
49:[1,49],
50:[2,50],
51:[3,51],
52:[4,52],
53:[5,53],
54:[6,54],
55:[7,55],
56:[8,56],
57:[9,57]
}
document.addEventListener('keydown', function (event) {
var modifiers = event.altKey||event.ctrlKey||event.metaKey||event.shiftKey;//加了這些key就不行
if (!modifiers) {
if (fireworkMap[event.which] !== undefined) {
event.preventDefault();
$('#mainCanvas').shoot( [ fireworkMap[event.which][0] ] );//random x and y
}
}
});
- Jquery
- html5 canvas api
MIT