vue3围棋项目

最新推荐文章于 2022-11-02 14:11:31 发布
最新推荐文章于 2022-11-02 14:11:31 发布
阅读量704 收藏 2
点赞数
文章标签： vue.js 前端 css html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45556847/article/details/127446620
版权

前言：很久之前闲着没事的时候写的，当时技术特菜，代码写的极其不规范，堪称shit山代码，请看到的大佬轻喷。

废话不多说代码如下：

 这个vue3的围棋项目核心的代码就是在这个chessboard 的组件里面。

下面是组件中的代码：

<template>
  <div class="chessBoardPage_main">
    <!-- <div class="chessBoardPage_head">
      <div class="chessBoardPage_head_title"></div>
    </div> -->
    <div class="chessBoardPage_container">
      <div class="theSlot">
        <slot name="select"></slot>
      </div>
      <div class="chessBoardPage_container_chessboard">
        <div class="chessarea">
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'A' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'B' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'C' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'D' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'E' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'F' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'G' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'H' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'I' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'J' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'K' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'L' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'M' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'N' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'O' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'P' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'Q' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'R' + item.id"
            @click="chessdown"
          ></span>
          <span
            v-for="item in numberarray"
            :key="item.index"
            :class="'S' + item.id"
            @click="chessdown"
          ></span>
        </div>
        <div class="chessBoard_control">
          <div class="control_left">
            <span class="iconfont icon-a-Chevron-Left2" @click="clearAllChess"></span>
            <span class="iconfont icon-Chevron-Left"></span>
            <span class="iconfont icon-caret-left" @click="clearlastChess"></span>
            <span class="iconfont icon-caret-right"></span>
            <span class="iconfont icon-Chevron-Right"></span>
            <span class="iconfont icon-a-Chevron-Right2"></span>
            <input type="text" />
            <span class="go">go</span>
          </div>
          <div class="stepnumber" @click="openchessnumber">显示步数</div>
        </div>
      </div>
      <div class="otherSlot">
        <slot name="menu"></slot>
      </div>
    </div>
    <!-- <div class="chessBoardPage_foot"></div> -->
    <audio :src="sound" controls style="display: none"></audio>
  </div>
</template>

