-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathch2_SpriteMoveAndDraw_plugin_timeinfo.html
246 lines (223 loc) · 6 KB
/
ch2_SpriteMoveAndDraw_plugin_timeinfo.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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprite Demonstration</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
#draw-target {
width: 480px;
height: 320px;
background-color: #CCF;
position: relative;
}
</style>
<script type="text/javascript">
;(function ($) {
$.fn.bouncyPlugin = function (option) {
/*
* 时间信息
*
* 参数说明：
* @goalFps 想要达到的目标FPS
*/
var timeInfo = function (goalFps) {
var oldTime,
paused = true,
interCount = 0,
totalFps = 0,
totalCoeff = 0;
return {
/*
* return 说明：
* elapsed 从上次 getInfo() 调用开始的毫秒数
* coeff 移动动画计算中用到的参数(时间系数)
* fps 从上次 getInfo() 调用起所达到的 FPS
* averageFps 从第一次 getInfo() 调用起达到的平均 FPS
* averageCoeff 从第一次 getInfo() 调用起的平均参数(时间系数)
*/
getInfo: function () {
if (paused) {
paused = false;
oldTime = +new Date();
return {
elapsed: 0,
coeff: 0,
fps: 0,
averageFps: 0,
averageCoeff: 0
};
}
var newTime = +new Date();
var elapsed = newTime - oldTime;
oldTime = newTime;
var fps = 1000 / elapsed;
interCount++;
var coeff = goalFps/ fps;
totalCoeff += coeff;
return {
elapsed: elapsed,
coeff: goalFps / fps,
fps: fps,
averageFps: totalFps / interCount,
averageCoeff: totalCoeff / interCount
};
},
pause: function () {
paused = ture;
}
};
};
/*
* DHTMLSprite 封装所有 DOM 的操作细节
*
* @params：
* imagePath 图像文件路径
* imagesWidth 图像文件的宽度
* width sprite的宽度
* height sprite的高度
* $drawTarget sprite将要附加于的父元素
*/
var DHTMLSprite = function (params) {
var width = params.width,
height = params.height,
imagesWidth = params.imagesWidth,
// 在 $drawTarget 指定的 div 元素后加上一个 sprite div 元素
$element = params.$drawTarget.append('<div/>').find(':last'),
elemStyle = $element[0].style,
mathFloor = Math.floor;
$element.css({
position: 'absolute',
width: width,
height: height,
backgroundImage: 'url(' + params.imagePath + ')'
});
var that = {
draw: function (x, y) {
elemStyle.left = x + 'px';
elemStyle.top = y + 'px';
},
// 改变显示的 sprite 图像
changeImage: function (index) {
index *= width;
var vOffset = -mathFloor(index / imagesWidth) * height;
var hOffset = -index % imagesWidth;
elemStyle.backgroundPosition = hOffset + 'px '
+ vOffset + 'px';
},
show: function () {
elemStyle.display = 'block';
},
hide: function () {
elemStyle.display = 'none';
},
destroy: function () {
$element.remove();
}
};
return that;
};
/*
* 继承 DHTMLSprite，增加动画方块和移动方块的功能
*
* @params：
* x 像素x
* y 像素y
* xDir x方向递增
* yDir y方向递增
* maxX x方向边界最大值
* maxY y方向边界最大值
*/
var bouncySprite = function (params) {
var x = params.x,
y = params.y,
xDir = params.xDir,
yDir = params.yDir,
maxX = params.maxX,
maxY = params.maxY,
// animIndex 是方块的索引，取值范围为[0,4]
animIndex = 0,
that = DHTMLSprite(params);
/*
* 移动方块
* @tCoeff 时间系数
*/
that.moveAndDraw = function (tCoeff) {
x += xDir * tCoeff;
y += yDir * tCoeff;
animIndex += xDir > 0 ? 1 * tCoeff : -1 * tCoeff; // 递增或递减操作
var animIndex2 = (animIndex % 5) >> 0; // 递增超过4的情况
animIndex2 += animIndex2 < 0 ? 5 : 0; // 递减超过0的情况
if ((xDir < 0 && x < 0) || (xDir > 0 && x >= maxX)) {
xDir = -xDir;
}
if ((yDir < 0 && y < 0) || (yDir > 0 && y >= maxY)) {
yDir = -yDir;
}
that.changeImage(animIndex2);
that.draw(x, y);
};
return that;
};
/*
* 初始化和处理任意数量的 bouncySprite
*
* 参数说明：
* @numBouncy 数量
* @$drawTarget 目标父元素
*/
var bouncyBoss = function (numBouncy, $drawTarget) {
var bouncys = [],
timer = timeInfo(40);
for (var i = 0; i < numBouncy; i++) {
bouncys.push(bouncySprite({
imagePath: 'images/cogs.png',
imagesWidth: 256,
width: 64,
height: 64,
$drawTarget: $drawTarget,
x: Math.random() * ($drawTarget.width() - 64),
y: Math.random() * ($drawTarget.height() - 64),
xDir: Math.random() * 4 - 2,
yDir: Math.random() * 4 - 2,
maxX: $drawTarget.width() - 64,
maxY: $drawTarget.height() - 64
}));
}
var moveAll = function () {
var timeData = timer.getInfo();
var len = bouncys.length;
for (var i = 0; i < len; i++) {
bouncys[i].moveAndDraw(timeData.coeff);
}
setTimeout(moveAll, 10);
};
moveAll();
};
option = $.extend({}, $.fn.bouncyPlugin.defaults, option);
return this.each(function () {
var $drawTarget = $(this);
$drawTarget.css('background-color', option.bgColor);
bouncyBoss(option.numBouncy, $drawTarget);
});
};
$.fn.bouncyPlugin.defaults = {
bgColor: '#foo',
numBouncy: 10
};
})(jQuery);
</script>
<script>
$(function () {
/*$('#draw-target').bouncyPlugin({
numBouncy: 5,
bgColor: '#8ff'
});*/
$('#draw-target').bouncyPlugin();
});
</script>
</head>
<body>
<div id="draw-target"></div>
</body>
</html>