倚天屠龙记君临天下_战斗系统

9 样式

<style>*{box-sizing:;}
#show{padding:15 5 50 5;text-align:center;pointer-events:;border:1px solid red;width:270;}#show>.xz{vertical-align:middle;position:relative;top:80;display:inline-block;text-align:center;width:120px;border:0px solid;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js{position:relative;right:10;} #show .dr{position:relative;left:10;} #show .js, .dr{vertical-align:middle;width:auto;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{margin:5;font-size:20;width:35;height:35;display:block;top:0;position:relative;}
#btmbox{text-align:left;padding:10 5 5 5;border:1px solid green;width:270}#btmbox .js{margin:0 5;text-align:center;position:relative;width:25%;height:auto; border:1px solid;display:inline-block }#btmbox .js>button{width:100%;display:block}#btmbox .js .ql{background:linear-gradient(to right,blue 10%,white 0%);}#btmbox .js .xl{background:linear-gradient(to right,red 50%,white 0%);}#btmbox .js .tx{font-size:23;display:inline-block;height:30;width:30; border:0px solid }
[name='seled']{background:red}
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{xl:100,ql:100,tx:'🤴',dj:5,n:'wyf',zh:'王亦枫',ac:[],jn:['tbq','bgz','jxj'] },{xl:100,ql:100,tx:'👰',dj:3,n:'zzn',zh:'周芷诺',ac:[],jn:[,'emzf','tszms']},{xl:100,ql:100,tx:'👧',dj:6,n:'xl',zh:'小兰',ac:[],jn:['jxj']}]
var diren=[ {tx:'🐖',xl:100,dj:4,n:'yz',zh:'野猪',ac:[]},{tx:'🐺',xl:100,dj:1,n:'l',zh:'狼',ac:[]},{tx:'🐍',xl:100,dj:9,n:'s',zh:'蛇',ac:[]},{tx:'🧟',xl:100,dj:15,n:'yr',zh:'野人',ac:[]} ]
var wupin=[ {ty:'wp',ds:50,n:'cy',zh:'草药'},{ty:'wp',ds:30,n:'ls',zh:'灵散'} ]
var jineng={tbq:{n:'tbq',zh:'通臂拳',ql:30,gjl:25},bgz:{n:'bgz',zh:'八卦掌',ql:30,gjl:25},emzf:{n:'emzf',zh:'峨眉掌法',ql:30,gjl:25},jxj:{n:'jxj',zh:'静心决',ql:30,gjl:25},xlsbz:{n:'xlsbz',zh:'降龙十八掌',ql:30,gjl:25},qkdny:{n:'qkdny',zh:'乾坤大挪移',ql:30,gjl:25},tszms:{n:'tszms',zh:'天山折梅手',ql:30,gjl:25} }
var dqjs=0,dqjd=0,jsdrac=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz';let jndiv=jnlbf(),wpdiv=wplbf();btmbox.append(jndiv,wpdiv,jsinfolbf() );for(let a=0;a<xzstr.length;a++){let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a];switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv);juese[dqjs].jndis.style.display=''};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;};xzdiv.append(btn);}return xzdiv}
function jnlbf(){
	jnarr=['通臂拳','八卦掌','峨眉掌法'];
	let jndivbox=creEmt('div');
	for(let jsa in juese){
	 let jndiv=creEmt('div');juese[jsa].jndis=jndiv;
	for(let a in juese[jsa].jn){let jnbtn=creEmt('button');jnbtn.innerHTML=jineng[juese[jsa].jn[a]].zh; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jineng[juese[jsa].jn[a]]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';} jndivbox.append(jndiv)}
 return jndivbox }
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wupin){let wpbtn=creEmt('button');wpbtn.innerHTML=wupin[a].zh; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wupin[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].tx;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a]);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].tx; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a]);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function jsinfolbf(){ let jslb=creEmt('div');vctl.jslb={};jslb.className='jslb';for(let a in juese){let js=creEmt('div'),tx=creEmt('div'),xl=creEmt('button'),ql=creEmt('button');js.className='js';xl.className='xl';ql.className='ql';tx.className='tx';tx.innerHTML=juese[a].tx;vctl.jslb[juese[a].n]=xl;js.append(tx,xl,ql);jslb.append(js)} vctl.setjs=function(b,v){ b.style.background='linear-gradient(to right,red '+v+'%,white 0%)' };return jslb}
function intento(a,b){a.style.display='None';b.style.display='';}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{dracset();jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){acf();disud();dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
function dracset(){let jsn=0;for(let a in diren){if(jsn>=juese.length){jsn=0};diren[a].ac[0]='攻击';diren[a].ac[1]=juese[jsn];jsn++;} }
function acf(){show2.innerHTML+=jsdrac[dqjd].zh+':'+jsdrac[dqjd].ac[1].zh+'<br>';if(jsdrac[dqjd].ac[0]=='攻击'){jsdrac[dqjd].ac[1].xl-=30;}else if(jsdrac[dqjd].ac[0].ty=='wp'){ jsdrac[dqjd].ac[1].xl+=jsdrac[dqjd].ac[0].ds; } }
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac; satbsel(juese[dqjs].dis,'seled'); for(let a in juese){vctl.setjs(vctl.jslb[juese[a].n],juese[a].xl)}}
function satbsel(o,b){
for(let a in juese){juese[a].dis.setAttribute('name','')}
	o.setAttribute('name',b);}
