前言:
目前同学们对“五子棋c语言编程”可能比较重视,咱们都想要知道一些“五子棋c语言编程”的相关文章。那么小编在网络上网罗了一些有关“五子棋c语言编程””的相关内容,希望同学们能喜欢,朋友们快快来学习一下吧!<template> <div class="container"> <h1>五子棋</h1> <div class="board"> <div class="row" v-for="(row, rowIndex) in board" :key="rowIndex"> <div class="cell" v-for="(cell, cellIndex) in row" :key="cellIndex" @click="placePiece(rowIndex, cellIndex)"> <div class="piece" :class="{'black': cell == 1, 'white': cell == 2}"> </div> </div> </div> </div> <button @click="resetBoard">重新开始</button> </div></template><script>export default { data () { return { board: [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ], currentPlayer: 1,//选手 1/2 gameOver: false } }, methods: { placePiece (row, col) { if (this.gameOver) return; if (this.board[row][col] !== 0) return; this.$set(this.board[row], [col], this.currentPlayer)// // this.board[row][col] = this.currentPlayer;二维数组深层监听,这样的写法不行,页面不做渲染 if (this.checkWin(row, col)) { this.gameOver = true; alert(`Player ${this.currentPlayer} wins!`); } else { this.currentPlayer = this.currentPlayer === 1 ? 2 : 1;//切换选择 } }, resetBoard () { this.board = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ]; this.currentPlayer = 1; this.gameOver = false; }, //判读输赢的逻辑 checkWin (row, col) { const directions = [ [0, 1], [1, 0], [1, 1], [-1, 1] ]; for (let i = 0; i < directions.length; i++) { const [x, y] = directions[i]; let count = 1; let r = row + x; let c = col + y; while (r >= 0 && r < 10 && c >= 0 && c < 10 && this.board[r][c] === this.currentPlayer) { count++; r += x; c += y; } r = row - x; c = col - y; while (r >= 0 && r < 10 && c >= 0 && c < 10 && this.board[r][c] === this.currentPlayer) { count++; r -= x; c -= y; } if (count >= 5) { return true; } } return false; } }}</script><style scoped>.board { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20px;}.row { display: flex;}.cell { width: 50px; height: 50px; border: 1px solid #000; position: relative;}.piece { width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}.black { background-color: #000;}.white { background-color: #fff; border: 1px solid #000;}</style>
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。
标签: #五子棋c语言编程