掌握Vue 3.0：通过反应计时器游戏踏上初学者旅程

2023-09-25 03:52:29

Vue 3.0 教程：建立一个反应计时器游戏，踏上编码之旅

让你的反应力接受挑战！

准备好在 Vue 3.0 的带领下，踏上激动人心的编码之旅了吗？让我们共同打造一个反应计时器游戏，在这款游戏中，你的敏捷性将接受终极考验。在这个逐步教程中，我们将深入了解 Vue 3.0 的核心概念，并掌握 JavaScript 的一些关键技巧。准备好迎接挑战，让你的编码之旅闪耀吧！

创建你的 Vue 3.0 游乐场

为了开启我们的旅程，我们将使用 Vue CLI 脚手架创建一个崭新的 Vue 3.0 应用程序。只需在你的终端中输入以下命令：

npx vue create my-reaction-timer-game

按照提示完成应用程序创建过程，然后让我们潜入幕后，了解应用程序的结构。

认识应用程序的主入口

在 main.js 文件中，我们将创建 Vue 实例并将其挂载到 DOM 元素上：

import App from './App.vue';

const app = Vue.createApp(App);

app.mount('#app');

在这里，我们导入了我们的根组件 App.vue，创建了一个 Vue 实例，并将其挂载到了 #app 元素上。

打造根组件：游戏的大脑

在 App.vue 中，我们将定义游戏的逻辑和用户界面：

<template>
  <div id="app">
    <h1>反应计时器游戏</h1>
    <p>点击按钮开始游戏。</p>
    <button @click="startGame">开始游戏</button>

    <div v-if="isGameStarted">
      <p>游戏正在进行中...</p>
      <p>你的反应时间：{{ reactionTime }}毫秒</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isGameStarted: false,
      reactionTime: 0
    };
  },
  methods: {
    startGame() {
      this.isGameStarted = true;

      // 随机生成一个等待时间（1-5秒）
      const waitTime = Math.random() * 4000 + 1000;

      // 创建一个计时器，在等待时间后触发
      setTimeout(() => {
        // 游戏开始，记录当前时间
        const startTime = Date.now();

        // 等待用户点击按钮
        window.addEventListener('click', this.stopGame);
      }, waitTime);
    },
    stopGame() {
      // 游戏结束，记录当前时间
      const endTime = Date.now();

      // 计算反应时间
      this.reactionTime = endTime - startTime;

      // 移除事件监听器
      window.removeEventListener('click', this.stopGame);

      // 游戏结束，重置状态
      this.isGameStarted = false;
    }
  }
};
</script>