Auto Commit

src/App.vue

 <script setup>
-import { reactive, ref, watch } from "vue"
+import { onMounted, reactive, ref } from "vue"
 // 配置
 const con = reactive({
-  width: 10,
-  height: 10
+  width: 20,
+  height: 20
 })
-
 const lattices = ref([])
-watch(() => con, () => {
+let nextPlay = 'isBlack' // isWhite
+// 5 连珠的下标
+let isWin = []
+
+onMounted(confirm)
+
+function confirm() {
+  const { width, height } = con
+  nextPlay = 'isBlack'
+  isWin = []
+  lattices.value = Array(height).fill([]).map(item => Array(width).fill(null))
+}
+
+function playChess(item, r_i, c_i) {
+  if (isWin.length || item) return
+  lattices.value[r_i][c_i] = nextPlay
+  const test = checkWin(lattices.value, nextPlay)
+  if (test) {
+    console.log(test)
+    isWin = test
+    return
+  }
+  nextPlay = nextPlay === 'isBlack' ? 'isWhite' : 'isBlack'
+
+}
+// AI 生成代码
+function checkWin(board) {
+  const rows = board.length;
+  const cols = board[0].length;
+
+  // 检查行
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols - 4; col++) {
+      if (
+        board[row][col] &&
+        board[row][col] === board[row][col + 1] &&
+        board[row][col] === board[row][col + 2] &&
+        board[row][col] === board[row][col + 3] &&
+        board[row][col] === board[row][col + 4]
+      ) {
+        const positions = [];
+        for (let i = 0; i < 5; i++) {
+          positions.push([row, col + i]);
+        }
+        return positions;
+      }
+    }
+  }
+
+  // 检查列
+  for (let col = 0; col < cols; col++) {
+    for (let row = 0; row < rows - 4; row++) {
+      if (
+        board[row][col] &&
+        board[row][col] === board[row + 1][col] &&
+        board[row][col] === board[row + 2][col] &&
+        board[row][col] === board[row + 3][col] &&
+        board[row][col] === board[row + 4][col]
+      ) {
+        const positions = [];
+        for (let i = 0; i < 5; i++) {
+          positions.push([row + i, col]);
+        }
+        return positions;
+      }
+    }
+  }
 
-}, { deep: true })
+  // 检查对角线（左上到右下）
+  for (let row = 0; row < rows - 4; row++) {
+    for (let col = 0; col < cols - 4; col++) {
+      if (
+        board[row][col] &&
+        board[row][col] === board[row + 1][col + 1] &&
+        board[row][col] === board[row + 2][col + 2] &&
+        board[row][col] === board[row + 3][col + 3] &&
+        board[row][col] === board[row + 4][col + 4]
+      ) {
+        const positions = [];
+        for (let i = 0; i < 5; i++) {
+          positions.push([row + i, col + i]);
+        }
+        return positions;
+      }
+    }
+  }
+
+  // 检查对角线（右上到左下）
+  for (let row = 0; row < rows - 4; row++) {
+    for (let col = cols - 1; col >= 4; col--) {
+      if (
+        board[row][col] &&
+        board[row][col] === board[row + 1][col - 1] &&
+        board[row][col] === board[row + 2][col - 2] &&
+        board[row][col] === board[row + 3][col - 3] &&
+        board[row][col] === board[row + 4][col - 4]
+      ) {
+        const positions = [];
+        for (let i = 0; i < 5; i++) {
+          positions.push([row + i, col - i]);
+        }
+        return positions;
+      }
+    }
+  }
+
+  // 如果没有连续五个棋子，则返回 null
+  return null;
+}
+
+
+function getStyle(item, r_i, c_i) {
+  if (isWin.length) {
+    return isWin.map(([r, c]) => `${r}_${c}`).includes(`${r_i}_${c_i}`) ? 'isWin' : item
+  }
+  return item
+}
 </script>
 
 <template>
-  <div>
-    <p>
+  <div class="content flex-between">
+    <p class="flex-between">
       <label>高：</label>
-      <input type="number">
+      <input v-model="con.height" type="number">
+    </p>
+    <p class="flex-between">
+      <label>宽：</label>
+      <input v-model="con.width" type="number">
+    </p>
+    <button @click="confirm">重新开始</button>
+  </div>
+  <div class="content border-top content-lattice">
+    <p class="row" v-for="(lattice, r_i) in lattices" :key="r_i">
+    <p class="col" :class="getStyle(item, r_i, c_i)" v-for="(item, c_i) in lattice" :key="`${r_i}-${c_i}`"
+      @click="playChess(item, r_i, c_i)">
     </p>
-    <p>
-      <label>框：</label>
-      <input type="number">
     </p>
   </div>
-  <div></div>
 </template>
 

src/assets/main.css

 @import "./base.css";
 
-*{
+* {
   margin: 0;
   padding: 0;
 }
@@ -9,5 +9,79 @@
   margin: 0 auto;
 
   font-weight: normal;
+  cursor: pointer;
 }
 
+.content {
+  padding: 6px;
+  box-sizing: border-box;
+}
+
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+input {
+  width: 60px;
+}
+
+.border-top {
+  border-top: 1px solid #ccc;
+}
+
+.content-lattice {
+  display: flex;
+  justify-content: center;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+}
+
+.col {
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  line-height: 20px;
+  position: relative;
+}
+
+.col::after {
+  content: '';
+  line-height: 0px;
+  text-align: center;
+  height: 1px;
+  width: 100%;
+  background: #999;
+  position: absolute;
+  top: calc(50% - 1px);
+  left: 0;
+}
+
+.col::before {
+  content: '';
+  width: 1px;
+  height: 100%;
+  background: #999;
+  position: absolute;
+  left: calc(50% - 1px);
+  top: 0;
+}
+
+.isWhite::after {
+  content: 'O';
+  color: brown;
+}
+
+.isBlack::after {
+  content: 'O';
+  color: black;
+}
+
+.isWin::after {
+  content: 'O';
+  color: red;
+}
\ No newline at end of file