</script>

8 修改了样式

<style>*{box-sizing:;}
#show{padding:15 5 50 5;text-align:center;pointer-events:;border:1px solid red;width:270;}#show>.xz{vertical-align:middle;position:relative;top:80;display:inline-block;text-align:center;width:120px;border:0px solid;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js{position:relative;right:10;} #show .dr{position:relative;left:10;} #show .js, .dr{vertical-align:middle;width:auto;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{margin:5;font-size:20;width:35;height:35;display:block;top:0;position:relative;}
#btmbox{text-align:left;padding:10 5 5 5;border:1px solid green;width:270}#btmbox .js{margin:0 5;text-align:center;position:relative;width:25%;height:auto; border:1px solid;display:inline-block }#btmbox .js>button{width:100%;display:block}#btmbox .js .ql{background:linear-gradient(to right,blue 10%,white 0%);}#btmbox .js .xl{background:linear-gradient(to right,red 50%,white 0%);}#btmbox .js .tx{font-size:23;display:inline-block;height:30;width:30; border:0px solid }
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{xl:100,ql:100,tx:'🧔',dj:5,n:'wyf',zh:'王亦枫',ac:[],jn:['tbq','bgz','jxj'] },{xl:100,ql:100,tx:'👩',dj:3,n:'zzn',zh:'周芷诺',ac:[],jn:[,'emzf','tszms']},{xl:100,ql:100,tx:'🧕',dj:6,n:'xl',zh:'小兰',ac:[],jn:['jxj']}]
var diren=[ {tx:'🐷',xl:100,dj:4,n:'yz',zh:'野猪',ac:[]},{tx:'狼',xl:100,dj:1,n:'l',zh:'狼',ac:[]},{tx:'蛇',xl:100,dj:9,n:'s',zh:'蛇',ac:[]},{tx:'🧟',xl:100,dj:15,n:'yr',zh:'野人',ac:[]} ]
var wupin=[ {ty:'wp',ds:50,n:'cy',zh:'草药'},{ty:'wp',ds:30,n:'ls',zh:'灵散'} ]
var jineng={tbq:{n:'tbq',zh:'通臂拳',ql:30,gjl:25},bgz:{n:'bgz',zh:'八卦掌',ql:30,gjl:25},emzf:{n:'emzf',zh:'峨眉掌法',ql:30,gjl:25},jxj:{n:'jxj',zh:'静心决',ql:30,gjl:25},xlsbz:{n:'xlsbz',zh:'降龙十八掌',ql:30,gjl:25},qkdny:{n:'qkdny',zh:'乾坤大挪移',ql:30,gjl:25},tszms:{n:'tszms',zh:'天山折梅手',ql:30,gjl:25} }
var dqjs=0,dqjd=0,jsdrac=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz';let jndiv=jnlbf(),wpdiv=wplbf();btmbox.append(jndiv,wpdiv,jsinfolbf() );for(let a=0;a<xzstr.length;a++){let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a];switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv);juese[dqjs].jndis.style.display=''};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;};xzdiv.append(btn);}return xzdiv}
function jnlbf(){
	jnarr=['通臂拳','八卦掌','峨眉掌法'];
	let jndivbox=creEmt('div');
	for(let jsa in juese){
	 let jndiv=creEmt('div');juese[jsa].jndis=jndiv;
	for(let a in juese[jsa].jn){let jnbtn=creEmt('button');jnbtn.innerHTML=jineng[juese[jsa].jn[a]].zh; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jineng[juese[jsa].jn[a]]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';} jndivbox.append(jndiv)}
 return jndivbox }
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wupin){let wpbtn=creEmt('button');wpbtn.innerHTML=wupin[a].zh; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wupin[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].tx;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a]);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].tx; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a]);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function jsinfolbf(){ let jslb=creEmt('div');vctl.jslb={};jslb.className='jslb';for(let a in juese){let js=creEmt('div'),tx=creEmt('div'),xl=creEmt('button'),ql=creEmt('button');js.className='js';xl.className='xl';ql.className='ql';tx.className='tx';tx.innerHTML=juese[a].tx;vctl.jslb[juese[a].n]=xl;js.append(tx,xl,ql);jslb.append(js)} vctl.setjs=function(b,v){ b.style.background='linear-gradient(to right,red '+v+'%,white 0%)' };return jslb}
function intento(a,b){a.style.display='None';b.style.display='';}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{dracset();jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){acf();disud();dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
function dracset(){let jsn=0;for(let a in diren){if(jsn>=juese.length){jsn=0};diren[a].ac[0]='攻击';diren[a].ac[1]=juese[jsn];jsn++;} }
function acf(){show2.innerHTML+=jsdrac[dqjd].zh+':'+jsdrac[dqjd].ac[1].zh+'<br>';if(jsdrac[dqjd].ac[0]=='攻击'){jsdrac[dqjd].ac[1].xl-=30;}else if(jsdrac[dqjd].ac[0].ty=='wp'){ jsdrac[dqjd].ac[1].xl+=jsdrac[dqjd].ac[0].ds; } }
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;for(let a in juese){vctl.setjs(vctl.jslb[juese[a].n],juese[a].xl)}}
</script>

