<style>
* { font:30px arial, "草书"; font-weight:bold; color:yellow; 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:red; 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.οnlοad=function(){
    
    document.onselectstart=function(){ return(false); }
    
    document.οnclick=do_click;
    document.οncοntextmenu=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="重开" οnclick="window.location.reload();" style="position:absolute; left:800px;">
<input type="button" value="悔棋" οnclick="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>

JAVAScript做的网页象棋相关推荐

1. HTML5期末大作业_影视网站设计——_指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

   HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...

2. HTML5期末大作业:影视网站设计——“指环王：护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作

   HTML5期末大作业:影视网站设计--"指环王:护戒使者(13页) TML+CSS+JavaScript 学生DWHTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常 ...

3. JavaScript—使用bootstrap框架做一个网页

   这是通过黑马程序员的教程进行学习的.以下是做一个网页的流程. 目录 第一步分析:分析网页--将网页分成若干部分​ 第二步实现: 1-头部 2-导航条 3-注册页面 4-网站底部1 5-网站底部2 6- ...

4. php网站用框架与不用的区别,做前端网页是不是必须要用网页框架

   做前端网页是不是必须要用网页框架 2017-09-15 做前端网页是不是必须要用网页框架?个人感觉这分为两种情况,一种是能力超强,时间够用的情况,另外一种就是用前端网页框架,可以节约开发时间和减少工作 ...

5. Jquery做的网页版连连看（初稿）

   这两天一直构思做一个网页版连连看,不过一直没有时间也没有算法.今天早上有空,先完成了一个外壳,就少了算法.我知道网页版的连连看其实也有人做过了,但可能每个人的想法不同,思路也不同.我只是当做一种练习. ...

6. HTML5期末大作业：动漫网站设计——迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成

   HTML5期末大作业:动漫网站设计--迪斯尼公主(6个页面) HTML+CSS+JavaScript 动漫网页HTML代码 学生网页课程设计期末作业下载 动漫大学生网页设计制作成 临近期末, 你还在为 ...

7. html送女朋友的网页,做一个网页送给心动女孩子生日礼物(表白也合适)

   如何做一个网页送给女朋友做生日礼物 本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置fla ...

8. 如何做一个网页送给女朋友做生日礼物

   如何做一个网页送给女朋友做生日礼物 本文里面涉及到python,HTML ,css,JavaScript的知识,是基于python的flask框架做的一个小型网站,里面可以实现跳转功能,怎么配置fla ...

9. JavaScript爬取网页并分析

   JavaScript爬取网页并分析 任务分析 爬取三个网站下的新闻数据,这里选择网易新闻网(https://news.163.com/): 提取每条新闻的如下字段:标题,内容,发表日期,网址,关键词, ...

最新文章

1. 蓝宝石 470 原版 bios_想怎么玩就怎么玩！改造双BIOS显卡，不再为噪音和性能选择而烦恼...
2. boost::math::boost::math::interpolators::cardinal_cubic_b_spline用法的测试程序
3. 网络OS显神威 认识Linux远程桌面控制
4. .NET Core 给使用.NET的公司所带来的机遇
5. java中long如何使用_在Java中如何使用lambda和方法引用实现LongSupplier？
6. Codeforces Round #656 (Div. 3) C. Make It Good
7. Jmeter压力测试快速使用
8. java.lang.ClassCastException: java.util.ArrayList cannot be cast to java.util.Map
9. read()/write()的生命旅程——前言与目录
10. 7-1 图深度优先遍历(c++)
11. php实现条形码生成,thinkPHP框架实现生成条形码的方法示例
12. Elastic-Job-分布式定时任务框架（张亮原著）
13. Excel函数SUMIFS和COUNTIFS详解
14. 【c++】cout.setf(left)、cout.setf(right)详解
15. 技术漫谈:哪种操作系统最适合固态硬盘
16. CAD 批量打印，输出pdf,plt的工具
17. ps无法存储为html,ps一直无法存储因为程序错误的解决方法
18. 网络协议与服务的区别/关系
19. surface pro linux服务器,微软证实！Surface Pro可以运行Linux
20. 【小沐学Unity3d】Unity3d导入3D模型

热门文章

1. 简单提升微信打开浏览器速度（启用原生 WebView 支持）
2. 拥有Adobe国际认证证书，能闯出一个怎样的未来？
3. Real-Time Pedestrian Detection with Deep Network Cascades
4. 开源堡垒机 Teleport
5. ALIENTEK MINIS TM32 给定程序keil5大量错误问题办法
6. jxr怎么变成jpg_怎么将DWG文档转成图片格式
7. 项目管理常见题目举例整理
8. win10右下角声音符号红叉提示解决未安装任何音频输出设备
9. sharepoint2013的最少下载策略概述（MDS）
10. 华为3C联通移动一键刷入官方recovery,解决root后如何刷回原版系统，刷机后无法进入系统的问题