步遥情感网

全部频道

您的当前位置：首页诘屈聱牙之javascript中国象棋_javascript技巧

诘屈聱牙之javascript中国象棋_javascript技巧

来源：步遥情感网

IE6.0 Only
非XHTML标准，可能IE 7.0也看不了....哈哈
蓝方先走

<style> 
* { font:24px arial, "宋体"; font-weight:bold; color:white; cursor:default; } 
table { table-layout:fixed; border-collapse:collapse; position:absolute; left:50px; top:50px; } 
td { width:80px; height:80px; border:1px solid silver; color:black; text-align:center; line-height:80px; }

img.i1 { width:78px; height:78px; } 
img.i2 { width:49px; height:49px; } 
img.i3 { width:25px; height:49px; }

.chessman_red { background:url(/attachments/2007/3/29/20070329_2187cc5e9def581951f2v22EfdUSXQ7J.jpg); width:50px; height:50px; line-height:50px; text-align:center; } 
.chessman_blue { background:url(/attachments/2007/3/29/20070329_5caa80c54f776b93bd582BwraVRWXf43.jpg); width:50px; height:50px; line-height:50px; text-align:center; } 
</style> 
 
var tb; 
var cch=new Array(); 
var his=new Array(); 
var players=["red","blue"]; 
var curPlayer=1;

window.onload=function(){ 
 
 document.onselectstart=function(){ return(false); } 
 
 document.onclick=do_click; 
 document.oncontextmenu=do_context; 
 
 tb=document.createElement("table"); 
 document.body.appendChild(tb); 
 
 for(var i=0;i<9;i++){ 
 r=tb.insertRow(); 
 if(i==4){ 
 c=r.insertCell(); 
 c.colSpan=8; 
 c.style.width="720px"; 
 c.style.fontSize="42px"; 
 c.style.fontFamily="隶书"; 
 c.innerText="楚 河 汉 界"; 
 continue; 
 } 
 for(var j=0;j<8;j++){ 
 c=r.insertCell(); 
 } 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="291"; 
 top="51"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="371"; 
 top="51"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="291"; 
 top="131"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="371"; 
 top="131"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="291"; 
 top="611"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="371"; 
 top="611"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_fec757c6d7874546161f8TGsDqEABNts.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="291"; 
 top="691"; 
 } 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_3f2ffb6cdf0bda991381AOcfwLJOmIcK.jpg"; 
 tmp.className="i1"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="371"; 
 top="691"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="106"; 
 top="186"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="586"; 
 top="186"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="106"; 
 top="586"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="586"; 
 top="586"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="186"; 
 top="266"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="346"; 
 top="266"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="506"; 
 top="266"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="186"; 
 top="506"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="346"; 
 top="506"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0bf3ba9aa9f7af079806V71jCPmo4YgX.jpg"; 
 tmp.className="i2"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="506"; 
 top="506"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0b05dbadff2eb90fdc79Ftu6O43rTus6.jpg"; 
 tmp.className="i3"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="50"; 
 top="266"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_0b05dbadff2eb90fdc79Ftu6O43rTus6.jpg"; 
 tmp.className="i3"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="50"; 
 top="506"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_f751e991e2d883fd916262Mzpct8ylkt.jpg"; 
 tmp.className="i3"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="665"; 
 top="266"; 
 } 
 
 tmp=new Image(); 
 tmp.src="https://www.gxlcms.com/attachments/2007/3/29/20070329_f751e991e2d883fd916262Mzpct8ylkt.jpg"; 
 tmp.className="i3"; 
 document.body.appendChild(tmp); 
 with(tmp.style){ 
 position="absolute"; 
 left="665"; 
 top="506"; 
 } 
 
 
 createChessman("車",0,0,"red"); 
 createChessman("車",8,0,"red"); 
 createChessman("馬",1,0,"red"); 
 createChessman("馬",7,0,"red"); 
 createChessman("炮",1,2,"red"); 
 createChessman("炮",7,2,"red"); 
 createChessman("相",2,0,"red"); 
 createChessman("相",6,0,"red"); 
 createChessman("仕",3,0,"red"); 
 createChessman("仕",5,0,"red"); 
 createChessman("帅",4,0,"red"); 
 createChessman("兵",0,3,"red"); 
 createChessman("兵",2,3,"red"); 
 createChessman("兵",4,3,"red"); 
 createChessman("兵",6,3,"red"); 
 createChessman("兵",8,3,"red"); 
 
 createChessman("車",0,9,"blue"); 
 createChessman("車",8,9,"blue"); 
 createChessman("馬",1,9,"blue"); 
 createChessman("馬",7,9,"blue"); 
 createChessman("炮",1,7,"blue"); 
 createChessman("炮",7,7,"blue"); 
 createChessman("象",2,9,"blue"); 
 createChessman("象",6,9,"blue"); 
 createChessman("士",3,9,"blue"); 
 createChessman("士",5,9,"blue"); 
 createChessman("将",4,9,"blue"); 
 createChessman("卒",0,6,"blue"); 
 createChessman("卒",2,6,"blue"); 
 createChessman("卒",4,6,"blue"); 
 createChessman("卒",6,6,"blue"); 
 createChessman("卒",8,6,"blue"); 
 
 
}

