Vue开发anagram变位词游戏 随机读取JSON词库实现求助

现有代码核心问题 #

• 方法命名大小写不统一：定义的NewQuestion和调用的newQuestion、newAnagram名称不匹配，运行直接报方法不存在
• 随机取数逻辑传参错误：randArray要求传入数组参数，原代码直接传字符串'5'/'6'，完全没有对接导入的JSON词库
• 答案校验逻辑完全不符合需求：变位词游戏需要校验用户输入的单词是否为当前题目的合法同字母异序词，原代码错误地做数字相等判断，完全跑不通
• 题目生成逻辑缺失：没有存储当前抽取的变位词组、打乱后的题干字段，计算属性question错误地从字符串类型的wordLength上取words属性，永远返回undefined
• 计时器没有做重复开启清理：多次点击开始、重启游戏会叠加计时器间隔，倒计时速度会越来越快

修复后代码 #

1. 工具函数补充（game.js） #

原有随机取数组元素的逻辑保留，新增单词打乱工具用于生成乱序题干：

export function randArray(arr) {
  const randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

// 打乱字母顺序生成题干，避免打乱后和原单词完全一致
export function shuffle(str) {
  const arr = str.split('');
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  const shuffled = arr.join('');
  return shuffled === str ? shuffle(str) : shuffled;
}

2. 词库格式修正（anagrams.json） #

保证JSON结构完整闭合，结构参考如下：

{
  "anagrams": {
    "5": [
      ["abets", "baste", "betas", "beast", "beats"]
      // 其余5字母变位词组按格式补全
    ],
    "6": [
      // 6字母变位词组
    ],
    "7": [
      // 7字母变位词组
    ],
    "8": [
      // 8字母变位词组
    ]
  }
}

3. 主组件逻辑修复（main.vue） #

统一小驼峰命名，补全逻辑链路，修复校验和计时问题：

<script>
import SelectInput from './SelectInput.vue';
import PlayButton from './PlayButton.vue';
import MyScore from './Score.vue';
import MyTimer from './Timer.vue';
import MyGame from './Game.vue';
import {randArray, shuffle} from '../game';
import anagramsData from '../anagrams.json' 

export default {
  name: 'MyMain',
  components: {
    SelectInput,
    PlayButton,
    MyScore,
    MyTimer,
    MyGame
  },
  data() {
    return {
      lengthOptions: [
        ['5', '5个字母'],
        ['6', '6个字母'],
        ['7', '7个字母'],
        ['8', '8个字母']
      ],
      wordLength: '5',
      screen: 'config',
      userInput: '',
      answered: false,
      score: 0,
      gameLength: 60,
      timeLeft: 0,
      timer: null,
      wordLib: anagramsData.anagrams,
      currentAnagramGroup: [], // 当前题目对应的所有正确变位词
      currentScrambledWord: '', // 当前打乱后的题干
    }
  },
  computed: {
    question() {
      return this.currentScrambledWord
    }
  },
  methods: {
    backToConfig() {
      this.screen = "config";
      clearInterval(this.timer);
    },
    play() {
      this.screen = "play";
      this.score = 0;
      this.userInput = '';
      clearInterval(this.timer); // 开启新局前先清旧计时器，避免叠加
      this.startTimer();
      this.newQuestion();
    },
    handleInput(value) {
      this.userInput += String(value);
      this.answered = this.checkAnswer(this.userInput);
      if (this.answered) {
        setTimeout(() => {
          this.newQuestion();
        }, 300);
        this.score++;
      }
    },
    clearInput() {
      this.userInput = '';
    },
    // 根据选定长度从词库随机取一组变位词
    getAnagramGroup(length) {
      const targetGroups = this.wordLib[length];
      return randArray(targetGroups);
    },
    // 变位词答案校验：长度匹配+存在于当前正确词组就算答对
    checkAnswer(userAnswer) {
      if (userAnswer.length !== Number(this.wordLength)) return false;
      return this.currentAnagramGroup.includes(userAnswer.toLowerCase());
    },
    newQuestion() {
      this.userInput = '';
      this.answered = false;
      this.currentAnagramGroup = this.getAnagramGroup(this.wordLength);
      // 从词组随机选一个词打乱作为题干
      const targetWord = randArray(this.currentAnagramGroup);
      this.currentScrambledWord = shuffle(targetWord);
    },
    startTimer() {
      this.timeLeft = this.gameLength;
      this.timer = setInterval(() => {
        this.timeLeft--;
        if (this.timeLeft <= 0) {
          clearInterval(this.timer);
          this.screen = 'result'; // 时间到跳转结果页，可自行替换逻辑
        }
      }, 1000)
    },
    restart() {
      this.score = 0;
      this.userInput = '';
      clearInterval(this.timer);
      this.startTimer();
      this.newQuestion();
    },
  },
  beforeUnmount() {
    clearInterval(this.timer); // 组件销毁清计时器避免内存泄漏
  }
}
</script>

运行逻辑说明 #

• 选题：用户选定单词长度开始游戏后，自动从词库对应长度的词组中随机抽一组，再从组内随机选单词打乱字母作为题干
• 答题：用户输入内容长度匹配、且属于当前变位词组时判定答对，自动加积分，300ms后刷新下一题
• 异常处理：打乱字母时如果和原词完全一致会自动重洗，计时器每次启动前先清理旧实例，不会出现倒计时越走越快的问题

内容的提问来源于stack exchange，提问作者Susan Moore