vue实现消消乐

说明：vue实现消消乐
效果图：

step1:C:\Users\wangrusheng\PycharmProjects\untitled3\src\views\Links.vue

<template>
  <div class="game">
    <div class="controls">
      <button @click="findHint" :disabled="isProcessing || hints <= 0">提示（剩余 {{ hints }}）</button>
      <button @click="restartGame">重新开始</button>
      <div class="score">得分: {{ score }}</div>
    </div>
    <div class="board">
      <div
        v-for="(row, rowIndex) in board"
        :key="rowIndex"
        class="row"
      >
        <div
          v-for="(cell, colIndex) in row"
          :key="colIndex"
          class="cell"
          :class="[
            { selected: isSelected(rowIndex, colIndex) },
            { hint: isHint(rowIndex, colIndex) }
          ]"
          @click="handleClick(rowIndex, colIndex)"
        >
          {{ cell.emoji }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

const EMOJI_LIST = [
  '🐤', '🐌', '🐞', '🐝'
];

const ROWS = 8;
const COLS = 8;
const MAX_HINTS = 5;

const board = reactive([]);
const selected = ref(null);
const score = ref(0);
const hints = ref(MAX_HINTS);
const currentHint = ref(null);
const isProcessing = ref(false);

function initializeBoard() {
  board.splice(0, board.length);
  for (let i = 0; i < ROWS; i++) {
    const row = [];
    for (let j = 0; j < COLS; j++) {
      row.push({
        emoji: EMOJI_LIST[Math.floor(Math.random() * EMOJI_LIST.length)],
        position: { row: i, col: j }
      });
    }
    board.push(row);
  }
  processMatches(true);
}

function handleClick(row, col) {
  currentHint.value = null;
  if (!selected.value) {
    selected.value = { row, col };
    return;
  }

  if (isAdjacent(selected.value, { row, col })) {
    swapEmojis(selected.value, { row, col });
    if (!processMatches()) {
      swapEmojis(selected.value, { row, col });
    }
  }
  selected.value = null;
}

function isAdjacent(pos1, pos2) {
  const dr = Math.abs(pos1.row - pos2.row);
  const dc = Math.abs(pos1.col - pos2.col);
  return (dr === 1 && dc === 0) || (dc === 1 && dr === 0);
}

function swapEmojis(pos1, pos2) {
  [board[pos1.row][pos1.col].emoji, board[pos2.row][pos2.col].emoji] =
  [board[pos2.row][pos2.col].emoji, board[pos1.row][pos1.col].emoji];
}

async function processMatches(initial = false) {
  isProcessing.value = true;
  const matches = findMatches();
  if (matches.size === 0) {
    isProcessing.value = false;
    return false;
  }

  matches.forEach(({ row, col }) => {
    board[row][col].emoji = null;
    if (!initial) score.value += 100;
  });

  await new Promise(resolve => setTimeout(resolve, 300));
  applyGravity();
  fillEmptySlots();

  await new Promise(resolve => setTimeout(resolve, 300));
  processMatches();
  isProcessing.value = false;
  return true;
}

function findMatches() {
  const matches = new Set();

  board.forEach((row, i) => {
    let count = 1;
    row.forEach((cell, j) => {
      if (j > 0 && cell.emoji === row[j - 1].emoji) {
        count++;
      } else {
        count = 1;
      }
      if (count >= 3) {
        for (let k = j; k > j - count; k--) {
          matches.add(`${i},${k}`);
        }
      }
    });
  });

  for (let j = 0; j < COLS; j++) {
    let count = 1;
    for (let i = 1; i < ROWS; i++) {
      if (board[i][j].emoji === board[i - 1][j].emoji) {
        count++;
      } else {
        count = 1;
      }
      if (count >= 3) {
        for (let k = i; k > i - count; k--) {
          matches.add(`${k},${j}`);
        }
      }
    }
  }

  return Array.from(matches).map(str => {
    const [row, col] = str.split(',').map(Number);
    return { row, col };
  });
}

function applyGravity() {
  for (let j = 0; j < COLS; j++) {
    let writeIndex = ROWS - 1;
    for (let i = ROWS - 1; i >= 0; i--) {
      if (board[i][j].emoji !== null) {
        board[writeIndex][j].emoji = board[i][j].emoji;
        if (writeIndex !== i) board[i][j].emoji = null;
        writeIndex--;
      }
    }
  }
}

function fillEmptySlots() {
  board.forEach((row, i) => {
    row.forEach((cell, j) => {
      if (cell.emoji === null) {
        board[i][j].emoji = EMOJI_LIST[Math.floor(Math.random() * EMOJI_LIST.length)];
      }
    });
  });
}

function isSelected(row, col) {
  return selected.value?.row === row && selected.value?.col === col;
}

function restartGame() {
  board.splice(0, board.length);
  selected.value = null;
  score.value = 0;
  hints.value = MAX_HINTS;
  currentHint.value = null;
  initializeBoard();
}

function findHint() {
  if (hints.value <= 0 || isProcessing.value) return;

  for (let i = 0; i < ROWS; i++) {
    for (let j = 0; j < COLS; j++) {
      if (j < COLS - 1) {
        const hasMatch = checkPotentialSwap(i, j, i, j + 1);
        if (hasMatch) {
          currentHint.value = { pos1: { row: i, col: j }, pos2: { row: i, col: j + 1 } };
          hints.value--;
          return;
        }
      }
      if (i < ROWS - 1) {
        const hasMatch = checkPotentialSwap(i, j, i + 1, j);
        if (hasMatch) {
          currentHint.value = { pos1: { row: i, col: j }, pos2: { row: i + 1, col: j } };
          hints.value--;
          return;
        }
      }
    }
  }
  currentHint.value = null;
}

function checkPotentialSwap(r1, c1, r2, c2) {
  const temp = board[r1][c1].emoji;
  board[r1][c1].emoji = board[r2][c2].emoji;
  board[r2][c2].emoji = temp;

  const hasMatch = checkMatchAt(r1, c1) || checkMatchAt(r2, c2);

  board[r2][c2].emoji = board[r1][c1].emoji;
  board[r1][c1].emoji = temp;

  return hasMatch;
}

function checkMatchAt(row, col) {
  const emoji = board[row][col].emoji;

  let left = col;
  while (left > 0 && board[row][left - 1].emoji === emoji) left--;
  let right = col;
  while (right < COLS - 1 && board[row][right + 1].emoji === emoji) right++;
  if (right - left + 1 >= 3) return true;

  let top = row;
  while (top > 0 && board[top - 1][col].emoji === emoji) top--;
  let bottom = row;
  while (bottom < ROWS - 1 && board[bottom + 1][col].emoji === emoji) bottom++;
  return bottom - top + 1 >= 3;
}

function isHint(row, col) {
  return currentHint.value?.pos1.row === row && currentHint.value?.pos1.col === col ||
         currentHint.value?.pos2.row === row && currentHint.value?.pos2.col === col;
}

initializeBoard();
</script>

<style>
.game {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.controls {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
}

button {
  padding: 8px 15px;
  background: #8b4513;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #6b2d0f;
}

button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

.score {
  font-size: 24px;
  color: #333;
}

.board {
  background: #f0d9b5;
  padding: 10px;
  border-radius: 10px;
  display: inline-block;
}

.row {
  display: flex;
}

.cell {
  width: 50px;
  height: 50px;
  background: #fff;
  border: 2px solid #8b4513;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.cell.selected {
  background: #ffeb3b;
  transform: scale(0.9);
}

.cell.hint {
  background: #aaffaa;
  box-shadow: 0 0 10px #00ff00;
}

.cell:hover {
  background: #ffe0b2;
}
</style>

end