诘屈聱牙之javascript中国象棋- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 诘屈聱牙之javascript中国象棋

技术文章搜索

关键字

Javascript 中的诘屈聱牙之javascript中国象棋

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 224 ::

收藏到网摘: n/a

JavaScript初级教程(第五课) filemanage功能中用到的common.js

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>
<script>
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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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;">
<div id="d_his_red" style="font-size:12px; color:#333;position:absolute; left:800px; top:450px; width:120px; height:300px; overflow:auto;"></div>
<div id="d_his_blue" style="font-size:12px; color:#333;position:absolute; left:800px; top:100px; width:120px; height:300px; overflow:auto;"></div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

JavaScript初级教程(第五课) filemanage功能中用到的common.js

评论 (0) All