<script>
import { onMounted, onUnmounted, onUpdated, reactive, ref, watch, watchEffect } from '@vue/runtime-core';
import {copyObj} from "../hooks/myconfig.js";
import "../hooks/myconfig.js";
import sound from "../assets/sound/落子.mp3";
import "../assets/font_HEMA-1/iconfont.css"
import "../assets/font3/iconfont.css"
import bus from "../hooks/Eventbus.js"
export default {
  // props:['play'],
  setup() {
    // 数据
    const numberarray = [
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 },
      { id: 5 },
      { id: 6 },
      { id: 7 },
      { id: 8 },
      { id: 9 },
      { id: 10 },
      { id: 11 },
      { id: 12 },
      { id: 13 },
      { id: 14 },
      { id: 15 },
      { id: 16 },
      { id: 17 },
      { id: 18 },
      { id: 19 },
    ];
    let step = ref(0);
    // chessSequence记录落子的情况
    let chessSequence = [];
    let allBlack = [];
    let allWhite = [];
    let theSelected2 = [];
    let theSelected = [];
    let openstep = 0;
    let flag = false;
    // 创建二维数组
    let chesslist = new Array(19);
    let b = new Array(19);

    for (let i = 0; i < 19; i++) {
      chesslist[i] = new Array(19);
      b[i] = new Array(19);
      for (let j = 0; j < 19; j++) {
        chesslist[i][j] = {
          // 颜色对应表：   0 => 未落子 | 1 => 黑子 | 2 => 白子 | 3 => 为棋盘边缘（无气）
          color: 0,
          topcolor: 0,
          bottoncolor: 0,
          leftcolor: 0,
          rightcolor: 0,
        };
      }
    }
    

    // 生命周期钩子
      // 当路由为 '/playchess' 时无需任何条件就可以下棋
      if (window.location.pathname === '/playchess') {
        flag = true
      }
    // 接受来自其他组件的传值，用来开启棋盘上落子的功能
    bus.on('play',val =>{
      console.log(val);
        flag = val[0]
        step.value = val[1]
    })
    


    // 方法
    function chessdown(e) {
      console.log(flag);
      if (e.target.classList[1] === undefined && flag) {
        // 落子声音播放
        document.querySelector('audio').play()
        document.querySelector('audio').volume = 0.2
        // 棋子变色
        step.value++;
        if (step.value % 2 !== 0) {
          e.target.classList.add("black_chessman");
        } else {
          e.target.classList.add("white_chessman");
        }
        // 将落子的位置与颜色push在chessSequence数组中
        chessSequence.push({
          position: e.target.classList[0],
          chesscolor: e.target.classList[1].slice(0, 5),
          chessnumber: step.value,
        }); 
      }
    }
    //#region
    // 记录更新每处落子点的颜色
    function updateChessColor() {
        const allChess = document.querySelector(".chessarea").children;
        for (let i = 0; i < allChess.length; i++) {
            if (allChess[i].classList[1] === undefined) {
              let x = parseInt(i / 19);
              let y = i % 19;
              // console.log(x,y);
              chesslist[x][y].color = 0;
              chesslist[x][y].index = i;
            } else if (allChess[i].classList[1] === "black_chessman") {
              let x = parseInt(i / 19);
              let y = i % 19;
              // console.warn(x,y);
              chesslist[x][y].color = 1;
              chesslist[x][y].index = i;
            } else if (allChess[i].classList[1] === "white_chessman") {
              let x = parseInt(i / 19);
              let y = i % 19;
              // console.error(x,y);
              chesslist[x][y].color = 2;
              chesslist[x][y].index = i;
            }
          }
      }
    //#endregion
    //#region
      // 记录更新每处落子点上下左右的颜色
      function updateAroundColor() {
          for (let i = 0; i < 19; i++) {
            for (let j = 0; j < 19; j++) {
              if (i > 0 && i < 18 && j > 0 && j < 18) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if(i === 0 && j === 0){
                chesslist[i][j].topcolor = 3
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = 3
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if (i === 0 && j === 18) {
                chesslist[i][j].topcolor = 3
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = 3
              }
              else if (i === 18 && j === 0) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = 3
                chesslist[i][j].leftcolor = 3
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if (i === 18 && j === 18) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = 3
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = 3
              }
              else if (i === 0 && j > 0 && j < 18) {
                chesslist[i][j].topcolor = 3
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if (i === 18 && j > 0 && j < 18) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = 3
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if (j === 0 && i > 0 && i < 18) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = 3
                chesslist[i][j].rightcolor = chesslist[i][j+1].color
              }
              else if (j === 18 && i > 0 && i < 18) {
                chesslist[i][j].topcolor = chesslist[i-1][j].color
                chesslist[i][j].bottoncolor = chesslist[i+1][j].color
                chesslist[i][j].leftcolor = chesslist[i][j-1].color
                chesslist[i][j].rightcolor = 3
              }
            }
          }
          console.warn(chesslist);
          console.log(chessSequence);
        }
    //#endregion
    //#region 
    function isAliveBlack() {
      let theQi = 0;
      // allBlack 为从二维数组中提取出的一维数组，里面储存了棋盘上的所有黑子
      allBlack = chesslist.twoDArrFilter((item)=>{
        return item.color === 1 
      })

      // theFirstBlack 中储存了 allBlack数组中的第一个棋子的数据，条件为：theSelected数组中不能有该子的记录
      let theFirstBlack = allBlack.find((item1)=>{
        if (theSelected.length !== 0 ) {
          return theSelected.every((item2)=>{
            return item1.index !== item2.index
          }) 
        }
        else if (theSelected.length === 0) {
          return true
        }
      })
    
      // 当前遍历的棋子的数据（theFirstBlack），记录进 theSelected 数组
      if (theFirstBlack !== undefined) {
        theSelected.push(theFirstBlack);
      }
      // 判断当前遍历的子的气
      if(theFirstBlack !== undefined)
      {
          if (theFirstBlack.topcolor === 0) {
            theQi++
          }
          if (theFirstBlack.bottoncolor === 0) {
            theQi++
          }
          if (theFirstBlack.leftcolor === 0) {
            theQi++
          }
          if (theFirstBlack.rightcolor === 0) {
            theQi++
          }
          for (let i = 0; i < allBlack.length; i++) {
            if (allBlack[i].index === theFirstBlack.index) {
              allBlack[i].Qi = theQi
            }
          }
          theFirstBlack.Qi = theQi
          theQi = 0 
      }
      
      console.log('allBlack',allBlack);
      console.log('theFirstBlack',theFirstBlack);
      console.log('theSeleted',theSelected);

      
      console.log(!allBlack.every((item1)=>{
          return theSelected.some((item2)=>{
            return item1.index === item2.index
          }) 
      }));
      // 当 allBlack数组中所有子被遍历完后，停止递归
      if 
      (
        !(allBlack.every((item1)=>{
          return theSelected.some((item2)=>{
            return item1.index === item2.index
          }) 
      }))
      ) 
      {
        isAliveBlack()
      }  
    }
    //#endregion
    //#region 
    function isAliveWhite() {
      let theQi = 0;
      // allWhite 为从二维数组中提取出的一维数组，里面储存了棋盘上的所有黑子
      allWhite = chesslist.twoDArrFilter((item)=>{
        return item.color === 2 
      })

      // theFirstWhite 中储存了 allBlack数组中的第一个棋子的数据，条件为：theSelected2数组中不能有该子的记录
      let theFirstWhite = allWhite.find((item1)=>{
        if (theSelected2.length !== 0 ) {
          return theSelected2.every((item2)=>{
            return item1.index !== item2.index
          }) 
        }
        else if (theSelected2.length === 0) {
          return true
        }
      })
    
      // 当前遍历的棋子的数据（theFirstBlack），记录进 theSelected2 数组
      if (theFirstWhite !== undefined) {
        theSelected2.push(theFirstWhite);
      }
      // 判断当前遍历的子的气
      if(theFirstWhite !== undefined)
      {
          if (theFirstWhite.topcolor === 0) {
            theQi++
          }
          if (theFirstWhite.bottoncolor === 0) {
            theQi++
          }
          if (theFirstWhite.leftcolor === 0) {
            theQi++
          }
          if (theFirstWhite.rightcolor === 0) {
            theQi++
          }
          for (let i = 0; i < allWhite.length; i++) {
            if (allWhite[i].index === theFirstWhite.index) {
              allWhite[i].Qi = theQi
            }
          }
          theFirstWhite.Qi = theQi
          theQi = 0 
      }
      
      console.log('allWhite',allWhite);
      console.log('theFirstWhite',theFirstWhite);
      console.log('theSeleted',theSelected2);

      
      console.log(!allWhite.every((item1)=>{
          return theSelected2.some((item2)=>{
            return item1.index === item2.index
          }) 
      }));
      // 当 allBlack数组中所有子被遍历完后，停止递归
      if 
      (
        !(allWhite.every((item1)=>{
          return theSelected2.some((item2)=>{
            return item1.index === item2.index
          }) 
      }))
      ) 
      {
        isAliveWhite()
      }  
    }
    //#endregion
    //#region 
     // 清除黑棋无气的子
     function clearDeadthBlack() {
          const allChess = document.querySelector(".chessarea").children;
          let allQi = 0;
          let allDeath = [];
          
        for (let i = 0; i < 5; i++) {
          // 重复以下操作5次可彻底防止大龙中有未加入 allDeath 数组的棋子
            for (let i = 0; i < allBlack.length; i++) {
              // 清除无气孤子
            if (allBlack[i].Qi === 0) {
              if (allBlack[i].topcolor !== 1 && allBlack[i].bottoncolor !== 1 && allBlack[i].leftcolor !== 1 && allBlack[i].rightcolor !== 1) {
                if (step.value % 2 === 0 && step.value !== 0) 
                {
                let k = allBlack[i].index
                allChess[k].classList.remove('black_chessman')
                }
                // 下面是落子不入气禁止行棋的逻辑
                else if(step.value % 2 !== 0){
                  let k = allBlack[i].index
                  allChess[k].classList.remove('black_chessman')
                  chessSequence.pop()
                  step.value = step.value - 1
                  alert('此处不入气，禁止落子')
                }
              }
            }
            // 清除无气大龙
            if (allBlack[i].topcolor === 1 || allBlack[i].bottoncolor === 1 || allBlack[i].leftcolor === 1 || allBlack[i].rightcolor === 1) {
              if (allDeath.length === 0) {
                allDeath.push(allBlack[i])
              }
              for (let j = 0; j < allDeath.length; j++) {
                if (allDeath.every(item => item.index !== allBlack[i].index)){  
                  if ((allBlack[i].index === allDeath[j].index  - 19 || allBlack[i].index === allDeath[j].index  + 19 || allBlack[i].index === allDeath[j].index - 1 || allBlack[i].index === allDeath[j].index + 1)) {
                    allDeath.push(allBlack[i])
                  }
                }
              } 
              console.warn('allDeath1',allDeath);
            }
          }
          // 反向遍历筛选一次防止大龙中有未加入 allDeath 数组的棋子
          for (let i = allBlack.length-1; i >= 0; i--) {
            if (allBlack[i].topcolor === 1 || allBlack[i].bottoncolor === 1 || allBlack[i].leftcolor === 1 || allBlack[i].rightcolor === 1) {
              for (let j = allDeath.length-1; j >= 0 ; j--) {
                if (allDeath.every(item => item.index !== allBlack[i].index)){  
                  if ((allBlack[i].index === allDeath[j].index  - 19 || allBlack[i].index === allDeath[j].index  + 19 || allBlack[i].index === allDeath[j].index - 1 || allBlack[i].index === allDeath[j].index + 1)) {
                    allDeath.push(allBlack[i])
                  }
                }
              } 
            } 
          } 
        }


        // 统计黑棋大龙总共的气
        
          for (let i = 0; i < allDeath.length; i++) {
            allQi = allDeath[i].Qi + allQi
          }
        
        console.warn('allDeath2',allDeath);
        console.warn('黑大龙的气2：',allQi);
        
        if ( allQi === 0 ) {
            // 下面是落子不入气禁止行棋的逻辑
            if(step.value % 2 !== 0 && allDeath.length !== 0)
            {
              const p = chessSequence[chessSequence.length-1].position
              for (let i = 0; i < allChess.length; i++) {
                if (allChess[i].classList[0] === p) {
                  allChess[i].classList.remove('black_chessman')
                  step.value = step.value - 1
                  chessSequence.pop()
                  alert('此处不入气，禁止落子')
                  return  // return 是为了跳出函数停止执行不然就会因为step被减1而执行下面的判断中的逻辑
                }
              }
            }
          if (step.value % 2 === 0 && step.value !== 0) {
            for (let j = 0; j < allDeath.length; j++) 
            {
            let k = allDeath[j].index
            allChess[k].classList.remove('black_chessman')
            }
          }     
        }
        else if(allQi !== 0){
          let del = allBlack.filter(item1 => {
            return allDeath.some(item2 => {
              return item1.index === item2.index
            })
          })
          for (let i = 0; i < allBlack.length; i++) {
            for (let j = 0; j < del.length; j++) {
              if (allBlack[i].index === del[j].index) {
                allBlack.splice(i,1)
              }
            }
          }
          console.log(allBlack);
          clearDeadthBlack()
        }
      }
    //#endregion
    //#region 
     // 清除白棋无气的子
      function clearDeadthWhite() {
        const allChess = document.querySelector(".chessarea").children;
          let allQi = 0;
          let allDeath = [];
          
          for (let i = 0; i < 5; i++) {// 重复以下操作5次可彻底防止大龙中有未加入 allDeath 数组的棋子
                for (let i = 0; i < allWhite.length; i++) {
                // 清除无气孤子
              if (allWhite[i].Qi === 0) {
                if (allWhite[i].topcolor !== 2 && allWhite[i].bottoncolor !== 2 && allWhite[i].leftcolor !== 2 && allWhite[i].rightcolor !== 2) {
                  if(step.value % 2 !== 0)
                    { 
                    let k = allWhite[i].index
                    allChess[k].classList.remove('white_chessman')
                    }
                    // 下面是落子不入气禁止行棋的逻辑
                  else if(step.value % 2 === 0 && step.value !== 0){
                    let k = allBlack[i].index
                    allChess[k].classList.remove('white_chessman')
                    chessSequence.pop()
                    step.value = step.value - 1
                    alert('此处不入气，禁止落子')
                  }
                }
              }
              // 清除无气大龙
              if (allWhite[i].topcolor === 2 || allWhite[i].bottoncolor === 2 || allWhite[i].leftcolor === 2 || allWhite[i].rightcolor === 2) {
                if (allDeath.length === 0) {
                  allDeath.push(allWhite[i])
                  // allQi = allQi + allWhite[i].Qi
                }
                for (let j = 0; j < allDeath.length; j++) {
                  if (allDeath.every(item => item.index !== allWhite[i].index)){  
                    if ((allWhite[i].index === allDeath[j].index  - 19 || allWhite[i].index === allDeath[j].index  + 19 || allWhite[i].index === allDeath[j].index - 1 || allWhite[i].index === allDeath[j].index + 1)) {
                      allDeath.push(allWhite[i])
                      // allQi = allQi + allWhite[i].Qi
                    }
                  }
                } 
                console.warn('allDeath1',allDeath);
              }
            }
            // 反向遍历筛选一次防止大龙中有未加入 allDeath 数组的棋子
            for (let i = allWhite.length-1; i >= 0; i--) {
              if (allWhite[i].topcolor === 2 || allWhite[i].bottoncolor === 2 || allWhite[i].leftcolor === 2 || allWhite[i].rightcolor === 2) {
                for (let j = allDeath.length-1; j >= 0 ; j--) {
                  if (allDeath.every(item => item.index !== allWhite[i].index)){  
                    if ((allWhite[i].index === allDeath[j].index  - 19 || allWhite[i].index === allDeath[j].index  + 19 || allWhite[i].index === allDeath[j].index - 1 || allWhite[i].index === allDeath[j].index + 1)) {
                      allDeath.push(allWhite[i])
                      
                    }
                  }
                } 
              } 
            } 
          }

        // 统计白棋大龙总共的气
        
          for (let i = 0; i < allDeath.length; i++) {
            allQi = allDeath[i].Qi + allQi
          }
        

        console.warn('allDeath2',allDeath);
        console.warn('白大龙的气2：',allQi);
        if ( allQi === 0 ) {
          // 下面是落子不入气禁止行棋的逻辑
          if (step.value % 2 === 0 && step.value !== 0 && allDeath.length !== 0)
            {
              const p = chessSequence[chessSequence.length-1].position
              for (let i = 0; i < allChess.length; i++) {
                if (allChess[i].classList[0] === p) {
                  allChess[i].classList.remove('white_chessman')
                  step.value = step.value - 1
                  chessSequence.pop()
                  alert('此处不入气，禁止落子')
                  return // return 是为了跳出函数停止执行不然就会因为step被减1而执行下面的判断中的逻辑
                }
              }
            }

          if(step.value % 2 !== 0)
           { 
             for (let j = 0; j < allDeath.length; j++) 
             {
               let k = allDeath[j].index
               allChess[k].classList.remove('white_chessman')
             }   
           }  
        }
        else if(allQi !== 0){
          let del = allWhite.filter(item1 => {
            return allDeath.some(item2 => {
              return item1.index === item2.index
            })
          })
          for (let i = 0; i < allWhite.length; i++) {
            for (let j = 0; j < del.length; j++) {
              if (allWhite[i].index === del[j].index) {
                allWhite.splice(i,1)
              }
            }
          }
          console.log(allWhite);
          clearDeadthWhite()
        }
      }
    //#endregion
    function openchessnumber(){
      openstep ++
      chessnumber()
      console.log('openstep',openstep);
    }

    // 棋子显示步数的逻辑
    function chessnumber() {
      if(chessSequence.length > 0 && openstep !== 0){
      switch (openstep % 3) {
        case 0:
          // 清除所有棋子上的步数标记
          for (let i = 0; i < chessSequence.length; i++) {
                const afterChess = chessSequence[i];
                document.querySelector("." + afterChess.position).innerHTML =
                  "";
              }
          break;
        case 1:
          // 显示当前棋子步数的逻辑
            const lastChess = chessSequence[chessSequence.length - 1];
            document.querySelector("." + lastChess.position).innerHTML = lastChess.chessnumber;
            if (step.value > 1) {
              const deleteLastChess = chessSequence[chessSequence.length - 2];
              document.querySelector("." + deleteLastChess.position).innerHTML = "";
            }
          break;
        case 2:
          // 显示所有棋子步数的逻辑
          const allChess = document.querySelector(".chessarea").children;
          for (let i = 0; i < chessSequence.length; i++) {
            for (let j = 0; j < allChess.length; j++) {  
              if (chessSequence[i].position === allChess[j].classList[0]) {
                let x = parseInt(j / 19);
                let y = j % 19;
                allChess[j].innerHTML = chessSequence[i].chessnumber
                // 被提子时，清除被提棋子上的步数
                updateChessColor()
                if (chesslist[x][y].color === 0) {
                  allChess[j].innerHTML = ''
                }
              }
            }
          }
          break;
        }
      }  
    }

    // 回退到未落子的状态（清光chessSequence数组和chesslist数组的落子记录）
    function clearAllChess() {
      if (step.value > 0) {
        const allChess = document.querySelector(".chessarea").children;
      for (let i = 0; i < allChess.length; i++) {
        allChess[i].classList.remove('white_chessman')
        allChess[i].classList.remove('black_chessman')
      }
      // 清除所有棋子上的步数标记
      for (let i = 0; i < chessSequence.length; i++) {
        const afterChess = chessSequence[i];
        document.querySelector("." + afterChess.position).innerHTML ="";
      }
      chessSequence = []
      step.value = 0
      }
    }
    // 回退到上一步落子的状态
    function clearlastChess() {
      if (step.value > 0) {
        const lastChess = chessSequence[chessSequence.length - 1];
        document.querySelector("." + lastChess.position).innerHTML = '';
        document.querySelector("." + lastChess.position).classList.remove('white_chessman');
        document.querySelector("." + lastChess.position).classList.remove('black_chessman');
        chessSequence.pop()
        step.value--
      }
    }

    // 监视器
    watch(step,()=>{
      
    
      updateChessColor()
      updateAroundColor()
       
      if(step.value % 2 !== 0)
      {
      theSelected2 = []
      isAliveWhite()
      clearDeadthWhite()
     
      updateChessColor()
      updateAroundColor()
      isAliveBlack()
      isAliveWhite()

      theSelected = []
      isAliveBlack()
      clearDeadthBlack()
    }
    else if(step.value % 2 === 0 && step.value !== 0){
      theSelected = []
      isAliveBlack()
      clearDeadthBlack()

      updateChessColor()
      updateAroundColor()
      isAliveBlack()
      isAliveWhite()

      theSelected2 = []
      isAliveWhite()
      clearDeadthWhite()
    }  

      chessnumber()
      
    })


    // 返回对象
    return {
      numberarray,
      chessdown,
      step,
      // chessSequence,
      sound,
      openchessnumber,
      clearAllChess,
      clearlastChess,
    };
  },
};
</script>

