使用H5编写网页版象棋（源码）

最新推荐文章于 2024-06-06 09:35:28 发布

娶个村姑当大妾

最新推荐文章于 2024-06-06 09:35:28 发布

阅读量1.1w

点赞数 11

分类专栏： HTML 5 文章标签：闭包选项卡闭包解决 H5象棋-象棋源码

本文链接：https://blog.csdn.net/Bug_money/article/details/54630395

版权

<!DOCTYPE html>
<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{

最低0.47元/天解锁文章

娶个村姑当大妾

关注

11
点赞
踩
35

收藏

觉得还不错? 一键收藏
14
评论
使用H5编写网页版象棋（源码）

<!DOCTYPE html><html><head><title>中国象棋-canvas动画-前端技术-关尔先生</title><meta name="keywords" content="中国象棋,原生js,canvas动画,沙拉小姐,关尔先生" /><meta name="description" content="关尔先生用canvas动画和原生js写的中国象棋对战" />
复制链接

扫一扫