李小枫原生js象棋

最新推荐文章于 2023-07-10 17:35:52 发布
最新推荐文章于 2023-07-10 17:35:52 发布
阅读量354 收藏 5
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li_xiaofen/article/details/120744067
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wall">
        <div class="wintitle"></div>
    </div>
    <div class="wrap">
       
        <div item="black" class="qizi black" Index="0"  rule="车" row="1" line="1">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="1" row="1" line="2" rule="马">
            <div >馬</div>
        </div>
        <div item="black" class="qizi black" Index="2" row="1" line="3" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="3" row="1" line="4" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="4" row="1" line="5" rule="帅" live="1">
            <div >帥</div>
        </div>
        <div item="black" class="qizi black" Index="5" row="1" line="6" rule="士">
            <div >仕</div>
        </div>
        <div item="black" class="qizi black" Index="6" row="1" line="7" rule="相">
            <div >象</div>
        </div>
        <div item="black" class="qizi black" Index="7" row="1" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="black" class="qizi black" Index="8" rule="车" row="1" line="9">
            <div >車</div>
        </div>
        <div item="black" class="qizi black" Index="9" row="3" line="2" rule="炮">
            <div >炮</div>
        </div>
        <div item="black" class="qizi black" Index="10" row="3" line="8" rule="炮">
            <div>炮</div>
        </div>
        <div item="black" class="qizi black" Index="11" row="4" line="1" rule="兵">
            <div >卒</div>
        </div>
        <div item="black" class="qizi black" Index="12" row="4" line="3" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="13" row="4" line="5" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="14" row="4" line="7" rule="兵">
            <div>卒</div>
        </div>
        <div item="black" class="qizi black" Index="15" row="4" line="9" rule="兵">
            <div>卒</div>
        </div>
        <div item="red" class="qizi red" Index="16" row="7" line="1" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="17" row="7" line="3" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="18" row="7" line="5" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="19" row="7" line="7" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="20" row="7" line="9" rule="兵">
            <div>兵</div>
        </div>
        <div item="red" class="qizi red" Index="21" row="8" line="2" rule="炮">
            <div>炮</div>
        </div>
        <div item="red" class="qizi red" Index="22" row="8" line="8" rule="炮">
            <div>炮</div>
        </div>   
        <div item="red" class="qizi red" Index="23" rule="车" row="10" line="1">
            <div>車</div>
        </div>
        <div item="red" class="qizi red" Index="24" row="10" line="2" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="25"  row="10" line="3"  rule="相">
            <div>相</div>
        </div>
        <div item="red" class="qizi red" Index="26"  row="10" line="4" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="27"  row="10" line="5" rule="帅" live="2">
            <div>將</div>
        </div>
        <div item="red" class="qizi red" Index="28"  row="10" line="6" rule="士">
            <div>士</div>
        </div>
        <div item="red" class="qizi red" Index="29"  row="10" line="7"  rule="相"> 
            <div>相</div>
        </div>
        <div item="red" class="qizi red"  Index="30" row="10" line="8" rule="马">
            <div>馬</div>
        </div>
        <div item="red" class="qizi red" Index="31" rule="车"  row="10" line="9">
            <div>車</div>
        </div>
      
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="weizhi"></div>
        <div class="qipan">      
            </div>
        <div style="position: relative; top: 20px;left:28px;font-size: 18px;">
            开发者--李志强，如在使用过程中发现bug或者不合理的地方，可以联系作者进行修改
        </div>
    </div>
    <script src="1.js" ></script>
</body>
</html>
<style>
    body{
        margin: 0px 0px;
        user-select: none;
    }
    .wrap{
        margin: auto;
        /* margin-top: 40px; */
        width: 764px;
        height: 848px;
        position: relative;
      
    }
    .qipan{
        top: 32px;
        left: 32px;
        width: 700px;
        height: 784px;
        background-image: url('./象棋.jpg');
        position: relative;
        z-index: -5;
    }
    .weizhi{
        width: 84px;
        height: 84px;
        float: left;
    }
    .qizi{
        width: 84px;
        height: 84px;
        cursor: pointer;
        position: absolute;
        z-index: 2;
        transition:top 0.3s linear,left 0.3s linear;
    }
    .qizi div{
        width: 70px;
        height: 70px;
        border: 2px solid #bebebe;
        box-shadow: 0px 0px 2px #888888;
        background: rgba(216, 216, 216, 1);
        margin-left: 6px;
        margin-top: 6px;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        font-size:30px;
    }
    .red{
        color: red;
    }
    .wintitle{
        position: fixed;
        left: 42%;
        top: 41%;
        height: 70px;
        width: 300px;
        text-align: center;
        border-radius: 30px;
        background: white;
        color: black;
        font-size: 40px;
        font-weight: bold;
        line-height: 70px;
    }
    .wall{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        background: rgba(0,0,0,0.3);
        display: none;
    }
