龙空技术网

Vue开发简单的五子棋小游戏

三国藤吉 116

前言:

目前同学们对“五子棋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语言编程