🎈 perf: 暂存2048

src/components/game2048/Game2048V2.vue

@@ -19,7 +19,7 @@
         getNumberTileStyle(tile.renderState),
       ]"
     >
-      {{ tile.number }}
+      {{ tile.renderState.number }}
     </div>
   </div>
 </template>
@@ -70,6 +70,9 @@ namespace TableView {
   export type Pos = [y: number, x: number];
 }
 class TableView<T> {
+  static toPos(first: number, second: number, xFirst: boolean) {
+    return xFirst ? [second, first] : [first, second];
+  }
   private map = new Map<string, T>();
   constructor(
     private genKey: TableView.GenKey,
@@ -176,6 +179,9 @@ class Tile implements TileState {
   number: number = 0;
   renderState!: TileState;
   _exists!: boolean;
+  toString() {
+    return `Tile#${this.id}`;
+  }
   constructor() {
     this.id = Tile.lastId++;
     this.x = -1;
@@ -310,7 +316,7 @@ const addRandomTiles = async (count: number) => {
   await Promise.all(addedTiles.map((t) => t.show(false)));
 };
 const init = async () => {
-  await addRandomTiles(2);
+  await addRandomTiles(8);
   console.log(table.toArray());
 };
 onMounted(async () => {
@@ -379,16 +385,53 @@ const secondIndices = (d: Directions) =>
     })(),
   );
 const animate = ref(true);
+const once = true;
 const move = async (key: Directions) => {
-  const first = Array.from(firstIndices(key));
-  const second = Array.from(secondIndices(key));
-  const xFirst = arrayIncludes([Directions.UP, Directions.DOWN], key);
-  for (const y of first) {
-    for (const x of second.toReversed()) {
-      const tile = table.get(y, x, xFirst);
-      if (!tile) continue;
-    }
+  const first = Array.from(firstIndices(key)),
+    second = Array.from(secondIndices(key).toReversed()),
+    xFirst = arrayIncludes([Directions.UP, Directions.DOWN], key);
+  const tilesToMove = new Set<Tile>(),
+    tilesToShow = new Set<Tile>(),
+    tilesToHide = new Set<Tile>();
+  console.log(table.toArray());
+  for (const f of first) {
+    let prev: [s: number, Tile] | undefined,
+      changed = false,
+      finished: boolean;
+    do {
+      for (const s of second) {
+        const tile = table.get(f, s, xFirst);
+        if (!tile) continue;
+        if (!prev) {
+          prev = [s, tile];
+          continue;
+        }
+        const [precSecond, prevTile] = prev;
+        if (prevTile.number === tile.number) {
+          finished = false;
+          changed = true;
+          tile.exists = false;
+          prevTile.number *= 2;
+          tilesToMove.add(tile);
+          tilesToShow.add(prevTile);
+          tilesToHide.add(tile);
+          prev = once ? undefined : [s, prevTile];
+        } else {
+          prev = [s, tile];
+        }
+      }
+      const dumpIndexIt = Iterator.from(second);
+      for (const s of second) {
+        const tile = table.get(f, s, xFirst);
+        if (!tile) continue;
+      }
+      finished = true;
+    } while (!once && !finished);
   }
+  console.log('add', tilesToShow);
+  console.log('move', tilesToMove);
+  console.log('hide', tilesToHide);
+  console.log(table.toArray());
 };
 useEventListener(document, 'keydown', async (e) => {
   if (!arrayIncludes(Object.values(Directions), e.key)) {