摘要：預覽效果源碼核心代碼記錄是否走過所有贏法數量贏法數組我方贏法的統計數組計算機贏法的統計數組初始化填充數組是否走過贏法數組橫豎斜反斜贏法的統計數組繪制水印繪制棋盤落子實現我方落子統計贏法你贏了計算機落子最大分數所在坐標遍歷棋盤遍

預覽效果
github源碼

核心代碼

export default {
  data () {
    return {
      chess: {},
      context: {},
      chessBoard: [], // 記錄是否走過
      me: true,
      count: 0, // 所有贏法數量
      wins: [], // 贏法數組
      myWin: [], // 我方贏法的統計數組
      computerWin: [], // 計算機贏法的統計數組
      over: false,
    }
  },
  mounted () {
    setTimeout(_ => {
      this.init()
    })
  },
  methods: {
    // 初始化
    init () {
      this.chess = this.$refs.canvas
      this.context = this.chess.getContext("2d")
      this.drawImage( _ => {
        this.drawChessBoard()
      })
      this.fillArray()
    },
    // 填充數組
    fillArray () {
      // 是否走過
      for (let i = 0; i < 15; i++) {
        this.chessBoard[i] = []
        for (let j = 0; j < 15; j++) {
          this.chessBoard[i][j] = 0
        }
      }
      // 贏法數組
      for (let i = 0; i < 15; i++) {
        this.wins[i] = []
        for (let j = 0; j < 15; j++) {
          this.wins[i][j] = []
        }
      }
      // 橫
      for (let i = 0; i < 15; i++) {
        for (let j = 0; j < 11; j++) {
          for (let k = 0; k < 5; k++) {
            this.wins[i][j+k][this.count] = true
          }
          this.count++
        }
      }
      // 豎
      for (let i = 0; i < 15; i++) {
        for (let j = 0; j < 11; j++) {
          for (let k = 0; k < 5; k++) {
            this.wins[j+k][i][this.count] = true
          }
          this.count++
        }
      }
      // 斜
      for (let i = 0; i < 11; i++) {
        for (let j = 0; j < 11; j++) {
          for (let k = 0; k < 5; k++) {
            this.wins[i+k][j+k][this.count] = true
          }
          this.count++
        }
      }
      // 反斜
      for (let i = 0; i < 11; i++) {
        for (let j = 14; j > 3; j--) {
          for (let k = 0; k < 5; k++) {
            this.wins[i+k][j-k][this.count] = true
          }
          this.count++
        }
      }
      // 贏法的統計數組
      for (let i = 0; i < this.count; i++) {
        this.myWin[i] = 0
        this.computerWin[i] = 0
      }
    },
    // 繪制水印
    drawImage (callback) {
      const { context } = this
      const img = new Image()
      img.src = "/images/logo.svg"
      img.onload = _ => {
        context.drawImage(img, (450 - img.width)/2, (450 - img.height)/2, img.width, img.height)
        callback()
      }
    },
    // 繪制棋盤
    drawChessBoard () {
      const { context } = this
      context.strokeStyle = "#bfbfbf"
      for (let i = 0; i < 15; i++) {
        context.moveTo(15 + i * 30, 15)
        context.lineTo(15 + i * 30, 435)
        context.stroke()
        context.moveTo(15, 15 + i * 30)
        context.lineTo(435, 15 + i * 30)
        context.stroke()
      }
    },
    // 落子實現
    onStep (x, y, me) {
      const { context } = this
      context.beginPath()
      context.arc(15 + x * 30, 15 + y * 30, 13, 0, 2 * Math.PI)
      context.closePath()
      const gradient = context.createRadialGradient(15 + x * 30 + 2, 15 + y * 30 - 2, 13, 15 + x * 30 + 2, 15 + y * 30 - 2, 0)
      if (me) {
        gradient.addColorStop(0, "#0a0a0a")
        gradient.addColorStop(1, "#636766")
      } else {
        gradient.addColorStop(0, "#d1d1d1")
        gradient.addColorStop(1, "#f9f9f9")
      }
      context.fillStyle = gradient
      context.fill()
    },
    // 我方落子
    chessClick (e) {
      if (this.over) {
        return
      }
      if (!this.me) {
        return
      }
      const ox = e.offsetX
      const oy = e.offsetY
      const x = Math.floor(ox/30)
      const y = Math.floor(oy/30)

      if (this.chessBoard[x][y] === 0) {
        this.chessBoard[x][y] = 1
        this.onStep(x, y, this.me)

        // 統計贏法
        for (let k = 0; k < this.count; k++) {
          if (this.wins[x][y][k]) {
            this.myWin[k]++
            this.computerWin[k] = 6
            if (this.myWin[k] === 5) {
              alert("你贏了")
              this.over = true
            }
          }
        }
        if (!this.over) {
          this.me = !this.me
          this.computerAI()
        }
      }
    },
    // 計算機落子
    computerAI () {
      const myScore = []
      const computerScore = []
      let max = 0 // 最大分數
      let u = 0, v = 0 // 所在坐標

      for (let i = 0; i < 15; i++) {
        myScore[i] = []
        computerScore[i] = []
        for (let j = 0; j < 15; j++) {
          myScore[i][j] = 0
          computerScore[i][j] = 0
        }
      }
      // 遍歷棋盤
      for (let i = 0; i < 15; i++) {
        for (let j = 0; j < 15; j++) {
          if (this.chessBoard[i][j] === 0) {
            // 遍歷所有贏法
            for (let k = 0; k < this.count; k++) {
              if (this.wins[i][j][k]) {
                // 我方
                if (this.myWin[k] === 1) {
                  myScore[i][j] += 200
                } else if (this.myWin[k] === 2) {
                  myScore[i][j] += 400
                } else if (this.myWin[k] === 3) {
                  myScore[i][j] += 2000
                } else if (this.myWin[k] === 4) {
                  myScore[i][j] += 10000
                }
                // 計算機
                if (this.computerWin[k] === 1) {
                  computerScore[i][j] += 220
                } else if (this.computerWin[k] === 2) {
                  computerScore[i][j] += 420
                } else if (this.computerWin[k] === 3) {
                  computerScore[i][j] += 2100
                } else if (this.computerWin[k] === 4) {
                  computerScore[i][j] += 20000
                }
              }
            }
            // 比較分數
            if (myScore[i][j] > max) {
              max = myScore[i][j]
              u = i
              v = j
            } else if (myScore[i][j] === max) {
              if (computerScore[i][j] > computerScore[u][v]) {
                u = i
                v = j
              }
            }
            if (computerScore[i][j] > max) {
              max = computerScore[i][j]
              u = i
              v = j
            } else if (computerScore[i][j] === max) {
              if (myScore[i][j] > myScore[u][v]) {
                u = i
                v = j
              }
            }
          }
        }
      }
      this.onStep(u, v, false)
      this.chessBoard[u][v] = 2
      // 統計贏法
      for (let k = 0; k < this.count; k++) {
        if (this.wins[u][v][k]) {
          this.computerWin[k]++
          this.myWin[k] = 6
          if (this.computerWin[k] === 5) {
            alert("計算機贏了")
            this.over = true
          }
        }
      }
      if (!this.over) {
        this.me = !this.me
      }
    }
  }
}

原文地址：https://unnue.com/article/50