-
Notifications
You must be signed in to change notification settings - Fork 0
/
ch2_SpriteMoveAndDraw.html
160 lines (146 loc) · 3.71 KB
/
ch2_SpriteMoveAndDraw.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
<!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">
/*
* 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);
that.moveAndDraw = function () {
x += xDir;
y += yDir;
animIndex += xDir > 0 ? 1 : -1; // 递增或递减操作
animIndex %= 5; // 递增超过4的情况
animIndex += animIndex < 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(animIndex);
that.draw(x, y);
};
return that;
};
/*
* 初始化和处理任意数量的 bouncySprite
*
* 参数说明：
* @numBouncy 数量
* @$drawTarget 目标父元素
*/
var bouncyBoss = function (numBouncy, $drawTarget) {
var bouncys = [];
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 len = bouncys.length;
for (var i = 0; i < len; i++) {
bouncys[i].moveAndDraw();
}
setTimeout(moveAll, 10);
};
moveAll();
};
</script>
<script>
$(function(){
bouncyBoss(1, $('#draw-target'));
});
</script>
</head>
<body>
<div id="draw-target"></div>
</body>
</html>