使用H5编写网页版象棋(源码)


<html>
<head>
<title>中国象棋title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
<body>
<div id="content">
div>
<script type="text/javascript">
    //车马相士将士相马车 8*11
    var qzName=["車","馬","相","仕","将","仕","相","馬","車","炮","炮","兵","兵","兵","兵","兵"];//
    var qzRedArray=new Array();
    var qzBlackArray=new Array();
    var qzArray=new Array();
    var body_w=document.body.clientWidth;
    var gameType=0;
    body_w=body_w%9==0?body_w:body_w-body_w%9;//让坐标为整数
    body_w=body_w<810?body_w:810;
    console.log(document.body.clientWidth+"|"+body_w);
    /////////////////////////////////////////////////////
  //  var b=document.getElementsByTagName('body')[0];
    var b=document.getElementById('content');
    b.style.textAlign='center';
    var np=document.createElement('div');
    var nbut=document.createElement('div');
    if(body_w==810){
        np.style.width='1.1em';
        np.style.float='right';
        nbut.style.width='2.5em';
        nbut.style.float='right';
        nbut.style.padding='1em';
    }else{
        np.style.width='50%';
        np.style.float='right';
        nbut.style.width='40%';
        nbut.style.float='right';
    }
    np.innerHTML='Good luck';
    nbut.innerHTML='重新开始游戏';
    nbut.fontSize=body_w/16+'px';
    nbut.style.border='solid 2px red';
    nbut.style.borderRadius='20%';
    nbut.style.cursor='pointer';
    nbut.style.fontWeight='bold';
    nbut.style.color='red';
    nbut.onclick=function () {
        newGameStart();
    };
    np.id='mark';
    np.style.fontFamily='微软雅黑';
    np.style.fontSize=body_w/16+'px';
    b.appendChild(nbut);
    b.appendChild(np);

    ///////////////////////////////
    //var w=800,h=900;
    var w=body_w/9*8,h=w/8*9;
    var c=document.createElement('canvas');
    var wh=w/2;    var hh=h/2;    var cell=w/8;    var cellh=cell/2;
    c.width=w+cell;    c.height=h+cell;    c.id="can";
    b.appendChild(c);
    var cxt=c.getContext("2d");
    cxt.strokeStyle="#ff0000";
    cxt.font=cell*0.8+"px 微软雅黑";
    //坐标原点为中心,右下为正,左上为负
    cxt.translate(wh+cellh,hh+cellh);
    ////////////////////////////////////////////////////
    var mouseClickCount=0;
    var qzRunTime=0;
    c.onclick=function(event)
    {
        mouseClickCount+=1;
        console.log("鼠标点击了 "+mouseClickCount+" 次_____________________________________________________");
        var e = event || window.event;
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        x=x-c.offsetLeft-cellh-wh;y=y-c.offsetTop-cellh-hh;
        x=Math.abs(x%cell)>cellh?(x>0?x-x%cell+cell:x-x%cell-cell):x-x%cell;
        y=y>0?y-y%cell+cellh:y-y%cell-cellh;
        if(gameType==1){
            clickHere(x,y);
        }else {
            np.innerHTML="胜负已分莫强求";
        }

        console.log ('鼠标点击的坐标x:'+x+' y:'+y);
    };

    function clickHere(x,y) {
        var qzHere=checkXYisEmpty(x,y);//空是true,有则返回棋子obj
        var qzChoose=null;
        for(i in qzArray){
            if(qzArray[i].isChoose==true){
                qzChoose=qzArray[i];
            }
        }
        console.log(typeof qzHere);
        if(qzHere===true){//点击的地方是空的
            if(qzChoose===null){//没有选中的棋子
                console.log("点击的地方是空的,没有选中的棋子");
            }else{//选中的棋子为qzChoose
                if(qzChoose.go(x,y)===true){///////////////////////// 完成- 走!////////////////////////////////
                    qzRunTime+=1;
                    if(gameType==1){
                    np.innerHTML="棋局第"+qzRunTime+"步";
                    }
                    isJiangJun(qzChoose);
                    qzChoose.isChoose=false;
                }
            }

        }else {//点击的地方是object
            if(qzChoose===null){//没有选中的棋子
                if(qzRunTime%2==0 && qzHere.side=='红方'){
                    console.log("红:之前没有选中棋子,所以选中点击的棋子,下choose");
                    qzHere.choose();
                }else  if(qzRunTime%2==1 && qzHere.side=='黑方'){
                    console.log("黑:之前没有选中棋子,所以选中点击的棋子,下choose");
                    qzHere.choose();
                }else{
                    if(qzRunTime%2==0){
                        console.log("warn:到红方了");
                        np.innerHTML="红方回合";
                    }else{
                        console.log("warn:到黑方了");
                        np.innerHTML="黑方回合";
                    }
                }

            }else{//选中的棋子为qzChoose,点击的是object
                if(qzChoose.side==qzHere.side){
                    console.log("点击的棋子和之前选中的棋子同一边,所以,选中此棋子");
                    qzChoose.noChoose();
                    console.log("typeof qzHere:"+typeof qzHere+',下choose');
                    qzHere.choose();

                }else {
                    console.log("点击的棋子和之前选中的棋子敌对,所以,尝试 吃子");
                    if(qzChoose.go(x,y)===true){///////////////////////// 完成- 走!////////////////////////////////
                        qzRunTime+=1;
                        if(gameType==1){
                            np.innerHTML="棋局第"+qzRunTime+"步";
                        }
                        isJiangJun(qzChoose);
                        qzChoose.isChoose=false;
                    }
                }
            }

        }
        rePut();

    }


    newGameStart();
    function isJiangJun(obj) {

        var html='';
        for(i in qzBlackArray){
            var o=qzBlackArray[i],a=o.x,b=o.y;
            if(o.go(qzRedArray[4].x,qzRedArray[4].y,true)===true){
                html+='黑方';
                o.x=a;o.y=b; rePut();
                break;
            }
        }
        for(i in qzRedArray){
            var o=qzRedArray[i],a=o.x,b=o.y;
            if(o.go(qzBlackArray[4].x,qzBlackArray[4].y,true)===true){
                html+='红方';
                o.x=a;o.y=b; rePut();
                break;
            }
        }
        if(html!==''){np.innerHTML=html+' :将军 !';  }
   }
    function rePut() {
        console.log('repout()');
        createQiPan();
        for(index in qzArray){
            var a=qzArray[index];
            if(a.isDead){continue;}
            createQZ(a.x,a.y,a.name,a.side,a.isChoose);
            putQiZi(a);
        }
    }
    function gameOver(side) {
        gameType=0;
        np.innerHTML=side+'输了 !';
    }
    function createQZ(x,y,name,side,ischoose,isDead) {
        var qz=new Object();
        qz.side=side;
        qz.x=x;qz.y=y;
        qz.name=name;
        qz.isChoose=ischoose?ischoose:false;
        qz.isDead=isDead?isDead:false;
        qz.goDead=function () {
            qz.isDead=true;
            if(qz.name=='将'){gameOver(qz.side);}
            console.log('createQZ:'+qz.name+' dead')
        };

        qz.go=function (a,b,c) {
            var tryJiangJun=c?c:false;
            var theWayCanGo=way(qz,a,b,tryJiangJun);
            var is_empty=checkXYisEmpty(a,b);
            console.log("createQZ_theWayCanGo:"+theWayCanGo);

            if(theWayCanGo===true) {
                if (is_empty == true) {
                    qz.x = a;
                    qz.y = b;
                    console.log("createQZ_function_把" + qz.side + "的【" + qz.name + "】移到坐标(" + qz.x + "," + qz.y + "】)");
                    rePut();
                    return true;
                } else if (is_empty.side===qz.side){
                    console.log('createQZ_function_go_不能这么走!');
                    if(!tryJiangJun)np.innerHTML="同阵营 !";
                    return false;
                }else{
                    if(qz.name=='炮'){
                        console.log('createQZ_function_go_不能这么吃,要隔一个子!');
                        if(!tryJiangJun)np.innerHTML="隔空打炮 !";
                        return false;
                    }else{
                        if(!tryJiangJun)is_empty.goDead();
                        qz.x = a;
                        qz.y = b;
                        console.log("createQZ_function_go_把" + qz.side + "的【" + qz.name + "】移到坐标(" + qz.x + "," + qz.y + "】)");
                        rePut();
                        return true;
                    }
                }
            }else if(theWayCanGo===1&&qz.name=='炮'){
                if(is_empty!==true && is_empty.side!==qz.side){
                    if(!tryJiangJun)is_empty.goDead();
                    qz.x = a;
                    qz.y = b;
                    console.log("createQZ_function_PaoGo_" +is_empty.name+" Dead;把"+ qz.side + "的【" + qz.name + "】移到坐标(" + qz.x + "," + qz.y + "】)");
                    rePut();
                    return true;
                }else {
                    if(!tryJiangJun)np.innerHTML="禁止打空炮 !";
                }
            }else {
                console.log('warn:go else ????????');
                if(!tryJiangJun)np.innerHTML="你走远了 !";
                return false;
            }
        };

        qz.choose=function () {
            cxt.beginPath();
            cxt.lineWidth=cell/20;
            cxt.strokeStyle="#ffff00";
            cxt.arc(qz.x,qz.y,cell/2.2,0,Math.PI*2,true);
            cxt.stroke();
            cxt.closePath();
            cxt.lineWidth=1;
            qz.isChoose=true;
            console.log('createQZ_fun_choose_'+qz.side+" 的 【"+qz.name+"】被选中,坐标是:("+qz.x+","+qz.y+")");
        };
        qz.noChoose=function () {
            qz.isChoose=false;
            console.log('createQZ_fun_noChoose_'+qz.side+" 的 【"+qz.name+"】被取消选中,原坐标是:("+qz.x+","+qz.y+")");
        };
        //   console.log(qz.side+" 已创建:"+qz.name+",坐标是:("+qz.x+","+qz.y+")");
        return qz;
    }
    function way(obj,a,b,c){
        var tryJiangJun=c?c:false;
        var x=obj.x,
            y=obj.y,
            k=obj.name,
            wayResult,
            countQiziOnRoad=0;
        if(x==a&&y==b){return false}//在原来的位置,没有移动
        console.log("【"+k+"】("+x+","+y+") 在走");
        switch (k){
            case "車":
                if(x==a){//y-b有没有其它棋子
                    console.log("沿y轴:现在y="+y+"; 目标y=b("+b);
                    if(Math.abs(y-b)==cell){return true}
                    if(b"b);
                        for(var f=y-cell;f>b;f-=cell){
                            console.log("沿y轴:现在y="+f+"; 目标y=b("+b);
                            if(checkXYisEmpty(a,f)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                if(!tryJiangJun)np.innerHTML="车步错误";
                                break;
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }else{
                        console.log("b>y往下走,x不变,y增大");
                        for(var f=y+cell;f"沿y轴:现在y="+f+"; 目标y=b("+b);
                            if(checkXYisEmpty(a,f)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                if(!tryJiangJun)np.innerHTML="车步错误";
                                break;
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }
                }
                else if(y==b){//x-a有没有其它棋子
                    console.log("沿x轴:现在x="+x+"; 目标x=a("+a);
                    if(Math.abs(x-a)==cell){return true}
                    if(a"a);
                        for(var f=x-cell;f>a;f-=cell){
                            console.log("沿x轴:现在x="+f+"; 目标x=a("+a);
                            if(checkXYisEmpty(f,b)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                if(!tryJiangJun)np.innerHTML="车步错误";
                                break;
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }else{
                        console.log("a>x往右走,y不变,x增大");
                        for(var f=x+cell;f"沿y轴:现在x="+f+"; 目标x=a("+a);
                            if(checkXYisEmpty(f,b)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                if(!tryJiangJun)np.innerHTML="车步错误";
                                break;
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }
                }
                else{
                    wayResult=false; //不能走
                    //  console.log("??不能走");
                    if(!tryJiangJun)np.innerHTML="车步错误 !";
                }
                break;
            case "馬"://xy---ab
                if(Math.abs(x-a)==2*cell && Math.abs(y-b)==cell){
                    if(xtrue){
                        wayResult=true;  //能走
                    }else if(x>a&&checkXYisEmpty(x-cell,y)===true){
                        wayResult=true;  //能走
                    }else{
                        wayResult=false; //不能走
                        if(!tryJiangJun)np.innerHTML="马步错误";
                    }
                }else if(Math.abs(x-a)==cell && Math.abs(y-b)==2*cell){
                    if(ytrue){
                        wayResult=true;  //能走
                    }else if(y>b&&checkXYisEmpty(x,y-cell)===true){
                        wayResult=true;  //能走
                    }else{
                        wayResult=false; //不能走
                        if(!tryJiangJun)np.innerHTML="马步错误";
                    }
                }
                break;
            case "相":

                if((obj.side=="红方" && b<0)||(obj.side=="黑方"&&b>0)){
                    wayResult=false; //不能走
                    console.log('提示:相不能过河');
                    if(!tryJiangJun)np.innerHTML="相不能过河";
                    return wayResult;
                }
                console.log('相脚:'+(x+a)/2+","+(y+b)/2);
                if((Math.abs(x-a)==2*cell )&&( Math.abs(y-b)==2*cell)&&(checkXYisEmpty((x+a)/2,(y+b)/2)===true)){
                    wayResult=true;  //能走
                }else{
                    wayResult=false; //不能走
                    if(!tryJiangJun)np.innerHTML="相步错误";
                }
                break;
            case "仕":
                if(Math.abs(x-a)==cell && Math.abs(y-b)==cell&&Math.abs(a)<=cell&&Math.abs(b)>=2.5*cell){
                    wayResult=true;  //能走
                }else{
                    wayResult=false; //不能走
                    if(!tryJiangJun)np.innerHTML="仕步错误";
                }
                break;
            case "将":
                if(a==x){
                    if(Math.abs(y-b)==cell&&Math.abs(a)<=cell&&Math.abs(b)>=2.5*cell){
                        wayResult=true;  //能走
                    }else{
                        wayResult=false; //不能走
                        if(!tryJiangJun)np.innerHTML="将步错误";
                    }
                }else if(b==y){
                    if(Math.abs(a-x)==cell&&Math.abs(a)<=cell&&Math.abs(b)>=2.5*cell){
                        wayResult=true;  //能走
                    }else{
                        wayResult=false; //不能走
                        if(!tryJiangJun)np.innerHTML="将步错误";
                    }
                }
                break;
            case "炮":

                if(x==a){//y-b有没有其它棋子
                    console.log("沿y轴:现在y="+y+"; 目标y=b("+b);
                    if(Math.abs(y-b)==cell){return true}
                    if(b"b);
                        for(var f=y-cell;f>b;f-=cell){
                            console.log("沿y轴:现在y="+f+"; 目标y=b("+b);
                            if(checkXYisEmpty(a,f)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                countQiziOnRoad+=1;
                                if(countQiziOnRoad==2){
                                    if(!tryJiangJun)np.innerHTML="炮步错误";
                                    break;
                                }
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }else{
                        console.log("b>y往下走,x不变,y增大");
                        for(var f=y+cell;f"沿y轴:现在y="+f+"; 目标y=b("+b);
                            if(checkXYisEmpty(a,f)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                countQiziOnRoad+=1;
                                if(countQiziOnRoad==2){
                                    if(!tryJiangJun)np.innerHTML="炮步错误";
                                    break;
                                }
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }
                }
                else if(y==b){//x-a有没有其它棋子
                    console.log("沿x轴:现在x="+x+"; 目标x=a("+a);
                    if(Math.abs(x-a)==cell){return true}
                    if(a"a);
                        for(var f=x-cell;f>a;f-=cell){
                            console.log("沿x轴:现在x="+f+"; 目标x=a("+a);
                            if(checkXYisEmpty(f,b)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                countQiziOnRoad+=1;
                                if(countQiziOnRoad==2){
                                    if(!tryJiangJun)np.innerHTML="炮步错误";
                                    break;
                                }
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }else{
                        console.log("a>x往右走,y不变,x增大");
                        for(var f=x+cell;f"沿y轴:现在x="+f+"; 目标x=a("+a);
                            if(checkXYisEmpty(f,b)!==true){//路径坐标上有其它棋子
                                wayResult=false; //不能走
                                console.log("不能走");
                                countQiziOnRoad+=1;
                                if(countQiziOnRoad==2){
                                    if(!tryJiangJun)np.innerHTML="炮步错误";
                                    break;
                                }
                            }else {
                                wayResult=true;  //能走
                                console.log("能走");
                            }
                        }
                    }
                }
                else{
                    wayResult=false; //不能走
                    if(!tryJiangJun)np.innerHTML="炮步错误 !";
                    //  console.log("??不能走");
                }
                break;
            case "兵":
                if(obj.side=="红方"){
                    if(y>0){//未过河
                        if(x==a&&y-b==cell){
                            wayResult=true;  //能走
                        }else {
                            wayResult=false; //不能走
                            console.log('红方兵未过河,只能向前走一步!');
                            if(!tryJiangJun)np.innerHTML="兵步错误";
                        }
                    }else{//过河
                        if((Math.abs(x-a)==cell&&y==b)||(a==x&&y-b==cell)){
                            wayResult=true;  //能走
                        }else {
                            wayResult=false; //不能走
                            console.log('红方兵未过河,只能向 前、左、右 方向走一步!');
                            if(!tryJiangJun)np.innerHTML="兵步错误";
                        }
                    }
                }else{
                    if(y<0){//未过河
                        if(x==a&&y-b==-cell){
                            wayResult=true;  //能走
                            console.log('黑方兵未过河,能走!');
                        }else {
                            wayResult=false; //不能走
                            console.log('黑方兵未过河,只能向前走一步!');
                            if(!tryJiangJun)np.innerHTML="兵步错误";
                        }
                    }else{//过河
                        if((Math.abs(x-a)==cell&&y==b)||(a==x&&y-b==-cell)){
                            wayResult=true;  //能走
                        }else {
                            wayResult=false; //不能走
                            console.log('黑方兵未过河,只能向 前、左、右 方向走一步!');
                            if(!tryJiangJun)np.innerHTML="兵步错误";
                        }
                    }
                }
                break;
            default:
        }
        if(countQiziOnRoad===1){
            return countQiziOnRoad;
        }else{
            console.log("wayResult:"+wayResult);
            return wayResult;
        }

    }
    function checkXYisEmpty(x,y) {
        //指定坐标上 是否为空,空则true,有棋子则返回棋子的;
        //  console.log("指定坐标上 是否为空,空则true,有棋子则返回棋子的side");
        var re;
        for(i in qzArray){
            if(qzArray[i].isDead===true){re=true;continue}
            //  console.log("检测坐标:"+x+","+y+" 上有没有"+qzArray[i].name);
            if(qzArray[i].x==x && qzArray[i].y==y){
                re= qzArray[i].side+"_"+qzArray[i].name+"_"+qzArray[i].x+","+qzArray[i].y;
                console.log(re);
                re=qzArray[i];
                break;
            }else {
                re=true;
            }
        }
        console.log("re:"+re);
        return re;
    }
    function putQiZi(object) {
        cxt.beginPath();
        cxt.arc(object.x,object.y,cell/2,0,Math.PI*2,true);
        cxt.fillStyle="#DEB887";
        cxt.fill();
        cxt.fillStyle=(object.side=="红方")?"red":"black";
        cxt.fillText(object.name,object.x-cell*0.4,object.y+cell*0.3);
        cxt.closePath();
        if(object.isChoose===true){object.choose()}
        //     console.log(object.side+""+object.name+",已到位");
    }
    function newGameStart() {
        gameType=1;
        createQiPan();
        for(index in qzName){
            //   if(qzName[index]=='兵'){continue}
            switch (qzName[index]){
                case '炮':
                    var a=(index==10)?-1:1;
                    qzRedArray[index]=createQZ(-3*cell*a,2.5*cell,qzName[index],"红方");
                    qzBlackArray[index]=createQZ(-3*cell*a,-2.5*cell,qzName[index],"黑方");
                    break;
                case '兵':
                    qzRedArray[index]=createQZ(-wh+(index-11)*2*cell,1.5*cell,qzName[index],"红方");
                    qzBlackArray[index]=createQZ(-wh+(index-11)*2*cell,-1.5*cell,qzName[index],"黑方");
                    break;
                default:
                    qzRedArray[index]=createQZ(-wh+index*cell,hh,qzName[index],"红方");
                    qzBlackArray[index]=createQZ(-wh+index*cell,-hh,qzName[index],"黑方");
            }
            qzArray=qzRedArray.concat(qzBlackArray);
            putQiZi(qzRedArray[index]);
            putQiZi(qzBlackArray[index]);
        }
        console.log('------------红方先走!(Red First)-------------');
        np.innerHTML="红方先走";

    }
    function clearCanvas() {
        cxt.clearRect(-c.width/2,-c.height/2,c.width,c.height);
    }
    function createQiPan() {
        clearCanvas();
        cxt.strokeStyle="#ff0000";
        cxt.lineWidth=1;
        //横线
        for(var i=0;i<=9;i++){
            cxt.moveTo(-wh,-hh+cell*i);
            cxt.lineTo(wh,-hh+cell*i);
        }
        //竖线
        for(var i=0;i<=8;i++){
            cxt.moveTo(-wh+cell*i,-hh);
            if(i!=0 && i!=8){//除两端外,中间竖线 分为两段
                cxt.lineTo(-wh+cell*i,-cellh);
                cxt.moveTo(-wh+cell*i,cellh);
            }
            cxt.lineTo(-wh+cell*i,hh);
        }
        //下方‘米’格
        cxt.moveTo(-cell,hh);
        cxt.lineTo(cell,hh-2*cell);
        cxt.moveTo(-cell,hh-2*cell);
        cxt.lineTo(cell,hh);
        //上方‘米’格
        cxt.moveTo(-cell,-hh);
        cxt.lineTo(cell,-hh+2*cell);
        cxt.moveTo(-cell,-hh+2*cell);
        cxt.lineTo(cell,-hh);

        cxt.stroke();
        //兵位
        for(var i=0;i<5;i++){
            cxt.beginPath();
            cxt.arc(-wh+2*cell*i,1.5*cell,cell/4,0,Math.PI*2,true);
            cxt.stroke();
            cxt.beginPath();
            cxt.arc(wh-2*cell*i,-1.5*cell,cell/4,0,Math.PI*2,true);
            cxt.stroke();
        }
        //炮位
        cxt.beginPath();
        cxt.arc(-3*cell,2.5*cell,cell/4,0,Math.PI*2,true);
        cxt.stroke();
        cxt.beginPath();
        cxt.arc(3*cell,2.5*cell,cell/4,0,Math.PI*2,true);
        cxt.stroke();
        cxt.beginPath();
        cxt.arc(-3*cell,-2.5*cell,cell/4,0,Math.PI*2,true);
        cxt.stroke();
        cxt.beginPath();
        cxt.arc(3*cell,-2.5*cell,cell/4,0,Math.PI*2,true);
        cxt.stroke();
        cxt.closePath();
        //楚河 汉界
        cxt.fillStyle='#ff0000';
        cxt.beginPath();
        cxt.fillText('楚河',-2.5*cell,0.6*cellh);
        cxt.fillText('汉界',1*cell,0.6*cellh);
        cxt.closePath();
    }
script>
body>
html>

使用H5编写网页版象棋(源码)_第1张图片

你可能感兴趣的:(HTML,5)