💻揭秘！如何用 Vue 3 实现酷炫的色彩魔方游戏✨

import { reactive, ref, computed } from 'vue'

const dimension = ref(10) // 设置魔方阶数
const matchColor = ref('classic') // 初始配色方案为经典配色

// 定义配色方案
const matchColorsOptions: any = reactive({
  classic: ['#FFFFFF', '#FFFF00', '#FF0000', '#FFA500', '#0000FF', '#008000'],
  glow: ['#FF6EC7', '#FF4500', '#FFFF33', '#39FF14', '#1B03A3', '#9400D3'],
  gradient: ['#ADD8E6', '#90EE90', '#FFB6C1', '#FFFFE0', '#FFDAB9', '#E6E6FA'],
  single: ['#F5F5F5', '#D3D3D3', '#A9A9A9', '#696969', '#36454F', '#000000'],
  nature: ['#87CEEB', '#7CFC00', '#F4A460', '#4682B4', '#808080', '#FF4500'],
  contrast: ['#000000', '#FFFFFF', '#FFD700', '#00FF00', '#FFA500', '#1E90FF'],
  trend: ['#98FF98', '#FF7F50', '#FAFAD2', '#E6E6FA', '#AFEEEE', '#FFB7C5']
})

// 获取当前选择的配色方案
const currentColorScheme = computed(() => matchColorsOptions[matchColor.value])

// 生成颜色矩阵
const generateMatrix = (): string[][] => {
  const n = dimension.value
  const colorCount = currentColorScheme.value.length
  return Array.from({ length: n }, () =>
    Array.from({ length: n }, () =>
      currentColorScheme.value[Math.floor(Math.random() * colorCount)]
    )
  )
}

// 绘制单个点的函数
const drawPoint = (ctx: CanvasRenderingContext2D, x: number, y: number, color: string) => {
  ctx.fillStyle = color
  ctx.fillRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth)
  ctx.lineWidth = 0.5
  ctx.strokeRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth)
}

// 绘制整个矩阵的函数
const drawMatrix = (ctx: CanvasRenderingContext2D, matrix: string[][]) => {
  const n = dimension.value
  for (let x = 0; x < n; x++) {
    for (let y = 0; y < n; y++) {
      drawPoint(ctx, x, y, matrix[x][y])
    }
  }
  ctx.strokeRect(0, 0, canvasWidth, canvasWidth)
}

// 生成随机点
const randomPoint = () => ({
  x: parseInt(String(Math.random() * dimension.value)),
  y: parseInt(String(Math.random() * dimension.value))
})

// 生成随机颜色
const randomColor = (oldColor: string): string => {
  let newColor
  do {
    newColor = currentColorScheme.value[Math.floor(Math.random() * currentColorScheme.value.length)]
  } while (newColor === oldColor)
  return newColor
}

// 生成新的魔方图案
const bindGenerate = () => {
  if (!setupCanvas()) return

  const leftCtx = LeftRefCanvas.value!.getContext('2d')!
  const rightCtx = RightRefCanvas.value!.getContext('2d')!

  matrix = generateMatrix()
  drawMatrix(leftCtx, matrix)

  point = randomPoint()
  const { x, y } = point
  matrix[x][y] = randomColor(matrix[x][y])

  drawMatrix(rightCtx, matrix)
}

const bindHelp = () => {
  if (!RightRefCanvas.value) return

  const rightCtx = RightRefCanvas.value.getContext('2d')!
  const { x, y } = point
  const color = matrix[x][y]

  let isBlack = true
  const blinkEffect = () => {
    drawPoint(rightCtx, x, y, isBlack ? 'black' : color)
    isBlack = !isBlack
  }

  blinkEffect()
  timerId = setInterval(blinkEffect, 300)
}