</style>

// 记录整个棋盘的行列坐标  10行  9列
let weizhiObj=[
    {row:1,line:1},{row:1,line:2},{row:1,line:3},{row:1,line:4},{row:1,line:5},{row:1,line:6},{row:1,line:7},{row:1,line:8},{row:1,line:9},
    {row:2,line:1},{row:2,line:2},{row:2,line:3},{row:2,line:4},{row:2,line:5},{row:2,line:6},{row:2,line:7},{row:2,line:8},{row:2,line:9},
    {row:3,line:1},{row:3,line:2},{row:3,line:3},{row:3,line:4},{row:3,line:5},{row:3,line:6},{row:3,line:7},{row:3,line:8},{row:3,line:9},
    {row:4,line:1},{row:4,line:2},{row:4,line:3},{row:4,line:4},{row:4,line:5},{row:4,line:6},{row:4,line:7},{row:4,line:8},{row:4,line:9},
    {row:5,line:1},{row:5,line:2},{row:5,line:3},{row:5,line:4},{row:5,line:5},{row:5,line:6},{row:5,line:7},{row:5,line:8},{row:5,line:9},
    {row:6,line:1},{row:6,line:2},{row:6,line:3},{row:6,line:4},{row:6,line:5},{row:6,line:6},{row:6,line:7},{row:6,line:8},{row:6,line:9},
    {row:7,line:1},{row:7,line:2},{row:7,line:3},{row:7,line:4},{row:7,line:5},{row:7,line:6},{row:7,line:7},{row:7,line:8},{row:7,line:9},
    {row:8,line:1},{row:8,line:2},{row:8,line:3},{row:8,line:4},{row:8,line:5},{row:8,line:6},{row:8,line:7},{row:8,line:8},{row:8,line:9},
    {row:9,line:1},{row:9,line:2},{row:9,line:3},{row:9,line:4},{row:9,line:5},{row:9,line:6},{row:9,line:7},{row:9,line:8},{row:9,line:9},
    {row:10,line:1},{row:10,line:2},{row:10,line:3},{row:10,line:4},{row:10,line:5},{row:10,line:6},{row:10,line:7},{row:10,line:8},{row:10,line:9},
  
]
let run="red"; // 哪方正在执行
let ele = "";
let arr=[];  //存放当前棋子可以走的位置
let qizi = document.getElementsByClassName("qizi");
let qipan = document.getElementsByClassName("weizhi");
let wall = document.getElementsByClassName("wall")[0];
let wintitle = document.getElementsByClassName("wintitle")[0];
// 当前棋盘上点击的行和列
let row,line;
// 棋子
for(let i=0; i<qizi.length; i++){
    // 初始分配棋子的位置
    qizi[i].style.top = (qizi[i].getAttribute("row")-1)*84+"px";
    qizi[i].style.left = (qizi[i].getAttribute("line")-1)*84+"px";
    // 点击棋子时
    againClickFn();
}
// 棋盘
for(let i=0; i<90; i++) {
    // 给棋盘上90个位置分配对应的行和列
    qipan[i].setAttribute("row",weizhiObj[i].row );
    qipan[i].setAttribute("line",weizhiObj[i].line );
    // 点击棋盘
    qipan[i].onclick = function(){
      // 获取点击的行列
      row= qipan[i].getAttribute("row");
      line= qipan[i].getAttribute("line");
      // 没吃子，移动  必须是在选中了棋子，且是当前执行方的棋子
      if(ele && ele.getAttribute("item")==run){
        Move(); 
       
      }
     
    }
}



// 以下全是封装的全局方法

// 让所有棋子缩放还原的方法
function sizeReduction(){
    for(let i=0; i<qizi.length; i++){
       qizi[i].style.transform = "scale(1)";
    }
}