<style lang="less" scoped>
.chessBoardPage_main {
  margin-top: 8px;
  background-color: #3d3d3de5;
  width: 90%;
  box-sizing: border-box;
  margin: auto;
  // .chessBoardPage_head {
  //   width: 100%;
  //   height: 40px;
  //   background-color: #3d3d3d;
  // }
  .chessBoardPage_container {
    width: 100%;
    display: flex;
    .theSlot {
      width: 360px;
      
    }
    .otherSlot {
      width: 410px;
    }
    .chessBoardPage_container_chessboard {
      width: 933px;
      height: 973px;
      background-image: url(../assets/image/围棋棋盘.jpg);
      background-repeat: no-repeat;
      // margin: auto;
      margin-top: 8px;
      box-sizing: border-box;
      overflow: hidden;
      .chessBoard_control {
        width: 800px;
        height: 30px;
        margin: auto;
        margin-top: 10px;
        display: flex;
        .control_left {
          width: 320px;
          height: 30px;
          border-radius: 15px;
          background-color: #1b1b1b;
          display: flex;
          align-items: center;
          span {
            text-align: center;
            line-height: 30px;
            display: inline-block;
            color: grey;
            width: 34px;
            height: 30px;
            font-size: 22px;
          }
          .go {
            font-size: 18px;
            line-height: 27px;
            margin-left: 10px;
            cursor: pointer;
          }
          span:hover {
            color: wheat;
          }
          input {
            margin-left: 30px;
            display: inline-block;
            background-color: grey;
            width: 20px;
            height: 20px;
            color: white;
            cursor: pointer;
            outline: none; /* 取消input表单的轮廓线 */
          }
        }
        .stepnumber {
          background-color: #1b1b1b;
          border-radius: 15px;
          text-align: center;
          line-height: 30px;
          display: inline-block;
          color: grey;
          width: 100px;
          height: 30px;
          font-size: 17px;
          margin-left: 40px;
          cursor: pointer;
        }
        .stepnumber:hover {
          background-color: #1b1b1b9c;
        }
      }
      .chessarea {
        height: 933px;
        width: 933px;
        // background-color: rgba(255, 255, 255, 0.356);
        margin: auto;
        padding-left: 1px;
        transform: translateY(1px);
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        align-content: flex-start;
        // flex-wrap: wrap 之后元素上下间距过大怎么解决？
        // 问题：flex-wrap: wrap 之后元素上下间距好大，实际上没有设置间距
        // 原因：当元素设置了flex-wrap:wrap之后会有一个默认属性 align-content: stretch。元素被拉伸以适应容器。
        // 解决方法：添加：align-content：flex-start; 使元素位于容器的开头。
        flex-wrap: wrap;
        .black_chessman {
          background-image: url(../assets/image/blackchess.png);
          color: white;
        }
        .white_chessman {
          background-image: url(../assets/image/whitechess.png);
          color: black;
        }
        span {
          display: block;
          width: 46px;
          height: 46px;
          border-radius: 23px;
          // background-color: rgb(0, 0, 0);
          cursor: pointer;
          margin: 1.5px 1.5px;
          text-align: center;
          line-height: 46px;
          overflow: hidden;
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }
}
</style>

下面是功能演示：

csdn2

这个是函数封装文件myconfig.js

// for in 递归深拷贝
export  function copyObj(obj) {
    if (Array.isArray(obj)) {
        var newObj = [];
    }
    else {
        var newObj = {};
    }
    for (var key in obj) {
        if (typeof obj[key] == 'object') {
            newObj[key] = copyObj(obj[key]);
        }
        else {
            newObj[key] = obj[key]
        }
    }
    return newObj;
}
// 二维数组版 的 find方法
Array.prototype.twoDArrFind = function (fn) {
    if (Object.prototype.toString.call(fn) !== '[object Function]') {
      throw 'the arg should be a function'
    }
    let arr = this;
    for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < arr.length; j++) {
        let res = fn(arr[i][j],i,j)
        if (res) {
          return arr[i][j]
        }
        return false
      }
    }
  }
// 二维数组版 的 filter方法
Array.prototype.twoDArrFilter = function (fn) {
    if (Object.prototype.toString.call(fn) !== '[object Function]') {
      throw 'the arg should be a function'
    }
    let arr = this;
    let arr1 = []
    for (let i = 0; i < arr.length; i++) {
      for (let j = 0; j < arr.length; j++) {
        let res = fn(arr[i][j],i,j)
        if (res) {
           arr1.push(arr[i][j])
        }
      }
    }
    return arr1
  }

由于写到一半突然就没兴趣不想写了，学C++去了，所以功能也只是初步写到了这儿，比如：

1、页面样式都没有写得很漂亮

2、打劫的逻辑还没写

3、循环劫（如三劫循环）、双头蛇两假烟活棋（盘龙眼）等特殊情况的处理逻辑没有实现

4、形式判断的功能没有实现

如果有兄弟需要的话就后续把项目上传一下gayhub

追逐繁星的孩子_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
vue-chessboard-棋盘vue组件，用于加载位置，创建位置并查看威胁。-Vue.js开发
05-27
vue-chessboard Chessboard vue组件可以加载位置，创建位置并查看威胁它使用Chessboard Chessboard vue组件来加载位置，创建位置并查看威胁它使用vue-chessboard Chessboard vue组件来加载位置，创建位置并查看威胁它使用Chessboard Chessboard vue组件来进行棋盘运动和验证它使用国际象棋棋盘进行国际象棋棋盘UI国际象棋棋盘检查实时示例：http://vitomd.com/vue-chessboard-examples/目录安装使用示例安装npm install --save vue-chessboard默认组件import {chessboard} from 'vue-chessboard'导入'vue-chessboard / dist / vue-chessboard.css'然后在
vue3 井字小游戏
iron_nini的博客
04-25 216
闲来无事，参考 react 官网基于 vue3 写了下小 demo, 有兴趣的可以自己去试试。
VUE原创跳跳棋游戏代码
04-28
新鲜出炉的原创跳跳棋游戏，基于vue.js实现，游戏的逻辑及实现方法在js中解释的很清楚，插件的调用也非常简单。基于vue.js实现。如有疑问或者错误的地方欢迎留言，谢谢~ 1、默认用户的起始位置为第一步。 2、页面加载成功后需要请求后台数据获取当前用户的初始位置（第几步）并调用 1 vm.location(initialPosition) 3、“跳一跳”按钮绑定的点击事件为vm.dice(),点击按钮后只是执行骰子摇动的动画，此时应该同时请求后台数据返回用户摇出的points和当前点数下的prize，若没有prize应该返回点数和‘nothing’参数。后台数据返回成功后再调用 1 vm.forward(points,prize) 这时候用户头像才开始跳动。跳动结束后，系统会根据prize自动弹出获奖情况。
vue父组件加载子组件_棋盘Vue组件以加载位置
cuk5340的博客
07-23 526
vue父组件加载子组件 棋盘 (vue-chessboard) Chessboard vue component to load positions, create positions and see threats. 棋盘Vue组件可加载位置，创建位置并查看威胁。 It uses chess.js for chess movements and validations 它使用Chess.js...
计算机毕业设计（附源码）python学衡国学堂围棋社管理系统
林蓝Python程序源码
11-02 121
项目运行环境配置：Pychram社区版+ python3.7.7 + Mysql5.7 + HBuilderX+list pip+Navicat11+Django+nodejs。项目技术：django + python+ Vue 等等组成，B/S模式 +pychram管理等等。环境需要1.运行环境：最好是python3.7.7，我们在这个版本上开发的。其他版本理论上也可以。2.pycharm环境：pycharm都可以。推荐pycharm社区版;
Vue3 Project 项目(01) 源码
04-02
Vue3 Project 项目(01) 源码
vue3+webpack项目代码
05-11
资源包里面包含vue3+webpack项目需要的相关依赖项代码和vue3+webpack项目所需要的编译、启动服务的相关代码，代码下载下来就能直接启动使用，另外还包含了vue3+webpack项目代码及其配置文件的详细讲解。
Vue Cli3 创建项目的方法步骤
10-17
Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有实用价值，需要的朋友可以参考下
Vue3 Project 项目(02)源码
04-02
Vue3 Project 项目(02)源码
vue3 项目购物车 + 动画效果
03-16
1、使用到动画特效，包括页面与页面，解释的非常详细 2、axiso\Vue3\animate\Vuex
围棋AI软件源码，前端Electron + Vue，后端Python+torch.zip
05-09
围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。 围棋AI软件源码，前端Electron + Vue，后端Python+torch，利用卷积神经网络和强化学习，提供一个强大的围棋引擎。
Echart围棋小游戏
06-03
使用Html5,Javascript,Echart制作的围棋游戏，浏览地址https://gallery.echartsjs.com/editor.html?c=x-4qnSInEU
vue实现五子棋游戏
11-20
本文实例为大家分享了vue实现五子棋游戏的具体代码，供大家参考，具体内容如下 思路 1.vue实现五子棋 空棋盘开局。 画网格：网格有 15 行 15 列，共有 225 个交叉点 黑先、白后，交替下子，每次只能下一子 胜负判定 按照简单的规则，从当前下子点位的方向判断()。如果有一个方向满足连续5个黑子或白子，游戏结束。 2.支持dom和canvas切换 判断浏览器是否支持canvas： false: 不支持 切换dom方式 true:  支持 使用canvas 3.实现悔棋功能 4.实现撤销悔棋 例子： 为了简便，我就把所有写在一起了，按理来说是要分文件写的； GitHub IO：链接
vue实现井字棋游戏
10-14
主要为大家详细介绍了vue实现井字棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue+websocket实现双人在线五子棋
05-17
把项目拷贝到webstorm即可运行，前端服务器输入vue-cli-service serve运行，后端服务器输入node ws.js运行
vue实现井字棋
weixin_43756316的博客
09-27 688
之前看react的教程时看到的小游戏，试着用vue做一个。右边的winner提示胜者，还没有胜者时提示下一个棋子的种类。restart按钮点击可重新开始。go to step可跳转到第n步。 html： <div id="app"> <ul id="board" class="white normal"> <li class="square" v-for="i, idx in datas" @click=set(idx)>{{i}}</li> &lt
围棋超简单入门
huanqing2010的专栏
03-21 1826
围棋入门级入门。气，吃子，断和连，眼，死活题。
基于原生js且非canvas实现的中国象棋（第一版）
Rookie
04-09 1722
文章目录前言棋盘与棋子棋盘棋子棋盘与棋子的交互主要的类文件棋子类棋盘 前言 本人从小就非常喜欢下中国象棋，学习编程后就一直想自己做一个中国象棋的前端游戏，现在终于有“机会”了。 这是第一版的中国象棋，由h5+css3+原生js所实现（非canvas）。 这个版本主要实现的功能包括：棋子的鼠标交互功能，每种棋子的落子规则，将军提示和游戏结束判断，悔棋功能，各种音效等等 注：由于总代码量比较大，所以完整代码我放在github上，大家可以自己去阅读，这里我只挑选核心功能的代码进行讲解。源代码地址：完整代码 游戏的
Vue实现单机五子棋（附源码）
sclarkca56的博客
06-06 1601
Vue 实现 单子五子棋
vue2 vue3项目
最新发布
01-23
Vue.js是一种用于构建用户界面的框架。Vue 2和Vue3是Vue.js的两个主要版本。它们在语＊＊＊操作： 1. 首先，确保已经安装了Node.js和npm（Node包管理器）。 2. 打开命令行工具，导航到要创建项目的目录。 3. 运行以下命令来安装Vue CLI（Vue命令行界面）： ```shell npm install -g @vue/cli@2 ``` 4. 安装完成后，运行以下命令来创建一个新的Vue 2项目： ```shell vue init webpack my-vue2-project ``` 5. 在创建过程中，您将被要求提供一些配置选项，例如项目名称、描述、作者等。根据您的需求进行配置。 6. 创建完成后，导航到新创建的项目目录： ```shell cd my-vue2-project ``` 7. 运行以下命令来安装项目的依赖项： ```shell npm install ``` 8. 安装完成后，运行以下命令来启动开发服务器： ```shell npm run dev ``` 9. 现在，您可以在浏览器中访问http://localhost:8080来查看您的Vue 2项目。 要创建Vue 3项目，可以按照以下步骤进行操作： 1. 确保已经安装了Node.js和npm。 2. 打开命令行工具，并导航到要创建项目的目录。 3. 运行以下命令来安装Vue CLI的最新版本： ```shell npm install -g @vue/cli ``` 4. 安装完成后，运行以下命令来创建一个新的Vue 3项目： ```shell vue create my-vue3-project ``` 5. 在创建过程中，您将被要求选择预设配置。选择"Manually select features"，然后选择您需要的特性。 6. 创建完成后，导航到新创建的项目目录： ```shell cd my-vue3-project ``` 7. 运行以下命令来安装项目的依赖项： ```shell npm install ``` 8. 安装完成后，运行以下命令来启动开发服务器： ```shell npm run serve ``` 9. 现在，您可以在浏览器中访问http://localhost:8080来查看您的Vue 3项目。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

追逐繁星的孩子_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值