诘屈聱牙之javascript中国象棋

更新时间：2007年04月07日 00:00:00 作者：

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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

诘屈聱牙之javascript中国象棋

相关文章

js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决
JavaScript代码在执行前会经历一个预处理阶段,这个阶段主要涉及变量提升和函数提升,下面这篇文章主要介绍了js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决的相关资料,需要的朋友可以参考下
2024-09-09
基于javascript实现精确到毫秒的倒计时限时抢购
现如今做电商网站必不可少的一个效果就是限时抢购，这也是各大电商网站的一种促销手段。如何实现倒计时限时抢购，本文为大家分享了javascript实现倒计时限时抢购的的相关代码，感兴趣的小伙伴们可以参考一下
2016-04-04
Node.js：Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件
什么是Node.js?还服务器端javascript?对于这个概念我在这篇文章不做解释，可以自己去搜索了解下，服务器端js不是新技术，只是最近的node.js的火爆让他爆发了，我会在以后的文章里解释什么是node.js。
2011-06-06
JS兼容所有浏览器的DOMContentLoaded事件
这篇文章主要介绍了JS兼容所有浏览器的DOMContentLoaded事件的相关资料，标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单，感兴趣的朋友一起学习吧
2018-01-01
JS的replace方法详细介绍
replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用
2012-11-11
基于jquery实现导航菜单高亮显示（两种方法）
本篇文章是基于jquery实现导航菜单高亮显示，当点击不同导航菜单实现当前点击的菜单是高亮的，有需要的朋友可以关注下本文
2015-08-08
Javascript中的for in循环和hasOwnProperty结合使用
当检测某个对象是否拥有某个属性时，hasOwnProperty 是唯一可以完成这一任务的方法，在 for in 循环时，建议增加 hasOwnProperty 进行判断，可以有效避免扩展本地原型而引起的错误
2013-06-06
javascript内置对象Math案例总结分析
今天总结一下javascript 内置对象Math中的函数用法，顺带写一下常见的案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-03-03
老生常谈jacascript DOM节点获取
下面小编就为大家带来一篇老生常谈jacascript DOM节点获取。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
实现div内部滚动条滚动到底部和顶部的代码
下面笔者就为大家分享一篇实现div内部滚动条滚动到底部和顶部的代码，代码简洁，具有很好的参考价值，希望对大家有所帮助
2017-11-11

最新评论