vue实现模拟象棋走子

/* eslint-disable indent */
<template>
    <div class="container"
         class="item-rigts">
          <div class="canvas-bg" id="bgcanvas">
            <canvas id="canvas1" ref="myCanvas">不支持Canvascanvas>
      div>
    div>
template>

<script>
import {getWalkingEnrollItemBank, updateEnrollFractionById} from '../../api/index'
let canvas
let ctx
let subX
let subY
// 参数：x坐标，y坐标，哪边下子，判断是红棋还是黑棋，判断棋名字
// eslint-disable-next-line no-unused-vars
let descClick
// 记录棋子点击次数
// let clickNumber
export default {
  name: 'gochess',
  data () {
    return {
      totalSecond: 0,
      countDownDay: 0,
      countDownHour: 0,
      countDownMinute: 0,
      countDownSecond: 0,
      name: '',
      levelexam: '',
      testId: '',
      exchangCode: '',
      gradId: '',
      questionNum: 0,
      enrollItemBanks: [],
      Chess: [],
      answerChess: [],
      blackChess: [],
      total: 0,
      testIndex: 0, // 题目索引
      clickNumber: 0,
      canGoChess: true,
      banMa: true,
      banXiang: true,
      existe: true,
      faceState: false,
      rX: 0,
      rY: 0,
      hX: 0,
      hY: 0,
      chessGoNumber: 0,
      quesionNumber: 0,
      eatChess: false,
      isError: [],
      redanswerlength: 0,
      success: 0,
      isTrue: true
    }
  },
  created () {
    this.name = this.$route.params.name
    this.levelexam = this.$route.params.levelexam
    this.testId = this.$route.params.id
    this.exchangCode = this.$route.params.exchangCode
    this.gradId = this.$route.params.testId
    console.log(this.$route, this.name, this.levelexam, this.testId, this.exchangCode)
    this.totalSecond = 1800
    this.questionNum = 20
    // var totalSecond = 1800
    var interval = setInterval(function () {
      // 秒数
      var second = this.totalSecond
      // 天数位
      var day = Math.floor(second / 3600 / 24)
      var dayStr = day.toString()
      if (dayStr.length === 1) dayStr = '0' + dayStr
      // 小时位
      var hr = Math.floor((second - day * 3600 * 24) / 3600)
      var hrStr = hr.toString()
      if (hrStr.length === 1) hrStr = '0' + hrStr
      // 分钟位
      var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60)
      var minStr = min.toString()
      if (minStr.length === 1) minStr = '0' + minStr
      // 秒位
      var sec = second - day * 3600 * 24 - hr * 3600 - min * 60
      var secStr = sec.toString()
      if (secStr.length === 1) secStr = '0' + secStr
      this.countDownDay = dayStr
      this.countDownHour = hrStr
      this.countDownMinute = minStr
      this.countDownSecond = secStr
      this.totalSecond--
      console.log(this.totalSecond)
      if (this.totalSecond === 300) {
        this.$message('距离考试结束还剩5分钟')
      }
      if (this.totalSecond < 0) {
        clearInterval(interval)
        // 提交答案
        // 跳转页面
        console.log('时间到', this.success)
        // let totalNumber = this.success * 5
        this.updateEnrollFractionById(this.success)
      }
    }.bind(this), 1000)
  },
  mounted () {
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', function () {
      history.pushState(null, null, document.URL)
    })
    window.addEventListener('beforeunload', this.unload)
    // window.addEventListener('beforeunload', e => this.unload) // 注册一个匿名函数

    this.getTest(this.testId, this.exchangCode)
    this.initCanvas()
    // // 当调整窗口大小时重绘canvas
    // window.onresize = () => {
    //   this.initCanvas()
    //   this.drewChess(this.Chess)
    // }
  },
  // 2 销毁这个监听事件
  destroyed () {
    // 销毁这个监听事件，需要找到这个函数，如果使用的是匿名函数的话，无法查找这个函数，这个事件也就没有办法被移除 ，在其他页面仍然会执行这个监听事件
    window.removeEventListener('beforeunload', this.unload)
  },
  methods: {
    unload (e) {
      e = e || window.event
      if (e) {
        console.log(e)
        // 在这里阻止默认的刷新，弹出弹框
        e.returnValue = '重新加载将导致准考证号失效，是否重新加载'
        // return '重新加载将导致准考证号失效，是否重新加载'
      }
      return '重新加载将导致准考证号失效，是否重新加载'
    },
    // 获取闯关题
    getTest (id, exchangCode) {
      getWalkingEnrollItemBank({
        enrollGradeId: id,
        exchangCode: exchangCode
      }).then(res => {
        // success
        console.log(res)
        if (res.success) {
          this.$message({
            message: '已刷新，准考证号失效将退出本次考试',
            center: true,
            type: 'warning'
          })
          setTimeout(() => {
            this.$router.push('/gradingTest')
          }, 3000)
        }
        this.enrollItemBanks = res.walkingEnrollItemBanks
        console.log(this.enrollItemBanks)
        this.total = res.walkingEnrollItemBanks.length
        this.drewChess(this.enrollItemBanks)
      }).catch(() => {
        // console.log('取消')
      })
    },
    // 提交闯关结果
    updateEnrollFractionById (fraction) {
      updateEnrollFractionById({
        id: this.gradId,
        fraction: fraction
      }).then(res => {
        // success
        console.log(res)
        this.$router.push({
          name: 'gradingResults',
          // name: 'mallList',
          query: {
            id: this.gradId,
            fractions: fraction,
            levelexam: this.levelexam
          }
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    submit () {
      this.$confirm('确认交卷', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        // console.log(this.selects)
        // console.log(sum)
        // let totalNumber = this.success * 5
        this.updateEnrollFractionById(this.success)
      }).catch(() => {
        // console.log('取消')
        // this.$confirm('将退出答题页面，本次考试将作废', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   center: true
        // }).then(() => {
        // // console.log(this.selects)
        // // console.log(sum)
        //   this.$router.push('/gradingTest')
        // }).catch(() => {
        // // console.log('取消')
        //   // let totalNumber = this.success * 5
        //   this.updateEnrollFractionById(this.success)
        // })
      })
    },
    // 初始化canvas
    initCanvas () {
      let that = this
      canvas = document.getElementById('canvas1')
      ctx = canvas.getContext('2d')
      canvas.width = 480
      canvas.height = 530
      ctx.lineWidth = 2
      ctx.strokeStyle = '#000'
      canvas.onclick = function (e) {
        let sx = e.clientX - canvas.getBoundingClientRect().left
        let sy = e.clientY - canvas.getBoundingClientRect().top
        that.getChess(ctx, sx, sy)
      }
      that.initChess()
    },
    // 初始化棋盘
    initChess () {
      ctx.lineWidth = 2
      ctx.strokeStyle = '#000'
      let that = this
      that.row()
      that.cols()
      // 注意：现在的原点中心为（100,100），所以下面的所有坐标在原来的基础上加（x+100,y+100）；
      // 中心点一（1000,200）
      that.center(90, 140)
      // 中心点二（700,200）
      that.center(390, 140)
      // 中心点三（5,300）
      that.center(40, 190)
      // 中心点四（200,300）
      that.center(140, 190)
      // 中心点五（400,300）
      that.center(240, 190)
      // 中心点六（600,300）
      that.center(340, 190)
      // 中心点七（800,300）
      that.center(440, 190)
      // 中心点八（800,600）
      that.center(40, 340)
      // 中心点九（600,600）
      that.center(140, 340)
      // 中心点十（400,600）
      that.center(240, 340)
      // 中心点十一（200,600）
      that.center(340, 340)
      // 中心点十二（5,600）
      that.center(440, 340)
      // 中心点十三（700,700）
      that.center(90, 390)
      // 中心点十四（100,700）
      that.center(390, 390)
      // 必须当页面中的图片资源加载成功,再画棋子
    },
    // // 此方法用来画棋盘线
    LineDrawing (mx, my, lx, ly) {
      ctx.beginPath()
      ctx.moveTo(mx, my)
      ctx.lineTo(lx, ly)
      ctx.stroke()
    },
    // 棋盘行
    row () {
      for (var i = 40; i <= 490; i += 50) {
        ctx.beginPath()
        ctx.moveTo(40, i)
        ctx.lineTo(440, i)
        ctx.stroke()
      }
    },
    // 棋盘列
    cols () {
      for (var i = 40; i <= 490; i += 50) {
        ctx.beginPath()
        ctx.moveTo(i, 40)
        ctx.lineTo(i, 490)
        ctx.stroke()
      }
      // 清除指定的矩形区域
      ctx.clearRect(41, 241, 398, 48)
      ctx.font = '28px Georgia'
      ctx.fillText('楚', 95, 275)
      ctx.fillText('河', 145, 275)
      ctx.fillText('汉', 315, 275)
      ctx.fillText('界', 365, 275)
      // 斜线
      this.LineDrawing(190, 40, 290, 140)
      this.LineDrawing(190, 390, 290, 490)
      // 反斜线
      this.LineDrawing(290, 40, 190, 140)
      this.LineDrawing(290, 390, 190, 490)
    },
    // 坐标的中心点
    center (x, y) {
      ctx.lineWidth = 3
      // 中心点一（100,200）
      if (x === 40 && y === 190) {
        // 右上
        this.LineDrawing(x + 5, y - 15, x + 5, y - 5)
        this.LineDrawing(x + 5, y - 5, x + 15, y - 5)
        // 右下
        this.LineDrawing(x + 5, y + 15, x + 5, y + 5)
        this.LineDrawing(x + 5, y + 5, x + 15, y + 5)
      } else if (x === 440 && y === 190) {
        // 左上
        this.LineDrawing(x - 5, y - 15, x - 5, y - 5)
        this.LineDrawing(x - 5, y - 5, x - 15, y - 5)
        // 左下
        this.LineDrawing(x - 5, y + 15, x - 5, y + 5)
        this.LineDrawing(x - 5, y + 5, x - 15, y + 5)
      } else if (x === 40 && y === 340) {
        // 右上
        this.LineDrawing(x + 5, y - 15, x + 5, y - 5)
        this.LineDrawing(x + 5, y - 5, x + 15, y - 5)
        // 右下
        this.LineDrawing(x + 5, y + 15, x + 5, y + 5)
        this.LineDrawing(x + 5, y + 5, x + 15, y + 5)
      } else if (x === 440 && y === 340) {
        // 左上
        this.LineDrawing(x - 5, y - 15, x - 5, y - 5)
        this.LineDrawing(x - 5, y - 5, x - 15, y - 5)
        // 左下
        this.LineDrawing(x - 5, y + 15, x - 5, y + 5)
        this.LineDrawing(x - 5, y + 5, x - 15, y + 5)
      } else {
        // 左上
        this.LineDrawing(x - 5, y - 15, x - 5, y - 5)
        this.LineDrawing(x - 5, y - 5, x - 15, y - 5)
        // 右上
        this.LineDrawing(x + 5, y - 15, x + 5, y - 5)
        this.LineDrawing(x + 5, y - 5, x + 15, y - 5)
        // 左下
        this.LineDrawing(x - 5, y + 15, x - 5, y + 5)
        this.LineDrawing(x - 5, y + 5, x - 15, y + 5)
        // 右下
        this.LineDrawing(x + 5, y + 15, x + 5, y + 5)
        this.LineDrawing(x + 5, y + 5, x + 15, y + 5)
      }
    },
    // 点击到棋子后的显示框
    draw_check (context, x, y) {
      // // 重新画整个棋盘
      // // repaint(context);
      // // 开始画左上角
      let screenx = x + 20
      let screeny = y + 20
      ctx.lineWidth = 3
      ctx.strokeStyle = '#97092a'
      // console.log(x, y)
      context.beginPath()
      context.moveTo(screenx - 23, screeny - 16)
      context.lineTo(screenx - 23, screeny - 23)
      context.lineTo(screenx - 16, screeny - 23)
      // // 开始画右上角
      context.moveTo(screenx + 16, screeny - 23)
      context.lineTo(screenx + 23, screeny - 23)
      context.lineTo(screenx + 23, screeny - 16)
      // // 开始画左下角
      context.moveTo(screenx - 23, screeny + 16)
      context.lineTo(screenx - 23, screeny + 23)
      context.lineTo(screenx - 16, screeny + 23)
      // // 开始画右下角
      context.moveTo(screenx + 23, screeny + 16)
      context.lineTo(screenx + 23, screeny + 23)
      context.lineTo(screenx + 16, screeny + 23)
      context.stroke()
    },
    // 点击到棋子后的显示框
    draw_blcheck (context, x, y) {
      // // 重新画整个棋盘
      // // repaint(context);
      // // 开始画左上角
      let screenx = x + 20
      let screeny = y + 20
      ctx.lineWidth = 3
      ctx.strokeStyle = '#973c51'
      // console.log(x, y)
      context.beginPath()
      context.moveTo(screenx - 23, screeny - 16)
      context.lineTo(screenx - 23, screeny - 23)
      context.lineTo(screenx - 16, screeny - 23)
      // // 开始画右上角
      context.moveTo(screenx + 16, screeny - 23)
      context.lineTo(screenx + 23, screeny - 23)
      context.lineTo(screenx + 23, screeny - 16)
      // // 开始画左下角
      context.moveTo(screenx - 23, screeny + 16)
      context.lineTo(screenx - 23, screeny + 23)
      context.lineTo(screenx - 16, screeny + 23)
      // // 开始画右下角
      context.moveTo(screenx + 23, screeny + 16)
      context.lineTo(screenx + 23, screeny + 23)
      context.lineTo(screenx + 16, screeny + 23)
      context.stroke()
    },
    // 棋子展示
    drewChess (enrollItemBanks) {
      this.Chess = this.enrollItemBanks[this.testIndex].walkingEnrollItemBanks
      this.answerChess = this.enrollItemBanks[this.testIndex].redAnswer
      this.redanswerlength = this.enrollItemBanks[this.testIndex].redAnswer.length
      this.blackChess = this.enrollItemBanks[this.testIndex].blackAnswer
      console.log('棋子展示', this.Chess)
      console.log('红棋答案展示', this.answerChess)
      console.log('黑棋答案展示', this.blackChess)
      for (let i in this.Chess) {
        let img = new Image()
        img.src = this.Chess[i].imageUrl
        img.id = this.Chess[i].ids
        // let id = Chess[i].ids
        let x = this.Chess[i].positionX
        let y = this.Chess[i].positionY
        // let name = document.getElementById(id)
        // let img = this.$refs.conf
        // console.log(img[i])
        // let ids = img[i]
        img.onload = () => {
          ctx.drawImage(img, x, y, 40, 40)
        }
      }
    },
    // 清除框
    clearBox (context, descClick) {
      // console.log('qingchukuang')
      let oldx = descClick[0]
      let oldy = descClick[1]
      // let name = descClick[5]
      // console.log('qingchukuang', oldx, oldy)
      let screenx = oldx + 20
      let screeny = oldy + 20
      ctx.lineWidth = 4
      ctx.strokeStyle = '#f9c78b'
      context.beginPath()
      context.moveTo(screenx - 23, screeny - 16)
      context.lineTo(screenx - 23, screeny - 23)
      context.lineTo(screenx - 16, screeny - 23)
      // // 开始画右上角
      context.moveTo(screenx + 16, screeny - 23)
      context.lineTo(screenx + 23, screeny - 23)
      context.lineTo(screenx + 23, screeny - 16)
      // // 开始画左下角
      context.moveTo(screenx - 23, screeny + 16)
      context.lineTo(screenx - 23, screeny + 23)
      context.lineTo(screenx - 16, screeny + 23)
      // // 开始画右下角
      context.moveTo(screenx + 23, screeny + 16)
      context.lineTo(screenx + 23, screeny + 23)
      context.lineTo(screenx + 16, screeny + 23)
      context.stroke()
      // this.initChess()
      // console.log('qingchukuang', oldx, oldy)
    },
    // 清除要走的棋子
    clearChess (context, cx, cy) {
      context.clearRect(cx, cy, 40, 400)
    },
    // 重绘棋盘
    repaint (context) {
      // console.log('chonghui')
      context.clearRect(0, 0, 480, 530)
      this.initChess()
    },
    // 判断棋子是否存在
    isChessAlive (x, y) {
      this.existe = false
      for (let i in this.Chess) {
        if (this.Chess[i].positionX === x && this.Chess[i].positionY === y) {
          this.existe = true
        }
      }
      return this.existe
    },
    // 判断两方老帅是否面对面
    isFaceToFace () {
      for (let i in this.Chess) {
        if (this.Chess[i].piece === 5 && this.Chess[i].redBlack === 1) {
          // 红方老将 拿到坐标
          this.rX = this.Chess[i].positionX
          this.rY = this.Chess[i].positionY
        }
        if (this.Chess[i].piece === 5 && this.Chess[i].redBlack === 0) {
          // 红方老将 拿到坐标
          this.hX = this.Chess[i].positionX
          this.hY = this.Chess[i].positionY
        }
        // 老将在一条线上
        if (this.rX === this.hX) {
          for (let i in this.Chess) {
            // 老将之间没有面对面
            if (this.Chess[i].positionX === this.rX && this.Chess[i].positionY > this.rY && this.rX && this.Chess[i].positionY < this.hY) {
              this.faceState = false
            }
            if (this.Chess[i].positionX === this.rX && this.Chess[i].positionY < this.rY && this.rX && this.Chess[i].positionY > this.hY) {
              this.faceState = true
            }
          }
        }
      }
      return this.faceState
    },
    // 判断走子成功还是失败
    successOrFail (context, subX, subY) {
      let redanswerchess = this.answerChess[this.chessGoNumber]
      let blackanswerchess = this.blackChess[this.chessGoNumber]
      for (let i in this.Chess) {
        if (this.Chess[i].positionX === subX && this.Chess[i].positionY === subY) {
          this.Chess.splice(i, 1)
        }
        if (this.Chess[i].positionX === descClick[0] && this.Chess[i].positionY === descClick[1] && this.Chess[i].ids === descClick[5]) {
          // console.log('bcsj')
          this.Chess[i].positionX = subX
          this.Chess[i].positionY = subY
          this.repaint(context)
          this.drewChess(this.Chess)
          for (let index = 0; index < redanswerchess.length; index++) {
            console.log(redanswerchess[index].ids, descClick[5], redanswerchess[index].positionX, subX, redanswerchess[index].positionY, subY)
            if (redanswerchess[index].ids === descClick[5] && redanswerchess[index].positionX === subX && redanswerchess[index].positionY === subY) {
              console.log(this.chessGoNumber, 'this.chessGoNumber', this.redanswerlength, 'this.redanswerlength')
              if (this.chessGoNumber === this.redanswerlength - 1) {
                if (this.total - 1 === this.testIndex) {
                  this.success++
                  this.$message({
                    message: '已完成答题',
                    center: true,
                    type: 'success'
                  })
                  setTimeout(() => {
                    this.updateEnrollFractionById(this.success)
                  }, 2000)
                } else {
                  this.$message({
                    message: '进入下一题',
                    center: true,
                    type: 'success'
                  })
                  setTimeout(() => {
                    this.chessGoNumber = 0
                    this.testIndex++
                    this.success++
                    this.isTrue = true
                    this.repaint(context)
                    this.drewChess(this.Chess)
                    descClick = []
                  }, 2000)
                }
                // if (this.total - 1 === this.testIndex) {
                //   this.success++
                //   this.$message({
                //     message: '答题完毕，请提交',
                //     center: true,
                //     type: 'success'
                //   })
                // } else {
                //   setTimeout(() => {
                //     this.chessGoNumber = 0
                //     this.testIndex++
                //     this.success++
                //     this.repaint(context)
                //     this.drewChess(this.Chess)
                //     descClick = []
                //   }, 1500)
                // }
              }
              for (let i in this.Chess) {
                for (let index in blackanswerchess) {
                  if (blackanswerchess[index].positionX === this.Chess[i].positionX && blackanswerchess[index].positionY === this.Chess[i].positionY) {
                    console.log('黑棋走子的地方有旗子')
                    this.Chess.splice(i, 1)
                  }
                  console.log(blackanswerchess[index].ids, this.Chess[i].ids)
                  if (blackanswerchess[index].ids === this.Chess[i].ids) {
                    console.log(this.Chess[i].ids)
                    let oldX = this.Chess[i].positionX
                    let oldY = this.Chess[i].positionY
                    let blackX = blackanswerchess[index].positionX
                    let blackY = blackanswerchess[index].positionY
                    console.log('走对了', blackX, blackY)
                    this.Chess[i].positionX = blackX
                    this.Chess[i].positionY = blackY
                    this.chessGoNumber = this.chessGoNumber + 1
                    setTimeout(() => {
                      this.repaint(context)
                      this.drewChess(this.Chess)
                      this.draw_check(context, blackX, blackY)
                      this.draw_blcheck(context, oldX, oldY)
                    }, 800)
                  }
                  break
                }
              }
              break
            } else {
              console.log(index, redanswerchess.length - 1)
              if (index === redanswerchess.length - 1) {
                this.isTrue = false
                console.log(this.isTrue)
              }
            }
            console.log(this.isTrue)
            if (!this.isTrue) {
              // console.log('zoucuo1')
              if (this.total - 1 === this.testIndex) {
                this.$message({
                  message: '已完成答题',
                  center: true,
                  type: 'success'
                })
                setTimeout(() => {
                  this.updateEnrollFractionById(this.success)
                }, 2000)
              } else {
                this.$message({
                  message: '进入下一题',
                  center: true,
                  type: 'warning'
                })
                setTimeout(() => {
                  this.isTrue = true
                  this.chessGoNumber = 0
                  this.testIndex++
                  this.repaint(context)
                  this.drewChess(this.Chess)
                  descClick = []
                }, 2000)
              }
              // break
            }
          }
        }
      }
    },
    // 点击棋子
    getChess (context, x, y) {
      x = x - 20
      y = y - 20
      console.log('x', x, 'y', y)
      // var sub_x = 0,sub_y = 0;
      // if (x<50||y<50||x>950||y>1010) {return false};
      // 这里就是一个四舍五入和向下取整，以便棋子能在棋盘上按格走
      // if (x%100>80||x%100<20) {sub_x = 100*Math.round(x/100)};
      // if (x%100>30&&x%100<70) {sub_x = x>100?(Math.floor(x/100)*100 ):50};
      // if (y%100>80||y%100<20) {sub_y = 100*Math.round(y/100)};
      // if (y%100>30&&y%100<70) {sub_y = y>100?(Math.floor(y/100)*100 ):50};
      if (x < 0 || y < 0 || x > 460 || y > 510) { return false }
      // console.log('x/100', x / 100, 'y/100', y / 100)
      // console.log('x/50', x / 50, 'y/50', y / 50)
      // console.log('x%100', x % 100, 'y/100', y % 100, 'x%100>80', x % 100 > 80, 'x%100<20', x % 100 < 20, '100*Math.round(x/100)', 50 * Math.round(x / 50))
      // console.log('y%100', x % 100, 'y/100', y % 100, 'y%100>80', y % 100 > 80, 'y%100<20', y % 100 < 20, '100*Math.round(y/100)', 50 * Math.round(y / 50))
      // console.log('x%100', x % 100, 'y/100', y % 100, 'x%100>30', x % 100 > 30, 'x%100<70', x % 100 < 70, 'x>100?(Math.floor(x/100)*100 ):50', x > 50 ? (Math.floor(x / 50) * 50) : 0)
      // console.log('x%100', x % 100, 'y/100', y % 100, 'y%100>30', y % 100 > 30, 'y%100<70', y % 100 < 70, 'y>100?(Math.floor(x/100)*100 ):50', y > 50 ? (Math.floor(y / 50) * 50) : 0)
      // console.log('x%50', x % 50, 'y/50', y % 50)
      // console.log('Math.abs((Math.floor(x / 50) * 50))', Math.abs((Math.floor(x / 50) * 50)))
      // console.log('Math.abs((Math.floor(x / 100) * 100))', Math.abs((Math.floor(x / 100) * 100)))
      // console.log('Math.abs((Math.floor(y / 50) * 50))', Math.abs((Math.floor(y / 50) * 50)))
      // console.log('Math.abs((Math.floor(y / 100) * 100))', Math.abs((Math.floor(y / 100) * 100)))
      // console.log('Math.abs((Math.round(x / 50) * 50))', Math.abs((Math.round(x / 50) * 50)))
      // console.log('Math.abs((Math.round(x / 100) * 100))', Math.abs((Math.round(x / 100) * 100)))
      // console.log('Math.abs((Math.round(y / 50) * 50))', Math.abs((Math.round(y / 50) * 50)))
      // console.log('Math.abs((Math.round(y / 100) * 100))', Math.abs((Math.round(y / 100) * 100)))
      console.log('x % 100 > 10 && x % 100 < 100', x % 100 > 10 && x % 100 < 100, x > 420 ? subX = 400 : subX = Math.abs((Math.floor(x / 50) * 50)))
      console.log('y % 100 > 10 || y % 100 < 100', y % 100 > 10 || y % 100 < 100, y > 470 ? subY = 450 : subY = Math.abs(50 * Math.floor(y / 50)))
      if (x % 100 > 10 || x % 100 < 100) { x > 420 ? subX = 400 : subX = Math.abs((Math.floor(x / 50) * 50)) }
      if (y % 100 > 10 || y % 100 < 100) { y > 470 ? subY = 450 : subY = Math.abs(50 * Math.floor(y / 50)) }
      subX = subX + 20
      subY = subY + 20
      console.log(' subX', subX, 'subY', subY)
      // 点击到棋子了
      if (subX >= 0 && subY >= 0) {
        let chess = this.Chess
        this.clickNumber = this.clickNumber + 1
        console.log(descClick, 'descClick', this.clickNumber, 'clickNumber')
        // 判断点击次数1代表第一次点击，需要判断是否点击到棋子，并判断是否是红子并存储信息
        // 2代表要走的位置，需要判断2，点击的位置的情况1，没有棋子，2，有旗子，a，是红子，b是黑子。是黑子就要判断是否可以吃子，红子就不做任何表示
        if (this.clickNumber === 1) {
          for (let i in chess) {
          // 判断点击的哪个棋子
            if (chess[i].positionX === subX && chess[i].positionY === subY) {
              // 点击的棋子是红子
              if (chess[i].redBlack === 1) {
                // 画棋子点中的框
                if (this.chessGoNumber > 0) {
                  this.repaint(context)
                  this.drewChess(this.Chess)
                }
                this.draw_check(context, subX, subY)
                // 保存点击棋子的值
                descClick = [subX, subY, i, chess[i].redBlack, chess[i].piece, chess[i].ids]
                console.log(descClick, 'descClick')
                break
              } else {
                this.$message({
                  message: '请点击红方',
                  center: true,
                  type: 'warning'
                })
                this.clickNumber = 0
              }
            }
          }
        }
        // 第二次点击涉及走子
        if (this.clickNumber === 2) {
          // 判断点击的棋子是否存在
          if (this.isChessAlive(subX, subY)) {
            // 棋子存在
            for (let i in this.Chess) {
              if (chess[i].positionX === subX && chess[i].positionY === subY) {
                // 点击的棋子是红子更换点击位置画框
                if (chess[i].redBlack === 1) {
                  this.repaint(context)
                  this.drewChess(this.Chess)
                  // 保存点击的值
                  descClick = [subX, subY, i, chess[i].redBlack, chess[i].piece, chess[i].ids]
                  this.draw_check(context, subX, subY)
                  console.log('第二次点击', descClick)
                  this.clickNumber = 1
                  break
                } else {
                  // 判断是否可以吃子 点击的是黑子
                  if (this.canGo(subX, subY, descClick)) {
                    // 清除画框
                    this.clearBox(context, descClick)
                    this.successOrFail(context, subX, subY)
                    this.clickNumber = 0
                  // this.repaint(context)
                  } else {
                    console.log('走子规则不对')
                    this.clickNumber = 1
                    this.canGoChess = true
                  }
                }
                break
              }
            }
          } else {
            // 棋子不存在可以走
            console.log('棋子不存在可以走')
            if (this.canGo(subX, subY, descClick)) {
              // 清除画框
              this.clearBox(context, descClick)
              this.successOrFail(context, subX, subY)
              this.clickNumber = 0
            } else {
              console.log('走子规则不对')
              this.banXiang = true
              this.banMa = true
              this.clickNumber = 1
            }
          }
        }
      }
    },
    // 走子规则
    canGo (x, y, descClick) {
      this.canGoChess = true
      let newX = x
      let newY = y
      let oldX = descClick[0]
      let oldY = descClick[1]
      let piece = descClick[4]
      let minX = oldX > newX ? newX : oldX
      let maxX = oldX > newX ? oldX : newX
      let minY = oldY > newY ? newY : oldY
      let maxY = oldY > newY ? oldY : newY
      // console.log('newX', newX, 'newY', newY, 'oldX', oldX, 'oldY', oldY, 'minX', minX, 'maxX', maxX, 'minY', minY, 'maxY', maxY, piece)
      // if (this.isFaceToFace()) {
      //   return false
      // }
      switch (piece) {
        case 1:// che 不在一条直线上不能走不能吃
          if (newX !== oldX && newY !== oldY) {
            // console.log('不在一条直线上')
            this.canGoChess = false
            this.existe = false
            break
          }
          for (let i in this.Chess) {
            if (this.Chess[i].positionX === newX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {
              this.canGoChess = false
              // console.log('在一条直线上,X上')
            }
            if (this.Chess[i].positionY === newY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {
              this.canGoChess = false
              // console.log('在一条直线上,y上')
            }
          }
          // console.log(this.canGoChess)
          break
        case 2:// ma
          // console.log('进入规则马', this.canGoChess, this.banMa)
          this.canGoChess = false
          this.banMa = true
          for (let i in this.Chess) {
            // console.log('进入规则', this.Chess)
            let banX = this.Chess[i].positionX
            let banY = this.Chess[i].positionY
            console.log('进入规则马', 'banX', banX, 'banY', banY, 'newX', newX, 'newY', newY)
            if (oldY === banY && oldX + 50 === banX && newY + 50 === banY && newX - 50 === banX) {
              this.$message({
                message: '绊马腿1',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldY === banY && oldX - 50 === banX && newY - 50 === banY && newX + 50 === banX) {
              this.$message({
                message: '绊马腿2',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldY === banY && oldX - 50 === banX && newY + 50 === banY && newX + 50 === banX) {
              this.$message({
                message: '绊马腿3',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldY === banY && oldX + 50 === banX && newY - 50 === banY && newX - 50 === banX) {
              this.$message({
                message: '绊马腿4',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldX === banX && oldY - 50 === banX && newY + 50 === banY && newX + 50 === banX) {
              this.$message({
                message: '绊马腿5',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldX === banX && oldY + 50 === banX && newY - 50 === banY && newX + 50 === banX) {
              this.$message({
                message: '绊马腿6',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldX === banX && oldY + 50 === banX && newY - 50 === banY && newX - 50 === banX) {
              this.$message({
                message: '绊马腿7',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
            if (oldX === banX && oldY - 50 === banX && newY + 50 === banY && newX - 50 === banX) {
              this.$message({
                message: '绊马腿8',
                center: true,
                type: 'warning'
              })
              this.banMa = false
            }
          }
          if (oldX + 50 === newX && oldY + 100 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX + 100 === newX && oldY + 50 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX - 100 === newX && oldY - 50 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX + 100 === newX && oldY - 50 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX - 100 === newX && oldY + 50 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX - 50 === newX && oldY - 100 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX - 50 === newX && oldY + 100 === newY && this.banMa) {
            this.canGoChess = true
          }
          if (oldX + 50 === newX && oldY - 100 === newY && this.banMa) {
            this.canGoChess = true
          }
          break
        case 3:// xiang
          // this.canGoChess = false
          // console.log('进入规则象', this.canGoChess, this.banMa)
          this.canGoChess = false
          this.banMa = true
          for (let i in this.Chess) {
            // console.log('进入规则', this.Chess)
            let banX = this.Chess[i].positionX
            let banY = this.Chess[i].positionY
            // console.log('进入规则xiang', 'banX', banX, 'banY', banY, 'newX', newX, 'newY', newY)
            if (newY < 270) {
              this.banXiang = false
            }
            if (newX + 50 === banX && newY + 50 === banY && oldX - 50 === banX && oldY - 50 === banY) {
              this.$message({
                message: '绊象腿1',
                center: true,
                type: 'warning'
              })
              this.banXiang = false
            }
            if (newX + 50 === banX && newY - 50 === banY && oldX - 50 === banX && oldY + 50 === banY) {
              this.$message({
                message: '绊象腿2',
                center: true,
                type: 'warning'
              })
              this.banXiang = false
            }
            if (newX - 50 === banX && newY + 50 === banY && oldX + 50 === banX && oldY - 50 === banY) {
              this.$message({
                message: '绊象腿3',
                center: true,
                type: 'warning'
              })
              this.banXiang = false
            }
            if (newX - 50 === banX && newY - 50 === banY && oldX + 50 === banX && oldY + 50 === banY) {
              this.$message({
                message: '绊象腿4',
                center: true,
                type: 'warning'
              })
              this.banXiang = false
            }
          }
          if (oldX + 100 === newX && oldY + 100 === newY && this.banXiang) {
            this.canGoChess = true
          }
          if (oldX + 100 === newX && oldY - 100 === newY && this.banXiang) {
            this.canGoChess = true
          }
          if (oldX - 100 === newX && oldY + 100 === newY && this.banXiang) {
            this.canGoChess = true
          }
          if (oldX - 100 === newX && oldY - 100 === newY && this.banXiang) {
            this.canGoChess = true
          }
          break
        case 4:// shi
          this.canGoChess = false
          // console.log('shi', oldX, oldY, newX, newY)
          if (newX < 170 || newX > 270) { break }
          if (oldX + 50 === newX && oldY + 50 === newY) {
            this.canGoChess = true
          }
          if (oldX - 50 === newX && oldY + 50 === newY) {
            this.canGoChess = true
          }
          if (oldX - 50 === newX && oldY - 50 === newY) {
            this.canGoChess = true
          }
          if (oldX + 50 === newX && oldY - 50 === newY) {
            this.canGoChess = true
          }
          break
        case 5:// shuai
          this.canGoChess = false
          // console.log('shi', oldX, oldY)
          if (newX < 170 || newX > 270) { break }
          if (newY < 370 || newY > 470) { break }
          if (oldX === newX && oldY - 50 === newY) {
            this.canGoChess = true
          }
          if (oldX - 50 === newX && oldY === newY) {
            this.canGoChess = true
          }
          if (oldX + 50 === newX && oldY === newY) {
            this.canGoChess = true
          }
          if (oldX === newX && oldY + 50 === newY && oldY !== 470) {
            this.canGoChess = true
          }
          break
        case 6: // pao
          let num = 0
          // console.log(this.canGoChess)
          if (newX !== oldX && newY !== oldY) {
            // console.log('不在一条直线上')
            this.canGoChess = false
            break
          }
          if (this.existe) { // youqizi可以吃子
            // console.log('youqizi可以吃子')
            if (newX === oldX || newY === oldY) {
              for (let i in this.Chess) {
                // console.log(this.Chess, this.existe)
                if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {
                  num = num + 1
                  // console.log(num)
                }
                if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {
                  num = num + 1
                  // console.log(num)
                }
              }
              if (num !== 1) {
                this.canGoChess = false
              }
              // console.log(this.canGoChess)
              break
            }
            for (let i in this.Chess) {
              if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {
                this.canGoChess = false
                // console.log('zou1')
              }
              if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {
                this.canGoChess = false
                // console.log('zou2')
              }
            }
          }
          if (!this.existe) {
            console.log('点击的位置没有棋子')
            if (newX === oldX || newY === oldY) {
              console.log('x走')
              for (let i in this.Chess) {
                // console.log(this.Chess, this.existe)
                if (this.Chess[i].positionX === oldX && this.Chess[i].positionY > minY && this.Chess[i].positionY < maxY) {
                  num = num + 1
                  // console.log(num)
                }
                if (this.Chess[i].positionY === oldY && this.Chess[i].positionX > minX && this.Chess[i].positionX < maxX) {
                  num = num + 1
                  // console.log(num)
                }
              }
              if (num !== 0) {
                this.canGoChess = false
              }
              // console.log(this.canGoChess)
              break
            }
          }
          break
        case 7:
          this.canGoChess = false
          // console.log('bing')
          if (oldX === newX && oldY - 50 === newY) {
            this.canGoChess = true
          }
          if (newY <= 220) {
            if (oldX === newX && oldY - 50 === newY) {
              this.canGoChess = true
            }
            if (oldY === newY && oldX + 50 === newX) {
              this.canGoChess = true
            }
            if (oldY === newY && oldX - 50 === newX) {
              this.canGoChess = true
            }
          }
      }
      return this.canGoChess
    }
  }
}
script>

<style scoped lang="scss">
  @import "../../assets/scss/base.scss";
  @import "../../assets/scss/mixin.scss";
  @import "../../assets/scss/config.scss";
  .container{
    box-sizing: border-box;
    @media only screen and (min-width: 540px) and (max-width: 1180px){
      width: 1180px;
    }
    .dotest{
      box-sizing: border-box;
      height: 40px;
      width: 100%;
      border-bottom: 1px solid #cecece;
      @include flex();
      margin-top: 30px;
      .left{
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #EF0404;
      }
      .right{
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #000000;
        .time{
          font-size: 20px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #EF0404;
        }
      }
    }
    .dotest_content{
      box-sizing: border-box;
      margin-top: 40px;
      margin-bottom: 90px;
      @include flexed();
      .item_left{
        width: 225px;
        margin-right: 24px;
        .info{
          width: 225px;
          border: 1px solid #cecece;
          padding: 20px 30px;
          box-sizing: border-box;
          margin-bottom: 20px;
          .item_title{
            width: 100%;
            text-align: center;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
          }
          .item_info{
            width: 100%;
            text-align: left;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            margin: 10px 0;
            .question{
              color: #000;
              font-size: 30px;
            }
            .success{
              color: #EF0404;
              font-size: 30px;
            }
          }
        }
        .select {
          width: 225px;
          border: 1px solid #cecece;
          padding: 10px 30px 20px;
          box-sizing: border-box;
          @include flexed();
          .item_choose{
            cursor: not-allowed;
            width: 20px;
            height: 20px;
            border: 1px solid #cecece;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            text-align: center;
            line-height: 20px;
            margin-top: 10px;
            margin-right: 13px;
            &:nth-child(5n){
              margin-right: 0;
            }
          }
          .item_chooses{
            background-color: #008DE9;
            border: 1px solid #008DE9;
            color: #ffffff;
          }
          .agin_item_choose {
            background-color: #999;
            border: 1px solid #999;
            color: #000;
          }
        }
        .submit{
            width: 100px;
            height: 40px;
            background-color: #008DE9;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            margin: auto;
            margin-top: 50px;
            cursor: pointer;
          }
      }
      .item-rigts{
        width: 931px;
        border: 1px solid #cecece;
        padding-top: 20px;
        padding-bottom: 20px;
        // padding-left: 59px;
        box-sizing: border-box;
        margin: auto;
        .canvas-bg{
          width: 480px;
          background-color: #f8be7c;
          padding: 20px;
          margin: auto;
        }
      }
    }
  }
style>