7

<style>
#show{pointer-events:;border:1px solid red;width:100%;}#show>.xz{display:inline-block;text-align:center;width:120px;border:1px solid red;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js, .dr{vertical-align:top;width:auto;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{font-size:20;width:35;height:35;display:block;top:0;position:relative;}#btmbox .js{width:20%;height:auto; border:1px solid;display:inline-block }
#btmbox .js>button{width:100%;display:block}
#btmbox .js .ql{background:linear-gradient(to right,blue 10%,white 0%);}#btmbox .js .xl{background:linear-gradient(to right,red 50%,white 0%);}
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{xl:100,ql:100,tx:'🧔',dj:5,n:'wyf',zh:'王亦枫',ac:[],jn:['tbq','bgz','jxj'] },{xl:100,ql:100,tx:'👩',dj:3,n:'zzn',zh:'周芷诺',ac:[],jn:[,'emzf','tszms']},{xl:100,ql:100,tx:'🧕',dj:6,n:'xl',zh:'小兰',ac:[],jn:['jxj']}]
var diren=[ {tx:'🐷',xl:100,dj:4,n:'yz',zh:'野猪',ac:[]},{tx:'狼',xl:100,dj:1,n:'l',zh:'狼',ac:[]},{tx:'蛇',xl:100,dj:9,n:'s',zh:'蛇',ac:[]},{tx:'🧟',xl:100,dj:15,n:'yr',zh:'野人',ac:[]} ]
var wupin=[ {ty:'wp',ds:50,n:'cy',zh:'草药'},{ty:'wp',ds:30,n:'ls',zh:'灵散'} ]
var jineng={tbq:{n:'tbq',zh:'通臂拳',ql:30,gjl:25},bgz:{n:'bgz',zh:'八卦掌',ql:30,gjl:25},emzf:{n:'emzf',zh:'峨眉掌法',ql:30,gjl:25},jxj:{n:'jxj',zh:'静心决',ql:30,gjl:25},xlsbz:{n:'xlsbz',zh:'降龙十八掌',ql:30,gjl:25},qkdny:{n:'qkdny',zh:'乾坤大挪移',ql:30,gjl:25},tszms:{n:'tszms',zh:'天山折梅手',ql:30,gjl:25} }
var dqjs=0,dqjd=0,jsdrac=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz';let jndiv=jnlbf(),wpdiv=wplbf();btmbox.append(jndiv,wpdiv,jsinfolbf() );for(let a=0;a<xzstr.length;a++){let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a];switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv);juese[dqjs].jndis.style.display=''};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;};xzdiv.append(btn);}return xzdiv}
function jnlbf(){
	jnarr=['通臂拳','八卦掌','峨眉掌法'];
	let jndivbox=creEmt('div');
	for(let jsa in juese){
	 let jndiv=creEmt('div');juese[jsa].jndis=jndiv;
	for(let a in juese[jsa].jn){let jnbtn=creEmt('button');jnbtn.innerHTML=jineng[juese[jsa].jn[a]].zh; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jineng[juese[jsa].jn[a]]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';} jndivbox.append(jndiv)}
 return jndivbox }
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wupin){let wpbtn=creEmt('button');wpbtn.innerHTML=wupin[a].zh; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wupin[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].tx;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a]);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].tx; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a]);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function jsinfolbf(){ let jslb=creEmt('div');vctl.jslb={};jslb.className='jslb';for(let a in juese){let js=creEmt('div'),tx=creEmt('div'),xl=creEmt('button'),ql=creEmt('button');js.className='js';xl.className='xl';ql.className='ql';tx.innerHTML=juese[a].tx;vctl.jslb[juese[a].n]=xl;js.append(tx,xl,ql);jslb.append(js)} vctl.setjs=function(b,v){ b.style.background='linear-gradient(to right,red '+v+'%,white 0%)' };return jslb}
function intento(a,b){a.style.display='None';b.style.display='';}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{dracset();jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){acf();disud();dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
function dracset(){let jsn=0;for(let a in diren){if(jsn>=juese.length){jsn=0};diren[a].ac[0]='攻击';diren[a].ac[1]=juese[jsn];jsn++;} }
function acf(){show2.innerHTML+=jsdrac[dqjd].zh+':'+jsdrac[dqjd].ac[1].zh+'<br>';if(jsdrac[dqjd].ac[0]=='攻击'){jsdrac[dqjd].ac[1].xl-=30;}else if(jsdrac[dqjd].ac[0].ty=='wp'){ jsdrac[dqjd].ac[1].xl+=jsdrac[dqjd].ac[0].ds; } }
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;for(let a in juese){vctl.setjs(vctl.jslb[juese[a].n],juese[a].xl)}}
</script>

