实验-网页动画(js版)
网页加载完后,在此点击右键
Code
1
<html>
2<head>
3<script language="javascript" src="cookie.js"></script>
4 <script language="javascript">
5 function Point(x,y) 
{
6
this.X = x;
7 this.Y = y;
8
}
9 ////动画
10 function Animation(type) {
11 this.src = "left.png";
12 this.imgWidth = 250;
13 this.imgHeight = 100;
14 this.Width = 50;
15 this.Height = 100;
16 this.second = 50;
17
if (type == "DownWalk") {
18 this.src = "Man_2_1/DownWalk.png";
19
}
20 else if (type == "LeftDownWalk") {
21 this.src = "Man_2_1/LeftDownWalk.png";
22 }
23 else if (type == "LeftUpWalk") {
24 this.src = "Man_2_1/LeftUpWalk.png";
25 }
26 else if (type == "LeftWalk") {
27 this.src = "Man_2_1/LeftWalk.png";
28 }
29 else if (type == "RightDownWalk") {
30 this.src = "Man_2_1/RightDownWalk.png";
31 }
32 else if (type == "RightUpWalk") {
33 this.src = "Man_2_1/RightUpWalk.png";
34 }
35 else if (type == "RightWalk") {
36 this.src = "Man_2_1/RightWalk.png";
37 }
38 else if (type == "UpWalk") {
39 this.src = "Man_2_1/UpWalk.png";
40 }
41
42
43 }
44 //动画播放器
45 function AnimationPlayer(animation) {
46 this.state = "stop";
47 this.count = 5;
48 this.index = 0;
49 this.Frame = null;
50 this.mouseTimeout = null;
51 this.animation = null;
52 this.animation = animation;
53 this.e = function() {
54 var c = this; return function() {
55 if (c.state == "walk")
56 c.walk();
57 }
58 };
59 this.setAnimation = function(animation) {
60 if (animation != null) {
61 if (this.animation == animation) return;
62 this.animation = animation;
63 this.Frame.style.width = this.animation.Width + "px";
64 this.Frame.style.height = this.animation.Height + "px";
65 this.Frame.style.backgroundImage = "url(" + this.animation.src + ")";
66 this.Frame.style.backgroundPosition = "0px 0px";
67 }
68 }
69 this.walk = function() {
70 //alert(this.state)
71 if (this.animation != null && this.state=="walk") {
72 this.mouseTimeout = window.clearTimeout(this.mouseTimeout);
73 this.Frame.style.backgroundPosition = "-" + (this.index * this.animation.Width) + "px 0px";
74 this.index++;
75 this.mouseTimeout = window.setTimeout(this.e(), this.animation.second);
76
77 }
78 }
79 this.stop = function() {
80 if (this.state = "walk") {
81 this.state = "stop";
82 this.index = this.count-1;
83 this.Frame.style.backgroundPosition = "-" + (this.index * this.animation.Width) + "px 0px";
84 }
85 }
86 this.select = function() {
87 //this.style.border = "solid 1px black";
88 }
89
90 //实例化
91 this.instance = function(point) {
92
93 div = document.createElement("div");
94
95 var Content = document.getElementById("Content");
96 Content.appendChild(div);
97 this.Frame = div;
98 //this.Frame.innerText = "点击行走/停止";
99 this.Frame.style.position = "absolute";
100 this.Frame.style.left = point.X + "px";
101 this.Frame.style.top = point.Y + "px";
102
103 this.Frame.onmousedown = this.select;
104 this.setAnimation(this.animation);
105
106 }
107
108 }
109
110 //Role
111 /**//*
112 1.role has his location
113 2.role has his name(ID) sex type
114
115 */
116 function Role() {
117
118 this.rightAnimation = new Animation("RightWalk");
119 this.rightDownAnimation = new Animation("RightDownWalk");
120 this.downAnimation = new Animation("DownWalk");
121 this.leftDownAnimation = new Animation("LeftDownWalk");
122 this.leftUpAnimation = new Animation("LeftUpWalk");
123 this.leftAnimation = new Animation("LeftWalk");
124 this.upAnimation = new Animation("UpWalk");
125 this.rightUpAnimation = new Animation("RightUpWalk");
126
127 this.Timeout = null;
128 this.jiaodu = 0;
129 this.animationPlayer = new AnimationPlayer(this.downAnimation);
130 this.Location = new Point(10, 10);
131 this.Purpose = new Point(10, 10);
132
133 this.animationPlayer.instance(this.Location);
134
135 this.onclick = function() {
136 if (this.animationPlayer.state == "stop") {
137 this.animationPlayer.state = "walk";
138 this.animationPlayer.walk();
139 // alert(this.state);
140 } else {
141 this.animationPlayer.stop();
142 //alert("停止");
143 }
144 };
145
146// this.Change = function() {
147// if(this.animationPlayer.animation==this.animation1)
148// this.animationPlayer.setAnimation(this.animation2);
149// else if (this.animationPlayer.animation == this.animation2)
150// this.animationPlayer.setAnimation(this.animation3);
151// else if (this.animationPlayer.animation == this.animation3)
152// this.animationPlayer.setAnimation(this.animation4);
153// else if (this.animationPlayer.animation == this.animation4)
154// this.animationPlayer.setAnimation(this.animation1);
155// }
156
157 this.e = function() {
158 var c = this; return function() {
159 c.onMove();
160 }
161 };
162 this.onMove = function() {
163 var retx = false, rety = false;
164 this.Timeout = window.clearTimeout(this.mouseTimeout);
165
166 if (this.Location.X >= this.Purpose.X - 5 && this.Location.X <= this.Purpose.X + 5) {
167
168
169 retx = true;
170
171 }
172 else {
173 if (this.Location.X > this.Purpose.X) this.Location.X -= 5;
174 else this.Location.X += 5;
175 this.animationPlayer.Frame.style.left = this.Location.X - this.animationPlayer.animation.Width / 2 + "px";
176
177 }
178 if (this.Location.Y >= this.Purpose.Y - 5 && this.Location.Y <= this.Purpose.Y + 5) {
179
180
181 rety = true;
182
183 }
184 else {
185 if (this.Location.Y > this.Purpose.Y) this.Location.Y -= 5;
186 else this.Location.Y += 5;
187 this.animationPlayer.Frame.style.top = this.Location.Y - this.animationPlayer.animation.imgHeight + "px";
188 }
189 if (retx && rety) {
190 this.animationPlayer.stop();
191 return;
192 }
193
194 if (this.animationPlayer.state == "stop") {
195 this.animationPlayer.state = "walk";
196 this.animationPlayer.walk();
197 //alert();
198 }
199 this.jiaodu = parseInt((Math.atan((this.Purpose.Y - this.Location.Y) / (this.Purpose.X - this.Location.X))) * 180 / Math.PI + 180) % 360;
200
201 if (this.Purpose.X - (this.Location.X) > 0)
202 this.jiaodu = (this.jiaodu + 180) % 360;
203 //alert(this.jiaodu)
204 this.turnJiao(this.jiaodu);
205 this.Timeout = window.setTimeout(this.e(), 50);
206
207 }
208 this.turnJiao = function(jiaodu) {
209 if (jiaodu > (360 - 22.5) || jiaodu < (22.5)) {
210 this.animationPlayer.setAnimation(this.rightAnimation);
211
212 }
213 //向右下
214 if (jiaodu > (45 * 1 - 22.5) && jiaodu < (45 * 1 + 22.5)) {
215 this.animationPlayer.setAnimation(this.rightDownAnimation);
216 }
217 //直下
218 if (jiaodu > (45 * 2 - 22.5) && jiaodu < (45 * 2 + 22.5)) {
219 this.animationPlayer.setAnimation(this.downAnimation);
220
221 }
222 //左下
223 if (jiaodu > (45 * 3 - 22.5) && jiaodu < (45 * 3 + 22.5)) {
224 this.animationPlayer.setAnimation(this.leftDownAnimation);
225
226 }
227 //直左
228 if (jiaodu > (45 * 4 - 22.5) && jiaodu < (45 * 4 + 22.5)) {
229 this.animationPlayer.setAnimation(this.leftAnimation);
230
231 }
232 //左上
233 if (jiaodu > (45 * 5 - 22.5) && jiaodu < (45 * 5 + 22.5)) {
234 this.animationPlayer.setAnimation(this.leftUpAnimation);
235
236 }
237 //直上
238 if (jiaodu > (45 * 6 - 22.5) && jiaodu < (45 * 6 + 22.5)) {
239 this.animationPlayer.setAnimation(this.upAnimation);
240
241 }
242 //右上
243 if (jiaodu > (45 * 7 - 22.5) && jiaodu < (45 * 7 + 22.5)) {
244 this.animationPlayer.setAnimation(this.rightUpAnimation);
245
246 }
247 }
248 }
249 var role;
250 window.onload = function() {
251 role = new Role();
252 }
253 window.onfocus = function() {
254// if (role) role.Change()
255 }
256
257 document.documentElement.oncontextmenu = function() {
258 var x = event.clientX;
259 var y = event.clientY;
260 if (role != null) {
261 role.Purpose = new Point(x, y);
262 role.onMove();
263 }
264 return false;
265
266 }
267 //alert(GetCookie("ttttt"));
268 </script>
269</head>
270<body onselectstart="return false">
271<div style=" position:absolute; " id="Content" onclick="if(role)role.onclick();" ></div>
272</body>
273</html>
Code1
<html>2
<head>3
<script language="javascript" src="cookie.js"></script>4
<script language="javascript">5
function Point(x,y) {6
this.X = x;7
this.Y = y;8
}9
////动画10
function Animation(type) {11
this.src = "left.png";12
this.imgWidth = 250;13
this.imgHeight = 100;14
this.Width = 50;15
this.Height = 100;16
this.second = 50;17
if (type == "DownWalk") {18
this.src = "Man_2_1/DownWalk.png";19
}20
else if (type == "LeftDownWalk") {21
this.src = "Man_2_1/LeftDownWalk.png";22
}23
else if (type == "LeftUpWalk") {24
this.src = "Man_2_1/LeftUpWalk.png";25
}26
else if (type == "LeftWalk") {27
this.src = "Man_2_1/LeftWalk.png";28
}29
else if (type == "RightDownWalk") {30
this.src = "Man_2_1/RightDownWalk.png";31
}32
else if (type == "RightUpWalk") {33
this.src = "Man_2_1/RightUpWalk.png";34
}35
else if (type == "RightWalk") {36
this.src = "Man_2_1/RightWalk.png";37
}38
else if (type == "UpWalk") {39
this.src = "Man_2_1/UpWalk.png";40
}41
42
43
}44
//动画播放器45
function AnimationPlayer(animation) {46
this.state = "stop";47
this.count = 5;48
this.index = 0;49
this.Frame = null;50
this.mouseTimeout = null;51
this.animation = null;52
this.animation = animation;53
this.e = function() {54
var c = this; return function() {55
if (c.state == "walk")56
c.walk();57
}58
};59
this.setAnimation = function(animation) {60
if (animation != null) {61
if (this.animation == animation) return;62
this.animation = animation;63
this.Frame.style.width = this.animation.Width + "px";64
this.Frame.style.height = this.animation.Height + "px";65
this.Frame.style.backgroundImage = "url(" + this.animation.src + ")";66
this.Frame.style.backgroundPosition = "0px 0px";67
}68
}69
this.walk = function() {70
//alert(this.state)71
if (this.animation != null && this.state=="walk") {72
this.mouseTimeout = window.clearTimeout(this.mouseTimeout);73
this.Frame.style.backgroundPosition = "-" + (this.index * this.animation.Width) + "px 0px";74
this.index++;75
this.mouseTimeout = window.setTimeout(this.e(), this.animation.second);76
77
}78
}79
this.stop = function() {80
if (this.state = "walk") {81
this.state = "stop";82
this.index = this.count-1;83
this.Frame.style.backgroundPosition = "-" + (this.index * this.animation.Width) + "px 0px";84
}85
}86
this.select = function() {87
//this.style.border = "solid 1px black";88
}89
90
//实例化91
this.instance = function(point) {92
93
div = document.createElement("div");94
95
var Content = document.getElementById("Content");96
Content.appendChild(div);97
this.Frame = div;98
//this.Frame.innerText = "点击行走/停止";99
this.Frame.style.position = "absolute";100
this.Frame.style.left = point.X + "px";101
this.Frame.style.top = point.Y + "px";102
103
this.Frame.onmousedown = this.select;104
this.setAnimation(this.animation);105
106
}107
108
}109
110
//Role111
/**//*112
1.role has his location113
2.role has his name(ID) sex type 114
115
*/116
function Role() {117
118
this.rightAnimation = new Animation("RightWalk");119
this.rightDownAnimation = new Animation("RightDownWalk");120
this.downAnimation = new Animation("DownWalk");121
this.leftDownAnimation = new Animation("LeftDownWalk");122
this.leftUpAnimation = new Animation("LeftUpWalk");123
this.leftAnimation = new Animation("LeftWalk");124
this.upAnimation = new Animation("UpWalk");125
this.rightUpAnimation = new Animation("RightUpWalk");126
127
this.Timeout = null;128
this.jiaodu = 0;129
this.animationPlayer = new AnimationPlayer(this.downAnimation);130
this.Location = new Point(10, 10);131
this.Purpose = new Point(10, 10);132
133
this.animationPlayer.instance(this.Location);134
135
this.onclick = function() {136
if (this.animationPlayer.state == "stop") {137
this.animationPlayer.state = "walk";138
this.animationPlayer.walk();139
// alert(this.state);140
} else {141
this.animationPlayer.stop();142
//alert("停止");143
}144
};145
146
// this.Change = function() {147
// if(this.animationPlayer.animation==this.animation1)148
// this.animationPlayer.setAnimation(this.animation2);149
// else if (this.animationPlayer.animation == this.animation2)150
// this.animationPlayer.setAnimation(this.animation3);151
// else if (this.animationPlayer.animation == this.animation3)152
// this.animationPlayer.setAnimation(this.animation4);153
// else if (this.animationPlayer.animation == this.animation4)154
// this.animationPlayer.setAnimation(this.animation1);155
// }156
157
this.e = function() {158
var c = this; return function() {159
c.onMove();160
}161
};162
this.onMove = function() {163
var retx = false, rety = false;164
this.Timeout = window.clearTimeout(this.mouseTimeout);165
166
if (this.Location.X >= this.Purpose.X - 5 && this.Location.X <= this.Purpose.X + 5) {167
168
169
retx = true;170
171
}172
else {173
if (this.Location.X > this.Purpose.X) this.Location.X -= 5;174
else this.Location.X += 5;175
this.animationPlayer.Frame.style.left = this.Location.X - this.animationPlayer.animation.Width / 2 + "px";176
177
}178
if (this.Location.Y >= this.Purpose.Y - 5 && this.Location.Y <= this.Purpose.Y + 5) {179
180
181
rety = true;182
183
}184
else {185
if (this.Location.Y > this.Purpose.Y) this.Location.Y -= 5;186
else this.Location.Y += 5;187
this.animationPlayer.Frame.style.top = this.Location.Y - this.animationPlayer.animation.imgHeight + "px";188
}189
if (retx && rety) {190
this.animationPlayer.stop();191
return;192
}193
194
if (this.animationPlayer.state == "stop") {195
this.animationPlayer.state = "walk";196
this.animationPlayer.walk();197
//alert();198
}199
this.jiaodu = parseInt((Math.atan((this.Purpose.Y - this.Location.Y) / (this.Purpose.X - this.Location.X))) * 180 / Math.PI + 180) % 360;200
201
if (this.Purpose.X - (this.Location.X) > 0)202
this.jiaodu = (this.jiaodu + 180) % 360;203
//alert(this.jiaodu)204
this.turnJiao(this.jiaodu);205
this.Timeout = window.setTimeout(this.e(), 50);206
207
}208
this.turnJiao = function(jiaodu) {209
if (jiaodu > (360 - 22.5) || jiaodu < (22.5)) {210
this.animationPlayer.setAnimation(this.rightAnimation);211
212
}213
//向右下214
if (jiaodu > (45 * 1 - 22.5) && jiaodu < (45 * 1 + 22.5)) {215
this.animationPlayer.setAnimation(this.rightDownAnimation);216
}217
//直下218
if (jiaodu > (45 * 2 - 22.5) && jiaodu < (45 * 2 + 22.5)) {219
this.animationPlayer.setAnimation(this.downAnimation);220
221
}222
//左下223
if (jiaodu > (45 * 3 - 22.5) && jiaodu < (45 * 3 + 22.5)) {224
this.animationPlayer.setAnimation(this.leftDownAnimation);225
226
}227
//直左228
if (jiaodu > (45 * 4 - 22.5) && jiaodu < (45 * 4 + 22.5)) {229
this.animationPlayer.setAnimation(this.leftAnimation);230
231
}232
//左上233
if (jiaodu > (45 * 5 - 22.5) && jiaodu < (45 * 5 + 22.5)) {234
this.animationPlayer.setAnimation(this.leftUpAnimation);235
236
}237
//直上238
if (jiaodu > (45 * 6 - 22.5) && jiaodu < (45 * 6 + 22.5)) {239
this.animationPlayer.setAnimation(this.upAnimation);240
241
}242
//右上243
if (jiaodu > (45 * 7 - 22.5) && jiaodu < (45 * 7 + 22.5)) {244
this.animationPlayer.setAnimation(this.rightUpAnimation);245
246
}247
}248
}249
var role;250
window.onload = function() {251
role = new Role();252
}253
window.onfocus = function() {254
// if (role) role.Change()255
}256
257
document.documentElement.oncontextmenu = function() {258
var x = event.clientX;259
var y = event.clientY;260
if (role != null) {261
role.Purpose = new Point(x, y);262
role.onMove();263
}264
return false;265
266
}267
//alert(GetCookie("ttttt"));268
</script>269
</head>270
<body onselectstart="return false">271
<div style=" position:absolute; " id="Content" onclick="if(role)role.onclick();" ></div>272
</body>273
</html>
浙公网安备 33010602011771号