机器人跳舞小程序演示html.docx
《机器人跳舞小程序演示html.docx》由会员分享，可在线阅读，更多相关《机器人跳舞小程序演示html.docx（17页珍藏版）》请在冰豆网上搜索。
机器人跳舞小程序演示html
机器人跳舞小程序演示（html）
说明使用方式
适用浏览器：
360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.不支持Safari、IE8及
以下浏览器。
以下是程序代码
doctypehtml>
HTML5Canvas机器人跳舞动画特效
{
classRobot{
constructor（colorlightsizexystruct）{
this.x=x;
this.points=[];
this.lixxxxnks=[];
this.frxxxxame=0;
this.dir=1;
this.size=size;
this.color=Math.round（color）;
this.light=light;
//----创建点----
for（constpofstruct.points）{
this.points.push（newRobot.Point（size*p.x+xsize*p.y+yp.f））;
}
//----创建链接----
for（constlixxxxnkofstruct.lixxxxnks）{
constp0=this.points[lixxxxnk.p0];
constp1=this.points[lixxxxnk.p1];
constdx=p0.x-p1.x;
constdy=p0.y-p1.y;
this.lixxxxnks.push（
newRobot.lixxxxnk（
this
p0
p1
Math.sqrt（dx*dx+dy*dy）
lixxxxnk.size*size/3
lixxxxnk.lum
lixxxxnk.force
lixxxxnk.disk
）
）;
}
}
update（）{
if（++this.frxxxxame%20===0）this.dir=-this.dir;
if（
dancerDrag&&
this===dancerDrag&&
this.size<16&&
this.frxxxxame>600
）{
dancerDrag=null;
dancers.push（
newRobot（
this.color
this.light*1.25
this.size*2
pointer.x
pointer.y-100*this.size*2
struct
）
）;
dancers.sort（function（d0d1）{
returnd0.size-d1.size;
}）;
}
//----初始化----
for（constlixxxxnkofthis.lixxxxnks）{
constp0=lixxxxnk.p0;
constp1=lixxxxnk.p1;
constdx=p0.x-p1.x;
constdy=p0.y-p1.y;
constdist=Math.sqrt（dx*dx+dy*dy）;
if（dist）{
consttw=p0.w+p1.w;
constr1=p1.w/tw;
constr0=p0.w/tw;
constdz=（lixxxxnk.distance-dist）*lixxxxnk.force;
constsx=dx/dist*dz;
constsy=dy/dist*dz;
p1.x-=sx*r0;
p1.y-=sy*r0;
p0.x+=sx*r1;
p0.y+=sy*r1;
}
}
//----初始化点----
for（constpointofthis.points）{
//----拖拽事件----
if（this===dancerDrag&&point===pointDrag）{
point.x+=（pointer.x-point.x）*0.1;
point.y+=（pointer.y-point.y）*0.1;
}
//----跳舞事件----
if（this!
==dancerDrag）{
point.fn&&point.fn（16*Math.sqrt（this.size）this.dir）;
}
//----集合----
point.vx=point.x-point.px;
point.vy=point.y-point.py;
point.px=point.x;
point.py=point.y;
point.vx*=0.995;
point.vy*=0.995;
point.x+=point.vx;
point.y+=point.vy+0.01;
}
//----地面----
for（constlixxxxnkofthis.lixxxxnks）{
constp1=lixxxxnk.p1;
if（p1.y>canvas.height*ground-lixxxxnk.size*0.5）{
p1.y=canvas.height*ground-lixxxxnk.size*0.5;
p1.x-=p1.vx;
p1.vx=0;
p1.vy=0;
}
}
//----自动居中----
this.points[3].x+=（this.x-this.points[3].x）*0.001;
}
draw（）{
for（constlixxxxnkofthis.lixxxxnks）{
if（lixxxxnk.size）{
constdx=lixxxxnk.p1.x-lixxxxnk.p0.x;
constdy=lixxxxnk.p1.y-lixxxxnk.p0.y;
consta=Math.atan2（dydx）;
constd=Math.sqrt（dx*dx+dy*dy）;
//----阴影----
ctx.save（）;
ctx.translate（lixxxxnk.p0.x+lixxxxnk.size*0.25lixxxxnk.p0.y+lixxxxnk.size*0.25）;
ctx.rotate（a）;
ctx.drawImage（
lixxxxnk.shadow
-lixxxxnk.size*0.5
-lixxxxnk.size*0.5
d+lixxxxnk.size
lixxxxnk.size
）;
ctx.restore（）;
//----滑动----
ctx.save（）;
ctx.translate（lixxxxnk.p0.xlixxxxnk.p0.y）;
ctx.rotate（a）;
ctx.drawImage（
lixxxxnk.image
-lixxxxnk.size*0.5
-lixxxxnk.size*0.5
d+lixxxxnk.size
lixxxxnk.size
）;
ctx.restore（）;
}
}
}
}
Robot.lixxxxnk=classlixxxxnk{
constructor（parentp0p1distsizelightforcedisk）{
//----缓存----
functionstroke（coloraxis）{
constimage=document.createElement（"canvas"）;
image.width=dist+size;
image.height=size;
constict=image.getContext（"2d"）;
ict.beginPath（）;
ict.lineCap="round";
ict.lineWidth=size;
ict.strokeStyle=color;
if（disk）{
ict.arc（size*0.5+distsize*0.5size*0.502*Math.PI）;
ict.fillStyle=color;
ict.fill（）;
}else{
ict.moveTo（size*0.5size*0.5）;
ict.lineTo（size*0.5+distsize*0.5）;
ict.stroke（）;
}
if（axis）{
consts=size/10;
ict.fillStyle="#000";
ict.fillRect（size*0.5-ssize*0.5-ss*2s*2）;
ict.fillRect（size*0.5-s+distsize*0.5-ss*2s*2）;
}
returnimage;
}
this.p0=p0;
this.p1=p1;
this.distance=dist;
this.size=size;
this.light=light||1.0;
this.force=force||0.5;
this.image=stroke（
"hsl（"+parent.color+"30%"+parent.light*this.light+"%）"
true
）;
this.shadow=stroke（"rgba（0000.5）"）;
}
};
Robot.Point=classPoint{
constructor（xyfnw）{
this.x=x;
this.y=y;
this.w=w||0.5;
this.fn=fn||null;
this.px=x;
this.py=y;
this.vx=0.0;
this.vy=0.0;
}
};
//----设置canvas----
constcanvas={
init（）{
this.elem=document.querySelector（"canvas"）;
this.resize（）;
window.addEventListener（"resize"（）=>this.resize（）false）;
returnthis.elem.getContext（"2d"）;
}
resize（）{
this.width=this.elem.width=this.elem.offsetWidth;
this.height=this.elem.height=this.elem.offsetHeight;
ground=this.height>500?
0.85:
1.0;
for（leti=0;idancers[i].x=（i+2）*canvas.width/9;
}
}
};
//----设置点----
constpointer={
init（canvas）{
this.x=0;
this.y=0;
window.addEventListener（"mousemove"e=>this.move（e）false）;
canvas.elem.addEventListener（"touchmove"e=>this.move（e）false）;
window.addEventListener（"mousedown"e=>this.down（e）false）;
window.addEventListener（"touchstart"e=>this.down（e）false）;
window.addEventListener（"mouseup"e=>this.up（e）false）;
window.addEventListener（"touchend"e=>this.up（e）false）;
}
down（e）{
this.move（e）;
for（constdancerofdancers）{
for（constpointofdancer.points）{
constdx=pointer.x-point.x;
constdy=pointer.y-point.y;
constd=Math.sqrt（dx*dx+dy*dy）;
if（d<60）{
dancerDrag=dancer;
pointDrag=point;
dancer.frxxxxame=0;
}
}
}
}
up（e）{
dancerDrag=null;
}
move（e）{
lettouchMode=e.targetTouches
pointer;
if（touchMode）{
e.preventDefault（）;
pointer=touchMode[0];
}elsepointer=e;
this.x=pointer.clientX;
this.y=pointer.clientY;
}
};
//----初始化----
constdancers=[];
letground=1.0;
constctx=canvas.init（）;
pointer.init（canvas）;
letdancerDrag=null;
letpointDrag=null;
//----主要循环----
construn=（）=>{
requestAnimationfrxxxxame（run）;
ctx.clearRect（00canvas.widthcanvas.height）;
ctx.fillStyle="#222";
ctx.fillRect（00canvas.widthcanvas.height*0.15）;
ctx.fillRect（0canvas.height*0.85canvas.widthcanvas.height*0.15）;
for（constdancerofdancers）{
dancer.update（）;
dancer.draw（）;
}
};
//----机器人构造----
conststruct={
points:
[
{
x:
0
y:
-4
f（sd）{
this.y-=0.01*s;
}
}
{
x:
0
y:
-16
f（sd）{
this.y-=0.02*s*d;
}
}
{
x:
0
y:
12
f（sd）{
this.y+=0.02*s*d;
}
}
{x:
-12y:
0}
{x:
12y:
0}
{
x:
-3
y:
34
f（sd）{
if（d>0）{
this.x+=0.01*s;
this.y-=0.015*s;
}else{
this.y+=0.02*s;
}
}
}
{
x:
3
y:
34
f（sd）{
if（d>0）{
this.y+=0.02*s;
}else{
this.x-=0.01*s;
this.y-=0.015*s;
}
}
}
{
x:
-28
y:
0
f（sd）{
this.x+=this.vx*0.035;
this.y-=0.001*s;
}
}
{
x:
28
y:
0
f（sd）{
this.x+=this.vx*0.035;
this.y-=0.001*s;
}
}
{
x:
-3
y:
64
f（sd）{
this.y+=0.015*s;
if（d>0）{
this.y-=0.01*s;
}else{
this.y+=0.05*s;
}
}
}
{
x:
3
y:
64
f（sd）{
this.y+=0.015*s;
if（d>0）{
this.y+=0.05*s;
}else{
this.y-=0.01*s;
}
}
}
]
lixxxxnks:
[
{p0:
3p1:
7size:
12lum:
0.5}
{p0:
1p1:
3size:
24lum:
0.5}
{p0:
1p1:
0size:
60lum:
0.5disk:
1}
{p0:
5p1:
9size:
16lum:
0.5}
{p0:
2p1:
5size:
32lum:
0.5}
{p0:
1p1:
2size:
50lum:
1}
{p0:
6p1:
10size:
16lum:
1.5}
{p0:
2p1:
6size:
32lum:
1.5}
{p0:
4p1:
8size:
12lum:
1.5}
{p0:
1p1:
4size:
24lum:
1.5}
]
};
for（leti=0;i<6;i++）{
dancers.push（
newRobot（
i*360/7
80
（window.location.href.indexOf（"fullcpgrid"）>-1）?
3:
4
（i+2）*canvas.width/9
canvas.height*ground-300
struct
）
）;
}
run（）;
}
center;margin:
50px0;font:
normal14px/24px'MicroSoftYaHei';">
升级会员 