Vue 实现人机五子棋

发布于 2018-12-13|标签javascriptvue
复制链接
Vue 实现人机五子棋,Canvas绘图,不难理解直接上码
> * [预览效果](https://unnue.com/game/gobang)> * [github源码](https://github.com/jigsaw-china/unnue-nuxt/blob/master/pages/game/gobang.vue) * 核心代码 ``` javascript 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 3; j--) { for (let k = 0; k { 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 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://www.imooc.com/learn/644](https://www.imooc.com/learn/644)
冀ICP备17029012号-4 | 版权所有©鲍亚龙 |免责声明  | GIF图库  | NUXT版