今天筆者將與各位一起練習Vue.js的語法與功能，並利用前幾日所學得來製作一個簡易的小遊戲。遊戲內容是這樣的，畫面上會出現一個簡單的加減乘除算式，以及一個輸入框，如果答案正確，玩家將會獲得10分，一共有10題。並會於遊戲最後顯示玩家的總得分。好了，那就讓我們開始實作吧！

事前準備

首先，我們先用 npm create vue@latest 來建立好環境：

接著執行 npm install 與 npm run dev 來讓網頁開始運作，以便我們可以在編輯檔案時隨時看到結果：

現在便能夠正式開使製作我們的網頁遊戲了！

製作框架

在讓遊戲變得有趣之前，要先讓它存在，所以在給它更多功能與設計前，先來做出一個最簡單的模型框架吧！
就讓筆者將各個部份一一做說明！先來說一下 <template>的部份，網頁的最上方顯示著遊戲名字，接著便是題目的元件(component)，這個元件將會隨機生成一個簡單的算式，並將結果以 emit （教學說明）的方式發送給父元件。

<!-- 檔案：App.vue -->
<template>
  <h1>Calculator Game</h1>
  <Question @answer="(ans) => correct_ans = ans"/>

<!-- 檔案：Question.vue -->
<script setup>
import { ref } from 'vue'

const num1 = ref(Math.floor(Math.random() * 100))
const num2 = ref(Math.floor(Math.random() * 100))
const op = ['+', '-', '*', '/']
var op_id = Math.floor(Math.random() * 10 % 4)

function calculate() {
  switch (op_id) {
    case 0:
      return num1.value + num2.value
    case 1:
      return num1.value - num2.value
    case 2:
      return num1.value * num2.value
    default:
      return Math.floor(num1.value / num2.value)
  }
}

const emit = defineEmits(['answer']);
emit('answer', calculate());
</script>

<template>
  <p>{{ num1 }} {{ op[op_id] }} {{ num2 }}</p>
</template>

再來便是玩家的輸入區塊，在此筆者使用了v-model的方式來儲存玩家所輸入的答案，而輸入框後面的內容則是用於提交答案，並呼叫判斷答案正確與否的函式：

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

const player_ans = ref(Number);
const correct_ans = ref(Number);

const isCorrect = ref(Boolean);
const showResult = ref(false);

function onInput(e) { player_ans.value = e.target.value }
function getResult() {
  isCorrect.value = (player_ans.value == correct_ans.value);
  player_ans.value = null;
  showResult.value = true
}
</script>

<template>
  <div id="answer">
    <input type="number" id="player_ans" v-model="player_ans" placeholder="answer">
    <button @click="getResult">OK</button>
  </div>

最後是一個簡單的結果顯示，利用了Vue.js所提供的條件判斷語法所撰寫的：

  <div id="result" v-if="showResult">
    <p v-if="isCorrect">Your answer is correct!</p>
    <p v-else>You've answered wrong, the correct result is {{ correct_ans }}</p>
  </div>
  <p v-else>Click on the button to check your answer</p>

下面是目前所作的整個程式：

<script setup>
import { ref } from 'vue';
import Question from './components/Question.vue'

const player_ans = ref(Number);
const correct_ans = ref(Number);

const isCorrect = ref(Boolean);

function onInput(e) { player_ans.value = e.target.value }
function getResult() {
  isCorrect.value = (player_ans.value == correct_ans.value);
  player_ans.value = null;
  showResult.value = true
}
</script>

<template>
  <h1>Calculator Game</h1>
  <Question @answer="(ans) => correct_ans = ans"/>

  <div id="answer">
    <input type="number" id="player_ans" v-model="player_ans" placeholder="answer">
    <button @click="getResult">OK</button>
    <p>{{ isCorrect }}</p>
  </div>
</template>

<style scoped></style>