-
Notifications
You must be signed in to change notification settings - Fork 1
/
fire.html
147 lines (116 loc) · 3.99 KB
/
fire.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Using BitmapAnimation Objects</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- Import EaselJS Framework -->
<script src="js/lib/easel.js"></script>
<!-- End EaselJS Imports -->
<script>
var canvas;
var stage;
var imgSeq = new Image(); // The image for the sparkle animation
var bmpAnim; // The animated sparkle template to clone
var fpsLabel;
var imgfrm;
function init() {
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new Stage(canvas);
// attach mouse handlers directly to the source canvas.
// better than calling from canvas tag for cross browser compatibility:
canvas.onmousemove = moveCanvas;
canvas.onclick = clickCanvas;
// define simple sprite sheet data specifying the image(s) to use, the size of the frames,
// and the registration point of the frame
// it will auto-calculate the number of frames from the image dimensions and loop them
imgfrm = {
0 : 'img/sparkle_21x23.png',
1 : 'img/sparkle_red_21x23.png',
2 : 'img/sparkle_y_21x23.png'
}
var data = {
images: [imgfrm[Math.floor(Math.random()*2)]],
frames: {width:21,height:23,regX:10,regY:11}
}
// set up an animation instance, which we will clone
bmpAnim = new BitmapAnimation(new SpriteSheet(data));
// add a text object to output the current FPS:
fpsLabel = new Text("-- fps","bold 14px Arial","#FFF");
stage.addChild(fpsLabel);
fpsLabel.x = 10;
fpsLabel.y = 20;
// start the tick and point it at the window so we can do some work before updating the stage:
Ticker.setFPS(20);
Ticker.addListener(window);
}
function tick() {
// loop through all of the active sparkles on stage:
var l = stage.getNumChildren();
for (var i=l-1; i>0; i--) {
var sparkle = stage.getChildAt(i);
// apply gravity and friction
sparkle.vY += 2;
sparkle.vX *= 0.98;
// update position, scale, and alpha:
sparkle.x += sparkle.vX;
sparkle.y += sparkle.vY;
sparkle.scaleX = sparkle.scaleY = sparkle.scaleX+sparkle.vS;
sparkle.alpha += sparkle.vA;
//remove sparkles that are off screen or not invisble
if (sparkle.alpha <= 0 || sparkle.y > canvas.height) {
stage.removeChildAt(i);
}
}
fpsLabel.text = Math.round(Ticker.getMeasuredFPS())+" fps";
// draw the updates to stage
stage.update();
}
//sparkle explosion
function clickCanvas(e) {
addSparkles(Math.random()*200+100|0, stage.mouseX, stage.mouseY,2);
}
//sparkle trail
function moveCanvas(e) {
addSparkles(Math.random()*2+1|0, stage.mouseX, stage.mouseY,1);
}
function addSparkles(count, x, y, speed) {
var num = Math.floor(Math.random()*10) % 3 ;
console.log(num);
//create the specified number of sparkles
for (var i=0; i<count; i++) {
// clone the original sparkle, so we don't need to set shared properties:
var dats = {
images: [imgfrm[num]],
frames: {width:21,height:23,regX:10,regY:11}
}
var abmp = new BitmapAnimation(new SpriteSheet(dats));
var sparkle = abmp.clone();
// set display properties:
sparkle.x = x;
sparkle.y = y;
//sparkle.rotation = Math.random()*360;
sparkle.alpha = Math.random()*0.5+0.5;
sparkle.scaleX = sparkle.scaleY = Math.random()+0.3;
// set up velocities:
var a = Math.PI*2*Math.random();
var v = (Math.random()-0.5)*30*speed;
sparkle.vX = Math.cos(a)*v;
sparkle.vY = Math.sin(a)*v;
sparkle.vS = (Math.random()-0.5)*0.2; // scale
sparkle.vA = -Math.random()*0.05-0.01; // alpha
// start the animation on a random frame:
sparkle.gotoAndPlay(Math.random()*sparkle.spriteSheet.getNumFrames()|0);
// add to the display list:
stage.addChild(sparkle);
}
}
</script>
</head>
<body onload="init();">
<div class="canvasHolder">
<canvas id="testCanvas" width="980" height="680" style="background:#000000"></canvas>
</div>
</body>
</html>