机器人跳舞小程序演示html.docx
- 文档编号:29719169
- 上传时间:2023-07-26
- 格式:DOCX
- 页数:17
- 大小:16.95KB
机器人跳舞小程序演示html.docx
《机器人跳舞小程序演示html.docx》由会员分享,可在线阅读,更多相关《机器人跳舞小程序演示html.docx(17页珍藏版)》请在冰豆网上搜索。
机器人跳舞小程序演示html
机器人跳舞小程序演示(html)
说明使用方式
适用浏览器:
360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.不支持Safari、IE8及
以下浏览器。
以下是程序代码
doctypehtml>
bodyhtml{
position:
absolute;
margin:
0;
padding:
0;
width:
100%;
height:
100%;
overflow:
hidden;
}
canvas{
position:
absolute;
width:
100%;
height:
100%;
background:
#000;
cursor:
pointer;
}
{
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;i dancers[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';">
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 机器人 跳舞 程序 演示 html