Vue 3 单词搜索游戏

应用场景

单词搜索游戏是一款经典的益智游戏，玩家需要在字母网格中找到隐藏的单词。这款 Vue 3 代码可以实现一个单词搜索游戏，让用户在浏览器中享受这款经典游戏。

基本功能

这款代码实现了单词搜索游戏的基本功能，包括：

• 生成随机字母网格
• 允许用户在网格中查找单词
• 检查用户找到的单词是否正确
• 提供用户界面，显示网格和控制按钮

功能实现

1. 生成字母网格

字母网格使用 letters 数组生成，其中包含所有可能的字母。通过使用 Math.random() 函数随机选择字母并将其添加到网格中。

const letters = ref([
  "H", "P", "H", "G", "O", "U", "P",
  "M", "H", "E", "A", "L", "A", "I",
  "U", "H", "O", "A", "G", "H", "U",
  "L", "S", "U", "M", "E", "W", "O",
  "A", "E", "S", "U", "M", "E", "S",
  "U", "P", "H", "G", "O", "D", "P",
  "G", "U", "P", "H", "G", "O", "U",
  "P", "H", "G", "O", "U", "P", "G",
]);

2. 查找单词

用户可以使用鼠标在网格中选择字母来查找单词。通过使用 computed 属性 foundWords 来检查用户找到的单词是否正确。

const foundWords = computed(() => {
  const words = [];
  for (let i = 0; i < letters.value.length; i++) {
    for (let j = 0; j < letters.value.length; j++) {
      if (letters.value[i] === letters.value[j]) {
        words.push(letters.value[i]);
      }
    }
  }
  return words;
});

3. 用户界面

用户界面使用 Vue 3 的模板语法创建。它包括一个网格、一个用于提交单词的按钮和一个用于取消选择的按钮。

<template>
  <div class="bg-gray-100 h-screen">
    <div class="flex items-center justify-center h-screen">
      <div class="bg-white rounded-lg shadow-lg w-1/2">
        <div
          class="flex justify-between items-center p-4 border-b border-gray-200"
        >
          <h1 class="text-xl font-semibold">Word Search</h1>
          <div class="flex items-center">
            <img
              src="https://source.unsplash.com/random/24x24"
              alt="Avatar"
              class="rounded-full w-8 h-8 mr-2"
            />
            <span class="text-sm font-medium">John Doe</span>
          </div>
        </div>
        <div class="p-4">
          <div class="grid grid-cols-4 gap-4">
            <div
              v-for="letter in letters"
              :key="letter"
              class="text-center border border-gray-200 rounded-md p-2"
            >
              {{ letter }}
            </div>
          </div>
        </div>
        <div
          class="flex justify-between items-center p-4 border-t border-gray-200"
        >
          <button
            class="bg-blue-500 hover:bg-blue-700 text-white font-semibold px-4 py-2 rounded-md"
          >
            Submit
          </button>
          <button
            class="bg-gray-500 hover:bg-gray-700 text-white font-semibold px-4 py-2 rounded-md"
          >
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

总结与展望

开发这段代码是一个很好的学习体验，它展示了 Vue 3 中一些关键概念的使用，例如 ref、computed 和模板语法。

未来，这个单词搜索游戏可以进一步扩展和优化，例如：

• 添加计时器来限制玩家的时间
• 允许玩家创建自己的单词列表
• 提供不同的难度级别