实验-网页动画(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>
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
//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号