6 ac攻击指定

<style>
#show{pointer-events:;border:1px solid red;width:100%;}#show>.xz{display:inline-block;text-align:center;width:120px;border:1px solid red;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js, .dr{width:60px;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{top:0;position:relative;}#btmbox .js{width:20%;height:auto; border:1px solid;display:inline-block }
#btmbox .js>button{width:100%;display:block}
#btmbox .js .ql{background:linear-gradient(to right,blue 10%,white 0%);}#btmbox .js .xl{background:linear-gradient(to right,red 50%,white 0%);}
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{xl:100,ql:100,tx:'🧔',dj:5,n:'wyf',zh:'王亦枫',ac:[]},{xl:100,ql:100,tx:'👩',dj:3,n:'zzn',zh:'周芷诺',ac:[]},{xl:100,ql:100,tx:'🧕',dj:6,n:'xl',zh:'小兰',ac:[]}]
var diren=[ {xl:100,dj:4,n:'yz',zh:'野猪',ac:[]},{xl:100,dj:1,n:'l',zh:'狼',ac:[]},{xl:100,dj:9,n:'s',zh:'蛇',ac:[]},{xl:100,dj:15,n:'yr',zh:'野人',ac:[]} ]
var dqjs=0,dqjd=0,jsdrac=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz';let jndiv=jnlbf(),wpdiv=wplbf();btmbox.append(jndiv,wpdiv,jsinfolbf() );for(let a=0;a<xzstr.length;a++){let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a];switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv)};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;};xzdiv.append(btn);}return xzdiv}
function jnlbf(){jnarr=['通臂拳','八卦掌','峨眉掌法'];let jndiv=creEmt('div');for(let a in jnarr){let jnbtn=creEmt('button');jnbtn.innerHTML=jnarr[a]; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jnarr[a]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';}return jndiv}
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wparr){let wpbtn=creEmt('button');wpbtn.innerHTML=wparr[a]; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wparr[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].zh;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a]);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].zh; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a]);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function jsinfolbf(){ let jslb=creEmt('div');vctl.jslb={};jslb.className='jslb';for(let a in juese){let js=creEmt('div'),tx=creEmt('div'),xl=creEmt('button'),ql=creEmt('button');js.className='js';xl.className='xl';ql.className='ql';tx.innerHTML=juese[a].tx;vctl.jslb[juese[a].n]=xl;js.append(tx,xl,ql);jslb.append(js)} vctl.setjs=function(b,v){ b.style.background='linear-gradient(to right,red '+v+'%,white 0%)' };return jslb}
function intento(a,b){a.style.display='None';b.style.display='';}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{dracset();jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){acf();disud();dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
function dracset(){let jsn=0;for(let a in diren){if(jsn>=juese.length){jsn=0};diren[a].ac[1]=juese[jsn];jsn++;} }
function acf(){show2.innerHTML+=jsdrac[dqjd].zh+':'+jsdrac[dqjd].ac[1].zh+'<br>';jsdrac[dqjd].ac[1].xl-=30;}
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;for(let a in juese){vctl.setjs(vctl.jslb[juese[a].n],juese[a].xl)}}
</script>

