Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 诘屈聱牙之javascript中国象棋_javascript技巧

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

WBOY

Freigeben： 2016-05-16 19:15:35

Original

922 Leute haben es durchsucht

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需刷新才能执行]

Verwandte Etiketten：

诘屈聱牙之javascript中国象棋

Quelle：php.cn

Vorheriger Artikel：JavaScript进阶教程(第二课续)第1/2页_基础知识 Nächster Artikel：JavaScript进阶教程(第二课)第1/3页_基础知识

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2309

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2443

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

2058

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1944

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

2008

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage