Mon Jul 3 23:02:00 UTC 2023 inscode

src/App.vue

 <script setup>
-import { onMounted, ref } from "vue"
+import { onMounted, ref, computed } from "vue"
 import { is_empty, checkWin, is_black, is_white, robotPlay } from "./utils"
 // import { robotPlay } from './utils/api'
 // 配置
 const size = ref(20)
 const win_size = ref(5)
+// 棋盘
 const lattices = ref([])
-const is_load = ref(false)
+// 下起记录
+const records = ref([])
 // 5 连珠的下标
 let isWin = []
+const records_obj = computed(() => {
+  return records.value.reduce((r, { location, type }) => {
+    const [y, x] = location || []
+    const _win = isWin.map(([r, c]) => `${r}_${c}`).includes(`${y}_${x}`)
+    return {
+      ...r,
+      [`${y}_${x}`]: _win ? 'isWin' : type
+    }
+  }, {})
+})
 
 onMounted(confirm)
 
@@ -16,12 +28,22 @@ function confirm() {
   isWin = []
   lattices.value = Array(size.value).fill([]).map(() => Array(size.value).fill(is_empty))
 }
+function back(){
+  Array(2)
+}
+
+function setPiece([y, x], type){
+  records.value.push({
+    location: [y, x],
+    type: type
+  })
+  lattices.value[y][x] = type
+}
 async function playChess(item, row, col) {
-  if (is_load.value) return
   if (isWin.length || item !== is_empty) return
 
   // 玩家下棋
-  lattices.value[row][col] = is_black
+  setPiece([row, col], is_black)
   const test = checkWin({ row, col, board: lattices.value, player: is_black, win_size: win_size.value })
   if (test) {
     isWin = test
@@ -29,20 +51,13 @@ async function playChess(item, row, col) {
   }
   // 机器人下棋
   const [y, x] = robotPlay(lattices.value, is_white, win_size.value)
-  lattices.value[y][x] = is_white
+
+  setPiece([y, x], is_white)
   const testRobo = checkWin({ row: y, col: x, board: lattices.value, player: is_white, win_size: win_size.value })
   if (testRobo) {
     isWin = testRobo
   }
 }
-
-
-function getStyle(item, row, col) {
-  if (isWin.length) {
-    return isWin.map(([r, c]) => `${r}_${c}`).includes(`${row}_${col}`) ? 'isWin' : item
-  }
-  return item
-}
 </script>
 
 <template>
@@ -56,10 +71,11 @@ function getStyle(item, row, col) {
       <input v-model="win_size" id="win_size" type="number" min="3" max="8">
     </p>
     <button @click="confirm" class="space-nowrap">重新开始</button>
+    <button @click="back" class="space-nowrap">返回上一步</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}`"
+    <p class="col" :class="records_obj[`${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>

src/assets/base.css

@@ -4,6 +4,10 @@
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
 
+  --vt-c-red: #ff0000;
+  --vt-c-red-soft: #f80808;
+  --vt-c-red-mute: #f20202;
+
   --vt-c-black: #181818;
   --vt-c-black-soft: #222222;
   --vt-c-black-mute: #282828;
@@ -36,6 +40,9 @@
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
+
+  --p-border-color: var(--vt-c-black);
+  --p-win-border-color: var(--vt-c-red);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -49,6 +56,9 @@
 
     --color-heading: var(--vt-c-text-dark-1);
     --color-text: var(--vt-c-text-dark-2);
+
+    --p-border-color: var(--vt-c-white);
+    --p-win-border-color: var(--vt-c-white);
   }
 }
 

src/assets/main.css

@@ -113,12 +113,12 @@ input {
 
 .isBlack::after {
   background-color: black;
-  border-color: black;
+  border-color: var(--p-border-color);
 }
 
 .isWin::after {
   background-color: red;
-  border-color: red;
+  border-color: var(--p-win-border-color);
 }
 
 .space-nowrap {

src/utils/index.js

@@ -81,8 +81,11 @@ export function robotPlay(board, robot, win_size) {
     let score = 0;
     const [row, col] = point;
 
-    // 这里要应该是要返回这个位置的分数
-    score = estimateScore({ row, col, board, win_size })
+    // 评估每个空位置的价值，从八个方向去计算
+    score = directions.reduce((r, [y, x]) => {
+      const square = getDirectionScore(board, row, col, [y, x], win_size, is_black) + getDirectionScore(board, row, col, [y * -1, x * -1], win_size, is_black)
+      return r + (10 ** square)
+    }, 0)
 
     // 选取分数最高的空位
     if (score >= maxScore) {
@@ -150,18 +153,3 @@ function getDirectionScore(board, row, col, [y, x], win_size, piece_type) {
   return res
 }
 
-/**
- * 评估每个空位置的价值，从八个方向去计算,
- * 计分规则 1,10,100,1000,10000,100000 根据棋子数量计分，每多一颗棋子，分数乘以10
- * @param {object} Estimate 
- * @param {object} Estimate.board
- * @param {number} Estimate.row
- * @param {number} Estimate.col
- * @return {number}
- */
-function estimateScore({ board, row, col, win_size }) {
-  return directions.reduce((r, [y, x]) => {
-    const square = getDirectionScore(board, row, col, [y, x], win_size, is_black) + getDirectionScore(board, row, col, [y * -1, x * -1], win_size, is_black)
-    return r + (10 ** square)
-  }, 0)
-}