5 角色info显示

<style>
#show{pointer-events:;border:1px solid red;width:100%;}#show>.xz{display:inline-block;text-align:center;width:120px;border:1px solid red;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js, .dr{width:60px;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{top:0;position:relative;}#btmbox .js{width:20%;height:auto; border:1px solid;display:inline-block }
#btmbox .js>button{width:100%;display:block}
#btmbox .js .ql{background:linear-gradient(to right,blue 10%,white 0%);}#btmbox .js .xl{background:linear-gradient(to right,red 50%,white 0%);}
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{xl:100,ql:100,tx:'🧔',dj:5,n:'wyf',zh:'王亦枫',ac:[]},{xl:100,ql:100,tx:'👩',dj:3,n:'zzn',zh:'周芷诺',ac:[]},{xl:100,ql:100,tx:'🧕',dj:6,n:'xl',zh:'小兰',ac:[]}]
var diren=[ {dj:4,n:'yz',zh:'野猪',ac:[]},{dj:1,n:'l',zh:'狼',ac:[]},{dj:9,n:'s',zh:'蛇',ac:[]},{dj:15,n:'yr',zh:'野人',ac:[]} ]
var dqjs=0,dqjd=0,jsdrac=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){
let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz'
let jndiv=jnlbf(),wpdiv=wplbf();
btmbox.append(jndiv,wpdiv,jsinfolbf() )
for(let a=0;a<xzstr.length;a++){
let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a]
switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv)};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;}
xzdiv.append(btn);}return xzdiv}
function jnlbf(){jnarr=['通臂拳','八卦掌','峨眉掌法'];let jndiv=creEmt('div');for(let a in jnarr){let jnbtn=creEmt('button');jnbtn.innerHTML=jnarr[a]; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jnarr[a]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';}return jndiv}
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wparr){let wpbtn=creEmt('button');wpbtn.innerHTML=wparr[a]; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wparr[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].zh;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a].zh);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].zh; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a].zh);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function jsinfolbf(){ let jslb=creEmt('div');vctl.jslb={};jslb.className='jslb';for(let a in juese){let js=creEmt('div'),tx=creEmt('div'),xl=creEmt('button'),ql=creEmt('button');js.className='js';xl.className='xl';ql.className='ql';tx.innerHTML=juese[a].tx;vctl.jslb[juese[a].n]=xl;js.append(tx,xl,ql);jslb.append(js)} vctl.setjs=function(b,v){ b.style.background='linear-gradient(to right,red '+v+'%,white 0%)' };return jslb}