function createChessman(text,x,y,player){ 
 var nd=document.createElement("div"); 
 nd.className="chessman_"+player; 
 nd.innerText=text; 
 nd.player=player; 
 
 nd.moveTo=chessman_moveTo; 
 nd.destory=chessman_destory; 
 
 document.body.appendChild(nd); 
 
 nd.moveTo(x,y,true); 
 
}

function chessman_moveTo(x,y,force){ 
 var mi, ma, mn; 
 if(!force){ 
 switch(this.innerText){ 
 case "車": 
 if(this.x!=x&&this.y!=y)return(false); 
 if(this.x==x){ 
 mi=y>this.y?this.y:y; 
 ma=y>this.y?y:this.y; 
 for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])return(false); 
 }else{ 
 mi=x>this.x?this.x:x; 
 ma=x>this.x?x:this.x; 
 for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])return(false); 
 } 
 break; 
 case "馬": 
 if(!((Math.abs(this.x-x)==2&&Math.abs(this.y-y)==1)||(Math.abs(this.x-x)==1&&Math.abs(this.y-y)==2)))return(false); 
 if(Math.abs(this.x-x)==2&&cch[this.y*9+(this.x+x)/2])return(false); 
 if(Math.abs(this.y-y)==2&&cch[(this.y+y)/2*9+this.x])return(false); 
 break; 
 case "士": case "仕": 
 if(x<3||x>5||(!(y<3||y>6))||Math.abs(this.x-x)!=1||Math.abs(this.y-y)!=1)return(false); 
 break; 
 case "相": 
 if(Math.abs(this.x-x)!=2||Math.abs(this.y-y)!=2||y>4)return(false); 
 if(cch[(this.y+y)/2*9+(this.x+x)/2])return(false); 
 break; 
 case "象": 
 if(Math.abs(this.x-x)!=2||Math.abs(this.y-y)!=2||y<5)return(false); 
 if(cch[(this.y+y)/2*9+(this.x+x)/2])return(false); 
 break; 
 case "帅": case "将": 
 if(x<3||x>5||(!(y<3||y>6))||(!((Math.abs(this.x-x)==1&&Math.abs(this.y-y)==0)||(Math.abs(this.x-x)==0&&Math.abs(this.y-y)==1))))return(false); 
 break; 
 case "兵": 
 //if(curPlayer%2==0){ 
 if(y<5){ 
 if(y-this.y!=1)return(false); 
 }else{ 
 if(!((y-this.y==1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
 } 
 break; 
 //}else{ 
 if(y>4){ 
 if(y-this.y!=-1)return(false); 
 }else{ 
 if(!((y-this.y==-1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
 } 
 //} 
 break; 
 case "卒": 
 //if(curPlayer%2==0){ 
 if(y>4){ 
 if(y-this.y!=-1)return(false); 
 }else{ 
 if(!((y-this.y==-1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
 } 
 break; 
 //}else{ 
 if(y<5){ 
 if(y-this.y!=1)return(false); 
 }else{ 
 if(!((y-this.y==1&&x==this.x)||(y==this.y&&Math.abs(this.x-x)==1)))return(false); 
 } 
 
 //} 
 break; 
 case "炮": 
 if(this.x!=x&&this.y!=y)return(false); 
 if(cch[y*9+x]&&cch[y*9+x].player!=this.player){ 
 mn=0; 
 if(this.x==x){ 
 mi=y>this.y?this.y:y; 
 ma=y>this.y?y:this.y; 
 for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])mn++; 
 if(mn!=1)return(false); 
 }else{ 
 mi=x>this.x?this.x:x; 
 ma=x>this.x?x:this.x; 
 for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])mn++; 
 if(mn!=1)return(false); 
 } 
 }else{ 
 if(this.x==x){ 
 mi=y>this.y?this.y:y; 
 ma=y>this.y?y:this.y; 
 for(var i=mi+1;i<ma;i++)if(cch[i*9+this.x])return(false); 
 }else{ 
 mi=x>this.x?this.x:x; 
 ma=x>this.x?x:this.x; 
 for(var i=mi+1;i<ma;i++)if(cch[this.y*9+i])return(false); 
 } 
 } 
 break; 
 case "": 
 
 break; 
 } 
 } 
 
 cch[this.y*9+this.x]=null; 
 cch[y*9+x]=this; 
 
 if(!force)his.push("move "+this.player+" "+this.innerText+" "+this.x+","+this.y+" "+x+","+y); 
 this.style.position="absolute"; 
 this.style.left=25+x*80; 
 this.style.top=25+y*80; 
 this.x=x; 
 this.y=y; 
 return(true); 
}

function chessman_destory(){ 
 var tmp; 
 his.push("destory "+this.player+" "+this.innerText+" "+this.x+","+this.y); 
 tmp=document.createElement("div"); 
 tmp.className="chessman_"+this.player; 
 tmp.innerText=this.innerText; 
 tmp.style.float="left"; 
 eval("d_his_"+this.player).appendChild(tmp); 
 
 this.parentNode.removeChild(this); 
 
}

function exchange(){ 
 var x, y; 
 var ccch=new Array(); 
 for(var i=0;i<cch.length;i++){ 
 if(!cch[i])continue; 
 x=i%9; 
 y=parseInt(i/9); 
 ccch[(9-y)*9+x]=cch[i]; 
 } 
 for(var i=0;i<ccch.length;i++){ 
 if(!ccch[i])continue; 
 x=i%9; 
 y=parseInt(i/9); 
 ccch[i].moveTo(x,y,true); 
 } 
 cch=ccch; 
}

function do_click(){ 
 var x, y; 
 var o=event.srcElement; 
 
 if(o.player){ 
 if(document.currentChessman){ 
 if(document.currentChessman.player==o.player){ 
 document.currentChessman.style.border=""; 
 document.currentChessman=o; 
 document.currentChessman.style.border="1px solid "+document.currentChessman.player; 
 }else{ 
 if(!document.currentChessman.moveTo(o.x,o.y))return; 
 o.destory(); 
 document.currentChessman.style.border=""; 
 document.currentChessman=null; 
 //exchange(); 
 curPlayer++; 
 } 
 }else{ 
 if(o.player!=players[curPlayer%2])return; 
 document.currentChessman=o; 
 document.currentChessman.style.border="1px solid "+document.currentChessman.player; 
 } 
 }else{ 
 if(document.currentChessman){ 
 if(((event.x-50)%80>25&&(event.x-50)%80<55)||((event.y-50)%80>25&&(event.y-50)%80<55))return; 
 x=Math.round((event.x+document.body.scrollLeft-50)/80); 
 y=Math.round((event.y+document.body.scrollTop-50)/80); 
 if(x>-1&&x<9&&y>-1&&y<10){ 
 if(!document.currentChessman.moveTo(x,y))return; 
 document.currentChessman.style.border=""; 
 document.currentChessman=null; 
 //exchange(); 
 curPlayer++; 
 } 
 } 
 } 
}

function do_context(){ 
 if(document.currentChessman){ 
 document.currentChessman.style.border=""; 
 document.currentChessman=null; 
 return(false); 
 } 
}

function undo(){ 
 var o, s, t, p, x1, x2, x3, y1, y2, y3; 
 if(his.length==0)return; 
 s=his.pop().split(" "); 
 if(s[0]=="move"){ 
 x1=Number(s[3].split(",")[0]); 
 y1=Number(s[3].split(",")[1]); 
 x2=Number(s[4].split(",")[0]); 
 y2=Number(s[4].split(",")[1]); 
 
 o=cch[y2*9+x2]; 
 o.moveTo(x1,y1,true); 
 curPlayer--; 
 
 }else if(s[0]=="destory"){ 
 p=s[1]; 
 t=s[2]; 
 x1=Number(s[3].split(",")[0]); 
 y1=Number(s[3].split(",")[1]); 
 
 s=his.pop().split(" "); 
 x2=Number(s[3].split(",")[0]); 
 y2=Number(s[3].split(",")[1]); 
 x3=Number(s[4].split(",")[0]); 
 y3=Number(s[4].split(",")[1]); 
 
 o=cch[y3*9+x3]; 
 o.moveTo(x2,y2,true); 
 curPlayer--; 
 
 createChessman(t,x1,y1,p); 
 } 
}

</ script>

<input type="button" value="重开" onclick="window.location.reload();" style="position:absolute; left:800px;"> 
<input type="button" value="悔棋" onclick="undo();" style="position:absolute; left:900px;">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文