⚡️ feature: add no matching function

Author: Simon he

src/components/MatchingPicture.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { arrayPic, emptyFlag, ratio, loading, height, n } from "../config";
-import { reset } from "../pic";
+import { reset, bfs, noMatching } from "../pic";
 import { Block } from "../type";
 import { baseImage } from "../request";
 const pre = ref<Block>({});
 function match(block: Block) {
+  noMatching();
   if (block.url === emptyFlag) return;
   if (pre.value === block) {
     pre.value.animate = false;
@@ -29,9 +30,13 @@ function match(block: Block) {
       _pre.disappear = false;
       if (isWin()) {
         setTimeout(() => {
-          alert("You Win!");
           baseImage();
-        });
+          alert("You Win!");
+        }, 100);
+      } else if (noMatching()) {
+        setTimeout(() => {
+          alert("You Lose! no matching");
+        }, 100);
       }
     }, 200);
   }
@@ -41,76 +46,7 @@ function match(block: Block) {
 }
 
 function canEliminate(block: Block) {
-  return bfs(block, pre.value) || bfs(pre.value, block);
-}
-
-function bfs(block, target, path = new Set()) {
-  const copyArray = JSON.parse(JSON.stringify(arrayPic.value));
-  const queue = [block];
-  while (queue.length) {
-    const cur = queue.shift();
-    const y = cur.y;
-    const x = cur.x;
-    // 处理边界
-    if (y > 0) {
-      const top = copyArray[y - 1][x];
-      const types: string[] = JSON.parse(JSON.stringify(cur.types || []));
-      top.types = types ? ["down", ...types] : ["down"];
-      if (preReturn(top)) {
-        if (top.pos === target.pos) {
-          console.log("find", top);
-          return true;
-        }
-        if (top.url === emptyFlag) {
-          queue.push(top);
-        }
-      }
-    }
-    if (y < copyArray.length - 1) {
-      const bottom = copyArray[y + 1][x];
-      const types: string[] = JSON.parse(JSON.stringify(cur.types || []));
-      bottom.types = types ? ["up", ...types] : ["up"];
-      if (preReturn(bottom)) {
-        if (bottom.pos === target.pos) {
-          console.log("find", bottom);
-          return true;
-        }
-        if (bottom.url === emptyFlag) {
-          queue.push(bottom);
-        }
-      }
-    }
-    if (x > 0) {
-      const left = copyArray[y][x - 1];
-      const types: string[] = JSON.parse(JSON.stringify(cur.types || []));
-      left.types = types ? ["right", ...types] : ["right"];
-      if (preReturn(left)) {
-        if (left.pos === target.pos) {
-          console.log("find", left);
-          return true;
-        }
-        if (left.url === emptyFlag) {
-          queue.push(left);
-        }
-      }
-    }
-    if (x < copyArray[0].length - 1) {
-      const right = copyArray[y][x + 1];
-      const types: string[] = JSON.parse(JSON.stringify(cur.types || []));
-      right.types = types ? ["left", ...types] : ["left"];
-
-      if (preReturn(right)) {
-        if (right.pos === target.pos) {
-          console.log("find", right);
-          return true;
-        }
-        if (right.url === emptyFlag) {
-          queue.push(right);
-        }
-      }
-    }
-  }
-  return false;
+  return bfs(block, pre.value);
 }
 
 function preReturn(block) {

src/pic.ts

@@ -1,4 +1,4 @@
-import { emptyFlag, arrayPic } from './config';
+import { emptyFlag, arrayPic, loading } from './config';
 import type { Block } from './type';
 
 const pictureMap = new Map<string, any>()
@@ -27,7 +27,6 @@ async function generateImage(image: any, n: number) {
   const ctx = canvas.getContext("2d")!;
   const w = image.width / n;
   const h = image.height / n;
-  let count = 0
   const cacheUrl = new Map<string, string>()
   for (let j = 0; j <= 2 * n + 1; j++) {
     const col = [];
@@ -59,7 +58,9 @@ async function generateImage(image: any, n: number) {
         url,
         x: i,
         y: j,
-        pos: ++count
+        pos: j > n
+          ? i - 1 + (j - n - 1) * n
+          : i - 1 + (j - 1) * n
       };
 
       numbers.push(JSON.parse(JSON.stringify(block)))
@@ -114,45 +115,178 @@ function randomPic(numbers: any[]) {
   return result
 }
 export async function initData(n: number, src: string) {
-  const { result: arrayPic, numbers } = await splitImage(n, src) as any
+  const { result: array, numbers } = await splitImage(n, src) as any
   const copyNumbers = JSON.parse(JSON.stringify(numbers))
-  const copyArrayPic = JSON.parse(JSON.stringify(arrayPic))
+  const copyArrayPic = JSON.parse(JSON.stringify(array))
+  let targetMap: Record<number, any> | null = {}
 
-  for (let i = 1; i < arrayPic.length - 1; i++) {
-    for (let j = 1; j < arrayPic[i].length - 1; j++) {
+  for (let i = 1; i < array.length - 1; i++) {
+    for (let j = 1; j < array[i].length - 1; j++) {
       const { url, pos, } = randomPic(copyNumbers)
+      if (targetMap[pos] === undefined) {
+        targetMap[pos] = copyArrayPic[i][j]
+      } else {
+        copyArrayPic[i][j].target = targetMap[pos]
+      }
       copyArrayPic[i][j].url = url
       copyArrayPic[i][j].pos = pos
     }
   }
-  return copyArrayPic
+  targetMap = null
+  arrayPic.value = copyArrayPic
+  if (noMatching()) {
+    reset()
+  }
 }
 
 export function reset() {
+  loading.value = true
   const numbers: any[] = []
   const copyArrayPic: Array<Block[]> = JSON.parse(JSON.stringify(arrayPic.value))
+  let targetMap: Record<number, any> | null = {}
 
-  console.log(arrayPic.value)
   arrayPic.value.forEach(row => {
     row.forEach(block => {
       if (block.url !== emptyFlag) {
         numbers.push(block)
       }
     })
   })
-  copyArrayPic.forEach(row => {
-    row.forEach(block => {
+  copyArrayPic.forEach((row, i) => {
+    row.forEach((block, j) => {
       if (block.url !== emptyFlag) {
         const { url, pos } = randomPic(numbers)
+        delete block.target
+        if (targetMap![pos] === undefined) {
+          targetMap![pos] = copyArrayPic[i][j]
+        } else {
+          block.target = targetMap![pos]
+        }
         block.url = url
         block.pos = pos
       }
     })
   })
-  console.log(copyArrayPic)
   arrayPic.value = copyArrayPic
+  if (noMatching()) {
+    reset()
+  } else {
+    loading.value = false
+  }
 }
 
 
+export function noMatching() {
+  // 判断是否无解了
+  const array: Block[] = []
+  arrayPic.value.forEach((row) => {
+    row.forEach((block) => {
+      if (block.target && block.url !== emptyFlag) {
+        array.push(block)
+      }
+    })
+  });
+  const result = array.every(block => !bfs(block, block.target!))
+  console.log(result)
+  return result
+}
 
 
+function preReturn(block: Block | null) {
+  if (!block) {
+    return false
+  }
+  let count = 0;
+  let pre = null,
+    cur = null;
+  if (block.types!.length < 4) {
+    return true;
+  }
+
+  for (let i = 1; i < block.types!.length; i++) {
+    cur = block.types![i];
+    pre = block.types![i - 1];
+    if (pre !== cur) {
+      count++;
+    }
+    if (count > 2) {
+      return false;
+    }
+  }
+  return true;
+}
+
+
+function sameBlock(block: Block, target: Block) {
+  return block.pos === target.pos && block.x === target.x && block.y === target.y
+}
+
+export function bfs(block: Block, target: Block, map = new Set) {
+  const queue = [block];
+  const maxHeight = arrayPic.value[0].length - 1
+  const maxWidth = arrayPic.value.length - 1
+  while (queue.length) {
+    const cur: Block = queue.shift()!;
+    if (map.has(cur)) {
+      continue
+    }
+    map.add(cur)
+    const y = cur.y;
+    const x = cur.x;
+    const types: string[] = cur.types || []
+    const top = y > 0 ? JSON.parse(JSON.stringify(arrayPic.value[y - 1][x])) : null
+    const bottom = y < maxWidth ? JSON.parse(JSON.stringify(arrayPic.value[y + 1][x])) : null
+    const left = x > 0 ? JSON.parse(JSON.stringify(arrayPic.value[y][x - 1])) : null
+    const right = x < maxHeight ? JSON.parse(JSON.stringify(arrayPic.value[y][x + 1])) : null
+    pushTypes(top, types, 'down')
+    pushTypes(bottom, types, 'up')
+    pushTypes(left, types, 'right')
+    pushTypes(right, types, 'left')
+
+    // 处理边界
+    if (preReturn(top) && (block.x !== target.x || block.y > target.y)) {
+      if (sameBlock(top, target)) {
+        console.log("find", top);
+        return true;
+      }
+      if (top.url === emptyFlag) {
+        queue.push(top);
+      }
+    }
+    if (preReturn(bottom) && (block.x !== target.x || block.y < target.y)) {
+      if (sameBlock(bottom, target)) {
+        console.log("find", bottom);
+        return true;
+      }
+      if (bottom.url === emptyFlag) {
+        queue.push(bottom);
+      }
+    }
+    if (preReturn(left) && (block.y !== target.y || block.x > target.x)) {
+      if (sameBlock(left, target)) {
+        console.log("find", left);
+        return true;
+      }
+      if (left.url === emptyFlag) {
+        queue.push(left);
+      }
+
+    }
+    if (preReturn(right) && (block.y !== target.y || block.x < target.x)) {
+      if (sameBlock(right, target)) {
+        console.log("find", right);
+        return true;
+      }
+      if (right.url === emptyFlag) {
+        queue.push(right);
+      }
+    }
+  }
+  return false;
+}
+
+function pushTypes(block: Block | null, types: string[], type: string) {
+  if (!block)
+    return
+  block.types = types ? [type, ...types] : [type];
+}

src/request.ts

@@ -50,7 +50,7 @@ function picIndex(): number {
 
 async function dealPicture(baseUrl: string, resolve: any) {
   base64.value = baseUrl
-  arrayPic.value = await initData(n.value, base64.value);
+  await initData(n.value, base64.value);
   const image = new Image();
   image.src = base64.value;
   image.onload = () => {

src/type.ts

@@ -5,4 +5,6 @@ export type Block = {
   animate: boolean | undefined
   disappear: boolean | undefined
   url: string,
+  target?: Block
+  types: string[]
 }