function intento(a,b){a.style.display='None';b.style.display='';}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){juese[0].xl-=10;disud();dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;for(let a in juese){vctl.setjs(vctl.jslb[juese[a].n],juese[a].xl)}}
</script>

4增加 行动动画 执行顺序（按等级排序）

<style>
#show{pointer-events:;border:1px solid red;width:100%;}#show>.xz{display:inline-block;text-align:center;width:120px;border:1px solid red;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}#show .js, .dr{width:60px;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button,#show .dr>button{top:0;position:relative;}
</style>
<div id='show1'></div><div id='show'></div><div id='btmbox'></div><div id='show2'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={ste:0,left:0,sd:0,fn:0,siv:null};
var juese=[{dj:5,n:'wyf',zh:'王亦枫',ac:[]},{dj:3,n:'zzn',zh:'周芷诺',ac:[]},{dj:6,n:'xl',zh:'小兰',ac:[]}]
var diren=[ {dj:4,n:'yz',zh:'野猪',ac:[]},{dj:1,n:'l',zh:'狼',ac:[]},{dj:9,n:'s',zh:'蛇',ac:[]},{dj:15,n:'yr',zh:'野人',ac:[]} ]
var dqjs=0,dqjd=0,jsdrac=[]
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){
let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz'
let jndiv=jnlbf(),wpdiv=wplbf();
btmbox.append(jndiv,wpdiv)
for(let a=0;a<xzstr.length;a++){
let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a]
switch(xzstr[a]){case '技':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.drdiv,1);*/ intento(wpdiv,jndiv)};break;case '物':btn.onclick=function(){pe01(xzdiv,0);/*pe01(vctl.jsdiv,1);*/ intento(jndiv,wpdiv)};break;case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;}
xzdiv.append(btn);}return xzdiv}
function jnlbf(){jnarr=['通臂拳','八卦掌','峨眉掌法'];let jndiv=creEmt('div');for(let a in jnarr){let jnbtn=creEmt('button');jnbtn.innerHTML=jnarr[a]; jnbtn.onclick=function(){pe01(vctl.drdiv,1);disoff(jndiv); juese[dqjs].ac.push(jnarr[a]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';}return jndiv}
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wparr){let wpbtn=creEmt('button');wpbtn.innerHTML=wparr[a]; wpbtn.onclick=function(){pe01(vctl.jsdiv,1);disoff(wpdiv); juese[dqjs].ac.push(wparr[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){jsdrac.push(juese[a]);juese[a].ty='js';let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].zh;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a].zh);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){/*let drarr=['野猪','狼','蛇','野人'];*/let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in diren){jsdrac.push(diren[a]);diren[a].ty='dr';let drbtn=creEmt('button');diren[a].dis=drbtn;drbtn.innerHTML=diren[a].zh; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(diren[a].zh);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function intento(a,b){a.style.display='None';b.style.display='';}
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{jdacpx(jsdrac);pe01(vctl.xzdiv,0) ;dqjs=0; vctl.siv=setInterval('anido()',50) } }
function anido(){let dir='left';if(jsdrac[dqjd].ty=='dr'){dir='right'};jsdrac[dqjd].dis.style[dir]=vctl.left;if(vctl.left<10){vctl.sd++}else{vctl.sd--};vctl.left+=vctl.sd;if(vctl.left==0){vctl.ste++};if(vctl.ste==1){vctl.ste=0;vctl.sd=0; if(dqjd<jsdrac.length){dqjd++}else{clearInterval(vctl.siv);} };if(dqjd>=jsdrac.length){jsacrest();dqjd=0;clearInterval(vctl.siv);};show1.innerHTML=vctl.left;}
function jsacrest(){pe01(vctl.xzdiv,1);for(let a in juese){juese[a].ac=[]}}
function jdacpx(jdac){for(let a=0;a<jdac.length;a++){if(a<jdac.length-1){ let adj=jdac[a].dj,bdj=jdac[a+1].dj;if(adj<bdj){let temp=jdac[a];jdac[a]=jdac[a+1];jdac[a+1]=temp;for(let b=a;b>0;b--){let cdj=jdac[b].dj,ddj=jdac[b-1].dj;if(cdj>ddj){let temp=jdac[b];jdac[b]=jdac[b-1];jdac[b-1]=temp;} }}}}/*for(let a=0;a<jdac.length;a++){show2.innerHTML+=jdac[a].dj+"<br>"}*/}
</script>

1行动中动画

<style>
#me{position:relative}
</style>
<p id='show'>NULL</p>
<button id='me'>我</button>
<script>

let siv=null,bste='slp';
me.onclick=function(){if(bste=='slp'){bste='mov';siv=setInterval('gog()',50);}}
left=0,sd=0,ste=0;
function gog(){
me.style.left=left;
if(left<5){sd++}else{sd--}
left+=sd;
if(left==0){ste++}
if(ste==1){bste='slp';ste=0;sd=0;clearInterval(siv)}
show.innerHTML=left+','+sd+','+ste
}
</script>

3

<style>
#show{pointer-events:;border:1px solid red;width:100%;}#show>.xz{display:inline-block;text-align:center;width:120px;border:1px solid red;}#show>div>.empty{visibility:hidden}#show>.xz>button{vertical-align:middle;width:40;height:40}
#show .js, .dr{width:60px;border:1px solid;display:inline-block;pointer-events:none;}#show .js>button{top:0;position:relative;}
</style>
<div id='show1'></div>
<div id='show'></div>
<div id='btmbox'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
var vctl={fn:0,siv:null};
var juese=[{n:'wyf',zh:'王亦枫',ac:[]},{n:'zzn',zh:'周芷诺',ac:[]},{n:'xl',zh:'小兰',ac:[]}]
var dqjs=0;dqxz=[];
show.append(jslbf(),xdxzf(),drlbf());disud();
function xdxzf(){
let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');vctl.xzdiv=xzdiv;xzdiv.className='xz'
let jndiv=jnlbf(),wpdiv=wplbf()
btmbox.append(jndiv,wpdiv)
for(let a=0;a<xzstr.length;a++){
let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a]
switch(xzstr[a]){
case '技':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); intento(wpdiv,jndiv)};break;
case '物':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.jsdiv,1); intento(jndiv,wpdiv)};break;
case '攻':btn.onclick=function(){pe01(xzdiv,0);pe01(vctl.drdiv,1); juese[dqjs].ac.push('攻');disud(); };break;

}
xzdiv.append(btn);}return xzdiv}