// 每当有棋子被删除，重新分配点击事件的函数
function againClickFn(){
    for(let i=0; i<qizi.length; i++){
        // 点击棋子时
        qizi[i].onclick = function(){
          let index=i;    
          row= qizi[i].getAttribute("row");
          line= qizi[i].getAttribute("line");
          // 还原所有棋子的尺寸
          sizeReduction();
          // 选中的是正要走的一方的棋子，此时要进行棋子放大
          if(qizi[i].getAttribute("item")==run){
            // 已经有棋子被选中
            ele = qizi[i];
            qizi[i].style.transform = "scale(1.2)";
            // 根据不同的规则得出可以走的位置
            cheRule(qizi[i]);  // 车 
            paoRule(qizi[i]); //炮
            zuRule(qizi[i]); //兵
            shiRule(qizi[i]); // 士
            shuaiRule(qizi[i]); // 帅
            xiangRule(qizi[i]); // 相
            maRule(qizi[i]); //马
          }else{   // 选中的不是正要走的一方的棋子，此时要进行吃子的判断
            // 吃子
            cheKillEnemy(index);  // 车
            paoKillEnemy(index); //炮
            let live1=false
            let live2=false
            for(let i=0;i<qizi.length;i++){
                if(qizi[i].getAttribute("live")=="1"){
                    live1 = true
                }
            }
            for(let i=0;i<qizi.length;i++){
                if(qizi[i].getAttribute("live")=="2"){
                    live2 = true
                }
            }
            if(!live1){
                wall.style.display="block";
                wintitle.innerHTML="红方获胜"
                wintitle.style.color="red"
            }
            if(!live2){
                wall.style.display="block";
                wintitle.innerHTML="黑方获胜"
                wintitle.style.color="black"
            }
            ele="";
            // 吃子之后重新分配事件
            againClickFn();      
          }
          
        }
      }
}
// 车的走法规则
function cheRule(value){
    let allowArr=[];
    let noAllowArr=[]
    if(value.getAttribute("rule")=="车"){
        let row = value.getAttribute("row");
        let line = value.getAttribute("line");
        // 判断整个棋盘能走的位置
        for(let i=0; i<90; i++) {
            if(weizhiObj[i].row==row || weizhiObj[i].line==line){
                allowArr.push(weizhiObj[i])
            }
        }
        // 过滤掉已经存在棋子的位置
        for(let i=0; i<qizi.length; i++) {
           if(qizi[i].getAttribute("row")==value.getAttribute("row") || qizi[i].getAttribute("line")==value.getAttribute("line")){
             noAllowArr.push({row:parseFloat(qizi[i].getAttribute("row")) ,
             line:parseFloat(qizi[i].getAttribute("line")) ,
             item:qizi[i].getAttribute("item")
            })
           }
        }

        
        // 同行阻隔判断
        for(let i=0; i<noAllowArr.length; i++) {
            if(row==noAllowArr[i].row) {
                // 符合这个条件说明是同一行
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].line<noAllowArr[i].line && noAllowArr[i].line<line){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].line>noAllowArr[i].line && noAllowArr[i].line>line){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
            }
        }
        // 同列阻隔判断
        for(let i=0; i<noAllowArr.length; i++) {
            if(line==noAllowArr[i].line) {
                // 符合这个条件说明是同一列
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].row<noAllowArr[i].row && noAllowArr[i].row<row){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].row>noAllowArr[i].row && noAllowArr[i].row>row){
                        allowArr.splice(j,1);
                        j--;
                    }
                  
                }
            }
        }
        // 将自己棋子的位置过滤掉
        for(let i=0; i<noAllowArr.length; i++) {
          for(let j=0;j<allowArr.length;j++){
                if(noAllowArr[i].row == allowArr[j].row && noAllowArr[i].line == allowArr[j].line && noAllowArr[i].item == run){
                    allowArr.splice(j,1);
                    j--;
                }  
          }        
        }
        arr=allowArr;         
    }
  
}
// 车,兵,士,帅,相,马的吃子判断
function cheKillEnemy(index){
    if( ele && (ele.getAttribute("rule")=="车" || ele.getAttribute("rule")=="兵" || ele.getAttribute("rule")=="士" || ele.getAttribute("rule")=="帅" || ele.getAttribute("rule")=="相"|| ele.getAttribute("rule")=="马")){
        for(let i=0; i<arr.length;i++){
            if(arr[i].row==row && arr[i].line==line){
              // 还原所有棋子的尺寸
              sizeReduction();
              ele.setAttribute("row", row);
              ele.setAttribute("line", line);
              ele.style.top = (arr[i].row-1)*84+"px";
              ele.style.left = (arr[i].line-1)*84+"px";
              qizi[index].remove();
              ele="";
                if(run=="red"){
                    run ="black";
                }else{
                    run = "red"
                }  
              break;
            }
        } 
    }
   
}
// 没吃子的移动
function Move(){
    for(let i=0; i<arr.length;i++){
        if(arr[i].row==row && arr[i].line==line){
            // 还原所有棋子的尺寸
            sizeReduction();
            ele.setAttribute("row", row);
            ele.setAttribute("line", line);
            ele.style.top = (arr[i].row-1)*84+"px";
            ele.style.left = (arr[i].line-1)*84+"px";
            ele="";
            if(run=="red"){
                run ="black";
            }else{
                run = "red"
            }  
        }
    }      
}
// 炮的走法规则
function paoRule(value){
    let allowArr=[];
    let noAllowArr=[]
    if(value.getAttribute("rule")=="炮"){
        let row = value.getAttribute("row");
        let line = value.getAttribute("line");
        // 判断整个棋盘能走的位置
        for(let i=0; i<90; i++) {
            if(weizhiObj[i].row==row || weizhiObj[i].line==line){
                allowArr.push(weizhiObj[i])
            }
        }
        // 找已经存在棋子的位置
        for(let i=0; i<qizi.length; i++) {
           if(qizi[i].getAttribute("row")==value.getAttribute("row") || qizi[i].getAttribute("line")==value.getAttribute("line")){
             noAllowArr.push({row:parseFloat(qizi[i].getAttribute("row")) ,
             line:parseFloat(qizi[i].getAttribute("line")) ,
             item:qizi[i].getAttribute("item")
            })
           }
        }

        
        // 同行阻隔判断
        for(let i=0; i<noAllowArr.length; i++) {
            if(row==noAllowArr[i].row) {
                // 符合这个条件说明是同一行
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].line<noAllowArr[i].line && noAllowArr[i].line<line){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].line>noAllowArr[i].line && noAllowArr[i].line>line){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
            }
        }
        // 同列阻隔判断
        for(let i=0; i<noAllowArr.length; i++) {
            if(line==noAllowArr[i].line) {
                // 符合这个条件说明是同一列
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].row<noAllowArr[i].row && noAllowArr[i].row<row){
                        allowArr.splice(j,1);
                        j--;
                    }
                }
                for(let j=0;j<allowArr.length;j++){
                    if(allowArr[j].row>noAllowArr[i].row && noAllowArr[i].row>row){
                        allowArr.splice(j,1);
                        j--;
                    }
                  
                }
            }
        }
        // 将有棋子的位置过滤掉
        for(let i=0; i<noAllowArr.length; i++) {
          for(let j=0;j<allowArr.length;j++){
                if(noAllowArr[i].row == allowArr[j].row && noAllowArr[i].line == allowArr[j].line){
                    allowArr.splice(j,1);
                    j--;
                }  
          }        
        }
        arr=allowArr;         
    }
   
}
// 炮的吃子判断
function paoKillEnemy(index){
    if( ele && ele.getAttribute("rule")=="炮"){
       enemy = qizi[index];
       // 炮上下移动
       if(ele && ele.getAttribute("line")== enemy.getAttribute("line")){
          // 要吃的棋子在上方
          if(ele && parseFloat(ele.getAttribute("row"))>parseFloat(enemy.getAttribute("row"))){
             let maxRow = parseFloat(ele.getAttribute("row")) ;
             let minROW = parseFloat(enemy.getAttribute("row"));
             let num=0
             for(let i=0; i<qizi.length;i++){
                 if(maxRow>qizi[i].getAttribute("row") && minROW<qizi[i].getAttribute("row")&&
                 qizi[i].getAttribute("line")==ele.getAttribute("line")){
                    num++;
                 }
             }
             if(num==1){
                // 还原所有棋子的尺寸
                sizeReduction();
                ele.setAttribute("row", row);
                ele.setAttribute("line", line);
                ele.style.top = (row-1)*84+"px";
                ele.style.left = (line-1)*84+"px";
                qizi[index].remove();
                ele="";
                if(run=="red"){
                    run ="black";
                }else{
                    run = "red"
                }  
             }
             
          }
          // 要吃的棋子在下方
          if(ele && parseFloat(ele.getAttribute("row")) <parseFloat(enemy.getAttribute("row"))){   
            let maxRow =parseFloat(enemy.getAttribute("row")); 
            let minROW =parseFloat(ele.getAttribute("row"));
            console.log(maxRow,minROW);
            let num=0;
            for(let i=0; i<qizi.length;i++){
                if(maxRow>qizi[i].getAttribute("row") && minROW<qizi[i].getAttribute("row")&&
                qizi[i].getAttribute("line")==ele.getAttribute("line")){
                   num++;
                }
            }
            if(num==1){
               // 还原所有棋子的尺寸
               sizeReduction();
               ele.setAttribute("row", row);
               ele.setAttribute("line", line);
               ele.style.top = (row-1)*84+"px";
               ele.style.left = (line-1)*84+"px";
               qizi[index].remove();
               ele="";
               if(run=="red"){
                   run ="black";
               }else{
                   run = "red"
               }  
            }
           
          }
       }
       // 炮左右移动
       if(ele && ele.getAttribute("row")== enemy.getAttribute("row")){
        // 要吃的棋子在左边
        if(ele && parseFloat(ele.getAttribute("line"))>parseFloat(enemy.getAttribute("line"))){
           let maxLine = parseFloat(ele.getAttribute("line")) ;
           let minLine = parseFloat(enemy.getAttribute("line"));
           let num=0
           for(let i=0; i<qizi.length;i++){
               if(maxLine>qizi[i].getAttribute("line") && minLine<qizi[i].getAttribute("line")&&
               qizi[i].getAttribute("row")==ele.getAttribute("row")){
                  num++;
               }
           }
           if(num==1){
              // 还原所有棋子的尺寸
              sizeReduction();
              ele.setAttribute("row", row);
              ele.setAttribute("line", line);
              ele.style.top = (row-1)*84+"px";
              ele.style.left = (line-1)*84+"px";
              qizi[index].remove();
              ele="";
              if(run=="red"){
                  run ="black";
              }else{
                  run = "red"
              }  
           }
           
        }
      
        // 要吃的棋子在右边
        if(ele && parseFloat(ele.getAttribute("line"))<parseFloat(enemy.getAttribute("line"))){
           let minLine = parseFloat(ele.getAttribute("line")) ;
           let maxLine = parseFloat(enemy.getAttribute("line"));
           let num=0
           for(let i=0; i<qizi.length;i++){
               if(maxLine>qizi[i].getAttribute("line") && minLine<qizi[i].getAttribute("line")&&
               qizi[i].getAttribute("row")==ele.getAttribute("row")){
                  num++;
               }
           }
           if(num==1){
              // 还原所有棋子的尺寸
              sizeReduction();
              ele.setAttribute("row", row);
              ele.setAttribute("line", line);
              ele.style.top = (row-1)*84+"px";
              ele.style.left = (line-1)*84+"px";
              qizi[index].remove();
              ele="";
              if(run=="red"){
                  run ="black";
              }else{
                  run = "red"
              }  
           }
           
        }
      
     }
      
       
    }
   
}
// 兵的走法规则
function zuRule(value){
   
    if( ele && ele.getAttribute("rule")=="兵"){
        arr=[] 
        if(value.getAttribute("item")=="red"){
            // 当兵没有过河只能前进
            if(value.getAttribute("row")>5){
                arr.push({row:value.getAttribute("row")-1,line:value.getAttribute("line")-0});
            }else{// 兵过河了，可以左右走
                arr.push({row:value.getAttribute("row")-1,line:value.getAttribute("line")-0});
                arr.push({row:value.getAttribute("row")-0,line:value.getAttribute("line")-1});
                arr.push({row:value.getAttribute("row")-0,line:value.getAttribute("line")-0+1});
            }
           
        }else{
            // 当兵没有过河只能前进
            if(value.getAttribute("row")<6){
                arr.push({row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0});
            }else{// 兵过河了，可以左右走
                arr.push({row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0});
                arr.push({row:value.getAttribute("row")-0,line:value.getAttribute("line")-1});
                arr.push({row:value.getAttribute("row")-0,line:value.getAttribute("line")-0+1});
            }
        }
        // 判断这些位置是否有己方棋子
        try {
            for(let i=0; i<qizi.length; i++){
                for(let j=0; j<arr.length; j++){
                    if(arr[j].row == parseFloat(qizi[i].getAttribute("row"))
                     && arr[j].line == parseFloat(qizi[i].getAttribute("line")) 
                     && qizi[i].getAttribute("item")==run){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }
        } catch (error) {
          
        }
       
           
    }
}
// 士的走法规则
function shiRule(value){
    if( ele && ele.getAttribute("rule")=="士"){
        arr=[] 
        // 红方
        if(value.getAttribute("item")=="red"){
            if(parseFloat(value.getAttribute("row")) == 9){
                arr=[{row:8,line:4},{row:10,line:4},{row:10,line:6},{row:8,line:6}]
            }else{
                arr=[{row:9,line:5}]
            }
           
        }else{ // 黑方
            if(parseFloat(value.getAttribute("row")) == 2){
                arr=[{row:1,line:4},{row:3,line:4},{row:1,line:6},{row:3,line:6}]
            }else{
                arr=[{row:2,line:5}]
            }
        }
        // 判断这些位置是否有己方棋子
        try {
            for(let i=0; i<qizi.length; i++){
                for(let j=0; j<arr.length; j++){
                    if(arr[j].row == parseFloat(qizi[i].getAttribute("row"))
                    &&arr[j].line == parseFloat(qizi[i].getAttribute("line"))
                    &&qizi[i].getAttribute("item")==run){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }   
        } catch (error) {
           
        }
      
          
    }
}
// 将的走法规则
function shuaiRule(value){
    if( ele && ele.getAttribute("rule")=="帅"){
        arr= [];
        let allow =[{row:value.getAttribute('row')-1,line:value.getAttribute('line')-0},{row:value.getAttribute('row')-0+1,line:value.getAttribute('line')-0},
            {row:value.getAttribute('row')-0,line:value.getAttribute('line')-1},{row:value.getAttribute('row')-0,line:value.getAttribute('line')-0+1}]
        // 红方
        if(value.getAttribute("item")=="red"){
          let nine=[{row:8,line:4},{row:8,line:5},{row:8,line:6},{row:9,line:4},{row:9,line:5},{row:9,line:6},{row:10,line:4},{row:10,line:5},{row:10,line:6}];
          for(let i=0; i<nine.length; i++){
            for(let j=0; j<allow.length; j++){
              if(nine[i].row == allow[j].row && nine[i].line == allow[j].line){
                  arr.push(allow[j])
              }
            } 
          }
           
        }else{ // 黑方
          let nine=[{row:3,line:4},{row:3,line:5},{row:3,line:6},{row:2,line:4},{row:2,line:5},{row:2,line:6},{row:1,line:4},{row:1,line:5},{row:1,line:6}];
          for(let i=0; i<nine.length; i++){
            for(let j=0; j<allow.length; j++){
              if(nine[i].row == allow[j].row && nine[i].line == allow[j].line){
                  arr.push(allow[j])
              }
            } 
          }
         
        }
        // 判断这些位置是否有己方棋子
        try {
            for(let i=0; i<qizi.length; i++){
                for(let j=0; j<arr.length; j++){
                    if(arr[j].row == parseFloat(qizi[i].getAttribute("row")) 
                    && arr[j].line == parseFloat(qizi[i].getAttribute("line")) 
                    && qizi[i].getAttribute("item")==run){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }  
        } catch (error) {
           
        }
     
          
    }
}
// 相的走法规则
function xiangRule(value){
    if( ele && ele.getAttribute("rule")=="相"){
        arr= [];
        let allow =[{row:value.getAttribute('row')-0+2,line:value.getAttribute('line')-0-2},{row:value.getAttribute('row')-2,line:value.getAttribute('line')-2},
            {row:value.getAttribute('row')-0+2,line:value.getAttribute('line')-0+2},{row:value.getAttribute('row')-2,line:value.getAttribute('line')-0+2}]
        // 红方
        if(value.getAttribute("item")=="red"){
          let nine=[{row:6,line:3},{row:6,line:7},{row:8,line:1},{row:8,line:5},{row:8,line:9},{row:10,line:3},{row:10,line:7}];
          for(let i=0; i<nine.length; i++){
            for(let j=0; j<allow.length; j++){
              if(nine[i].row == allow[j].row && nine[i].line == allow[j].line){
                  arr.push(allow[j])
              }
            } 
          }
           
        }else{ // 黑方
          let nine=[{row:1,line:3},{row:1,line:7},{row:3,line:1},{row:3,line:5},{row:3,line:9},{row:5,line:3},{row:5,line:7}];
          for(let i=0; i<nine.length; i++){
            for(let j=0; j<allow.length; j++){
              if(nine[i].row == allow[j].row && nine[i].line == allow[j].line){
                  arr.push(allow[j])
              }
            } 
          }
         
        }
        // 判断这些位置是否有己方棋子
        try {
            for(let i=0; i<qizi.length; i++){
                for(let j=0; j<arr.length; j++){
                    if(arr[j].row == parseFloat(qizi[i].getAttribute("row")) 
                    && arr[j].line == parseFloat(qizi[i].getAttribute("line")) 
                    && qizi[i].getAttribute("item")==run){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }  
        } catch (error) {
           
        }
        for(let i=0; i<arr.length; i++){
            let flag = false;
            let preventRow = (parseFloat(ele.getAttribute("row")) + arr[i].row) / 2;
            let preventLine = (parseFloat(ele.getAttribute("line")) + arr[i].line) / 2;
            for(let j=0; j<qizi.length;j++){
                if(qizi[j].getAttribute("row")==preventRow && qizi[j].getAttribute("line")==preventLine){
                    flag = true;
                }
            }
            if(flag){
                arr.splice(i,1);
                i--;
            }
        }
    }
}
// 马的走法规则
function maRule(value){
    if( ele && ele.getAttribute("rule")=="马"){
        arr=[
            {row:value.getAttribute("row")-0+2,line:value.getAttribute("line")-0+1,dir:{row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0}},
            {row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0+2,dir:{row:value.getAttribute("row")-0,line:value.getAttribute("line")-0+1}},
            {row:value.getAttribute("row")-0-1,line:value.getAttribute("line")-0+2,dir:{row:value.getAttribute("row")-0,line:value.getAttribute("line")-0+1}},
            {row:value.getAttribute("row")-0-2,line:value.getAttribute("line")-0+1,dir:{row:value.getAttribute("row")-1,line:value.getAttribute("line")-0}},
            {row:value.getAttribute("row")-0-2,line:value.getAttribute("line")-0-1,dir:{row:value.getAttribute("row")-1,line:value.getAttribute("line")-0}},
            {row:value.getAttribute("row")-0-1,line:value.getAttribute("line")-0-2,dir:{row:value.getAttribute("row")-0,line:value.getAttribute("line")-1}},
            {row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0-2,dir:{row:value.getAttribute("row")-0,line:value.getAttribute("line")-1}},
            {row:value.getAttribute("row")-0+2,line:value.getAttribute("line")-0-1,dir:{row:value.getAttribute("row")-0+1,line:value.getAttribute("line")-0}},
        ]
          // 判断这些位置是否有己方棋子
          for(let i=0; i<qizi.length; i++){
            for(let j=0; j<arr.length; j++){
                if(arr[j].row == parseFloat(qizi[i].getAttribute("row")) 
                && arr[j].line == parseFloat(qizi[i].getAttribute("line")) 
                && qizi[i].getAttribute("item")==run){
                    arr.splice(j,1);
                    j--;
                }
            }
          }
        try {
            // 存在阻隔的位置过滤
            for(let i=0; i<qizi.length; i++){
                for(let j=0; j<arr.length; j++){
                   if (arr[j].dir.row== parseFloat(qizi[i].getAttribute("row"))
                   && arr[j].dir.line== parseFloat(qizi[i].getAttribute("line"))){
                    arr.splice(j,1);
                    j--
                   }
                }
            }
        } catch (error) {
            
        }
        console.log(arr);
        
        
    }  
}
李小楓
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js简单做个象棋
好好打代码
01-09 494
【代码】js简单做个象棋。
通过原生 JS 写一个象棋小游戏，感受无穷乐趣
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
03-02 1804
前言最近没什么需求，借着上班摸鱼的时间，写点代码玩玩。过年的时候总是和爷爷下象棋，这次用原生JS写了一个象棋小游戏，但是技术有限，只能自己一个人左右手互博来下棋。象棋规则基本上都实现了，下面就来给大家分享一下。我正在参与码上掘金编程挑战赛，请为我点赞吧！一、绘制棋盘和棋子游戏的元素是棋盘和棋子，图片都是在网上搜，然后用截图工具截下来，就可以直接使用了。棋子通过遍历数组来渲染，因为棋子的种类很多，所...
使用 HTML、CSS 和 JS 制作一个中国象棋
热门推荐
努力是为了站在万人之中，成为别人的光
07-24 2万+
给大家安利一个免费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏：🌟【100个摸鱼小游戏】（源码永久免费开源）直接跳到末尾 参与评论送书 直接跳到末尾 领取完整源码 快速跳转 如何高效学习目前已上线的小游戏有90+个游戏入口地址有多个：在线演示地址：https://haiyong.site/moyu/xiangqi/源码可在文末免费获取目录结构如下：
js+html 象棋游戏 可以简单人机对战
一步一个脚印，踏实努力，向着目标前进
07-10 1157
实现人机对战的象棋游戏需要更多的代码和逻辑。下面是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来实现人机对战的象棋游戏。在上述代码中，我们首先从所有未选中的电脑棋子中随机选择一个棋子。然后，我们获取该棋子的所有合法移动，并从中随机选择一个目标位置。你可以根据需要自定义电脑移动的逻辑，比如根据棋盘评估函数来选择最佳的移动，或者实现一个更加智能的电脑玩家。电脑移动的逻辑可以根据具体需求来实现。以下是一个简单的示例，展示了一个随机移动的电脑玩家。
javascript代码-使用JS中国象棋AI人工智能 人机对战的源代码
05-02
——学习参考资料：仅用于个人学习使用！ javascript代码-使用JS中国象棋AI人工智能 人机对战的源代码
maple-web:笑小枫系列-vue页面展示
03-21
枫树一个Vue.js项目构建设置# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the ...
小枫书店 整理收藏东东的软件
03-16
可以整合自己收藏的文章，书本，网页，很好用的小软件，试试吧
小枫拟态UI5.0个人主页html免费版.zip
09-03
导入源码到站点的根目录 利用宝塔/主机把index.html文件的搜索 小枫关键词 改成你自己的名字，搜索 1809185784关键词 替换成你自己的QQ...继续找到路径 \assets\js\index.js 的文件 代码从第81行-118行 修改里面的文字
剖析 Vue.js 内部运行机制.pdf
03-14
剖析 Vue.js 内部运行机制.pdf
comet4j的jar包、js、实例
05-05
comet4j的jar包、js、实例，comet4j.js.rar】comet4j-tomcat6.jar】comet4j-tomcat7.jar
基于 HTML、CSS 和 JS 的中国象棋游戏
07-24
使用技术：HTML+CSS+JS 在线演示地址：https://haiyong.site/moyu/xiangqi/ 说明：中国象棋游戏，点击新手或者初级即可开始游戏，棋盘可放大，手机电脑均可玩，源码完整，代码注释清晰。 使用场景：HTML大作业、个人网站、网页模板、游戏网站等 适用人群：初学者、资深专家均可
JS中国象棋
11-03
JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋 JS中国象棋
js 象棋游戏 _ 支持双方在线对战
04-20
NULL 博文链接：https://jiangxiao-2000.iteye.com/blog/1901699
纯JS象棋 AI算法
05-21
AI 人工智能 象棋游戏 AI 人工智能 象棋游戏 AI 人工智能 象棋游戏
js中国象棋游戏
03-12
js中国象棋游戏
javascript实现的中国象棋单机双人
u014339476的专栏
03-25 451
试玩了下，简单实现了人和人对战，没有电脑对战模式，但感觉也够强大了，给大家分享下。 原创不易，转载请注明出处：javascript实现的中国象棋单机双人 分享代码下载地址：http://www.zuidaima.com/share/1708009934785536.htm 　　http://www.huihui.cn/share/34498342 　　htt
Java游戏开发——中国象棋联机版
墨染秦月的博客
01-04 1万+
游戏介绍： 中国象棋是起源于中国的一种棋戏，属于二人对抗性游戏的一种，在中国有着悠久的历史。由于规则简单，趣味性强，成为流行极为广泛的棋类游戏。 中国象棋使用方形格状棋盘及红黑二色圆形棋子进行对弈，棋盘上有十条横线、九条竖线共分成90个交叉点；中国象棋的棋子共有32个，每种颜色16个棋子，分为7个兵种，摆放和活动在交叉点上。双方交替行棋，先把对方的将（帅）“将死”的一方获胜。 本篇博文开发了一...
超级简单的纯js 象棋,看一遍你也会写
那个西瓜有点甜
03-04 9734
超级简单的纯js 象棋,看一遍你也会写
js提示string转json对象
最新发布
10-09
这是一个内置的JavaScript方法，它接受一个字符串作为参数，并返回一个相应的JSON对象。 下面是一个示例： ```javascript var jsonString = '{"name":"John", "age":30, "city":"New York"}'; var jsonObject = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值