function jnlbf(){jnarr=['通臂拳','八卦掌','峨眉掌法'];let jndiv=creEmt('div');for(let a in jnarr){let jnbtn=creEmt('button');jnbtn.innerHTML=jnarr[a]; jnbtn.onclick=function(){disoff(jndiv); juese[dqjs].ac.push(jnarr[a]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';}return jndiv}
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wparr){let wpbtn=creEmt('button');wpbtn.innerHTML=wparr[a]; wpbtn.onclick=function(){disoff(wpdiv); juese[dqjs].ac.push(wparr[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){/*let jsarr=['王亦枫','周芷诺','小兰'];*/let jsdiv=creEmt('div');vctl.jsdiv=jsdiv;jsdiv.className='js';for(let a in juese){let jsbtn=creEmt('button');juese[a].dis=jsbtn;jsbtn.innerHTML=juese[a].zh;jsbtn.onclick=function(){pe01(jsdiv,0); juese[dqjs].ac.push(juese[a].zh);disud();xzjsf(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){let drarr=['野猪','狼','蛇','野人'];let drdiv=creEmt('div');vctl.drdiv=drdiv;drdiv.className='dr';for(let a in drarr){let drbtn=creEmt('button');drbtn.innerHTML=drarr[a]; drbtn.onclick=function(){pe01(drdiv,0); juese[dqjs].ac.push(drarr[a]);disud();xzjsf(); } ;drdiv.append(drbtn);}return drdiv}
function intento(a,b){a.style.display='None';b.style.display='';}
function disud(){show1.innerHTML=juese[dqjs].zh+':'+juese[dqjs].ac;}
function pe01(o,n){s='auto';if(n==0){s='none'};o.style.pointerEvents=s}
function disoff(o){o.style.display='None'}
function xzjsf(){pe01(vctl.xzdiv,1);dqjs++;if(dqjs<juese.length){disud();}else{dqjs=0; vctl.siv=setInterval('anido()',100) } }
function anido(){if(vctl.fn>30){ clearInterval(vctl.siv) }
//juese[dqjs].dis.style.top=vctl.fn;
show1.innerHTML=vctl.fn;vctl.fn++;}
</script>

2

<style>
#show{pointer-events:;border:1px solid red;width:100%;}
#show>.xz{text-align:center;width:120px;border:1px solid red;}
#show>div>.empty{visibility:hidden}
#show>.xz>button{vertical-align:middle;width:40;height:40}
#show .js, .dr{pointer-events:none;}

</style>
<div id='show1'></div>
<div id='show'></div>
<div id='btmbox'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
show.append(jslbf(),xdxzf(),drlbf())
var juese=[{n:'wyf',ac:[]},{n:'zzn',ac:[]},{n:'xl',ac:[]}]
var dqjs=0;dqxz=[]
disud();
function xdxzf(){
let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div');xzdiv.className='xz'
let jndiv=jnlbf(),wpdiv=wplbf()
btmbox.append(jndiv,wpdiv)
for(let a=0;a<xzstr.length;a++){
let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a]
switch(xzstr[a]){
case '技':btn.onclick=function(){intento(wpdiv,jndiv)};break;
case '物':btn.onclick=function(){intento(jndiv,wpdiv)};break;
case '攻':btn.onclick=function(){ juese[dqjs].ac.push('攻');disud(); };break;

}
xzdiv.append(btn);}return xzdiv}

function jnlbf(){jnarr=['通臂拳','八卦掌','峨眉掌法'];let jndiv=creEmt('div');for(let a in jnarr){let jnbtn=creEmt('button');jnbtn.innerHTML=jnarr[a]; jnbtn.onclick=function(){ juese[dqjs].ac.push(jnarr[a]);disud(); } ;jndiv.append(jnbtn);jndiv.style.display='None';}return jndiv}
function wplbf(){wparr=['草药','灵散'];let wpdiv=creEmt('div');for(let a in wparr){let wpbtn=creEmt('button');wpbtn.innerHTML=wparr[a]; wpbtn.onclick=function(){ juese[dqjs].ac.push(wparr[a]);disud(); } ; wpdiv.append(wpbtn);wpdiv.style.display='None';}return wpdiv}
function jslbf(){let jsarr=['王亦枫','周芷诺','小兰'];let jsdiv=creEmt('div');jsdiv.className='js';for(let a in jsarr){let jsbtn=creEmt('button');jsbtn.innerHTML=jsarr[a];jsbtn.onclick=function(){ juese[dqjs].ac.push(jsarr[a]);disud(); } ;jsdiv.append(jsbtn);}return jsdiv}
function drlbf(){let drarr=['野猪','狼','蛇','野人'];let drdiv=creEmt('div');drdiv.className='dr';for(let a in drarr){let drbtn=creEmt('button');drbtn.innerHTML=drarr[a]; drbtn.onclick=function(){ juese[dqjs].ac.push(drarr[a]);disud();dqjs++ } ;drdiv.append(drbtn);}return drdiv}
function intento(a,b){a.style.display='None';b.style.display='';}
function disud(){show1.innerHTML=juese[dqjs].n+':'+juese[dqjs].ac;}
</script>

1

<style>
#show{border:1px solid red;width:100%;}
#show>div{text-align:center;width:120px;border:1px solid red;}
#show>div>.empty{visibility:hidden}
#show>div>button{width:40;height:40}
</style>
<div id='show'></div>
<script>
var creEmt=function(n){return document.createElement(n)}
show.append(xdxzf())
function xdxzf(){
let xzstr='0自0技攻物0逃0',xzdiv=creEmt('div')
for(let a=0;a<xzstr.length;a++){
let btn=creEmt('button');if(xzstr[a]=='0'){btn.className='empty';}btn.innerHTML=xzstr[a]
xzdiv.append(btn);
}return xzdiv}
</script>