我第一次接觸《腦鍛鍊》系列大約是七、八年前，雖然更早之前就已經聽聞過 NDS 上的系列作，但這種益智遊戲實在無法讓年幼的我提起興致，於是直到 3DS 上的《腦科學專家川島隆太博士監修 突破極限 腦的五分鐘魔鬼鍛鍊》（全名超級長，以下以《魔鬼鍛鍊》簡稱之）有了官方中文，才在好奇心驅使下開始遊戲。

此前 NDS 上的《腦鍛鍊》系列作多是圍繞「防止大腦老化」作為核心進行設計，比起遊戲更像是應用程式。相較之下，3DS 上的《魔鬼鍛鍊》則更好的將訓練過程遊戲化，設計方向側重於加強工作記憶，鼓勵玩家每天進行五分鐘的高強度鍛鍊。

五分鐘，聽起來很容易對吧？

當然不對啊！魔鬼鍛鍊就像健身中的平板支撐（Plank），只有親身體驗過才會知道看似輕鬆過程中的苦澀，為了給予這個世界痛楚，我決定對其中最具有代表性的單元《魔鬼計算》進行 Web 版復刻。

在查資料的過程中，意外發現這篇文章（简单的魔鬼计算），真是沒想到會發現有人跟我一樣在這款遊戲發售（2012 年）的十年後以復刻的方式致敬，有興趣的朋友可以參考看看。

目錄

  1. 什麼是魔鬼計算？
  2. 出題規則
  3. 程式實作筆記
    1. 出題邏輯設計
    2. 遊戲體驗很重要
    3. 文字寬度不均
    4. 空間規劃大師
    5. 為手機用戶最佳化——虛擬鍵盤
  4. 最終成品
  5. 小結
  6. 結尾再聊回《腦鍛鍊》

什麼是魔鬼計算？

魔鬼計算是一連串的計算問題（二十多題，依照玩家個人進度有所不同），問題本身相當簡單，都是個位數的加減，其中的難點在於「回溯」。

原版《魔鬼鍛鍊》的解說原版《魔鬼鍛鍊》的解說

在「一次只顯示一題」的前提下，「N 回溯」代表玩家需要看著當前的問題做計算，記下答案的同時回答 N 題前的答案，遊戲會從「1 回溯」開始，當正確率高於 85% 以上就會以「N 回溯 → 快速 N 回溯 → N + 1 回溯」的順序逐漸提高難度，正確率 65% 以下則會降低難度。

原版《魔鬼鍛鍊》的示範說明原版《魔鬼鍛鍊》的示範說明

經過上面說明，如果還是看不懂、不覺得難，歡迎直接移步至最終成品。

出題規則

開始寫程式之前，需要先釐清原版魔鬼計算的出題規則，經過觀察以後，可以得出以下幾點：

  • 題目需要 A、B 兩個數字
  • A、B 皆為個位正整數或 0
  • 可能是 A + B 或 A - B
  • 計算後的答案也會是個位正整數或 0

程式實作筆記

這次我打算使用 CDN 引入 Vue 3，因為規模不大，所以不需拆分元件，也適合用我較熟悉的 Options API 編寫；CSS 部分則是使用 Pico.css 以保持輕便與 HTML 的簡潔（雖然我也愛用 Bootstrap，但是那成堆的 Class 真的看了很心煩），其餘不足的樣式、特效、元件再自己手刻補上。

出題邏輯設計

來說說我對於出題的邏輯設計。

參照出題規則，我認為從答案開始生成後回推題目會是較好的選擇，先隨機生成一個整數 ans（0 ≤ ans ≤ 9）作為答案，接著生成另一個整數 num1（0 ≤ num1 ≤ 9）。如果 ans > num1，代表 ans 是由 num1 加上另一數（num2）組成，以 ans - num1 即可得到 num2；若 ans <= num1 則表示 ans 為另一數減去 num1 的結果，改以 num1 - ans 取得 num2。

附上程式碼片段供各位參考：

1
2
3
4
5
6
7
8
9
10
11
12
let ans = this.randInt(0, 10);
let num1 = this.randInt(0, 10);
let num2;
let oprator;
if (ans > num1) {
  oprator = '＋';
  num2 = ans - num1;
} else {
  oprator = '－';
  num2 = num1 - ans;
}
// 最終輸出為 `${num1}${oprator}${num2}＝${ans}`

遊戲體驗很重要

出完題目後，將題目顯示於畫面上，透過 Vue 提供的模板語法可以很輕易的做到這件事，但在這之上，別忘了這是款遊戲，身為一個（業餘級）遊戲設計師，我在乎每個玩家的遊戲體驗，所以接下來要做的會比「單純把一串算式丟到畫面上」來得多一些。

接下來的內容單看文字可能不太容易理解，建議與最終成品對照著看。

文字寬度不均

我首先注意到的是文字大小的問題。在大部分字型裡，每個文字的寬度和間距並不是相等的，例如數字「1」通常會比其他數字細，這就會造成每次題目的內容更動時因為寬度不等而造成的版面抖動問題。如果希望每個題目中的數字和運算子的位置都能保持不變，最簡單直覺的方法就是換用等寬字型，但是大多等寬字型都是為了顯示程式碼而設計，在網頁中作為顯示字型時會讓畫面在美感和視覺風格上明顯不統一，因此取而代之的方案是使用全形文字來保持等寬。在 Pico.css 的預設字型之下，全形數字和運算子的顯示效果相當不錯。

使用半形文字時會發生的排版悲劇使用半形文字時會發生的排版悲劇

空間規劃大師

解決文字寬度不均的問題後，不論算式如何變換，題目都不會再左右抖動了，乾淨又漂亮。不過這僅限於一行算式的情況。

在《魔鬼計算》裡，畫面同時會有上、下兩行算式，我希望這兩行算式（包括算式前的題號區塊）都能完全對齊，在這個情況下比較難處理的部分是題號長度，題號的長度相當不固定，可能會隨著玩家的遊戲進度到達二位數甚至三位數，在這樣的情況下，即便上下兩行都完全置中，彼此之間依然不能垂直對齊。

對此，我的解決方案是……（此處應有小鼓滾奏聲）<table>！

說到上下兩行必須相互垂直對齊，我（在經歷 Grid 和 Flex 的失敗後）首先想到的就是表格，表格這個東西啊，不說你不知道，一用了它真奇妙，只要適當加入空白欄位、隱藏格線，並且巧妙使用 padding 做細節調整，在很多場合能夠勝任你意想不到的排版工作（當然能用 Flex 的情況下我還是會優先考慮 Flex 啦，嘿嘿）。

在「全形文字」和「表格排版」的雙重攻勢之下，就算是這般難搞的 UI 也只得敗下陣來。

顯示格線後，為 5 * 2 的表格顯示格線後，為 5 * 2 的表格

為手機用戶最佳化——虛擬鍵盤

打從一開始，我就希望這個遊戲能夠做成 RWD 的規格，原因很簡單：現在是 2023 年，所有想要得到曝光的東西都該有手機版。

包含上一小節提到的 <table> 排版術也是為了能在各種裝置上漂亮呈現而選用，不過，除了畫面呈現之外，電腦和手機在操作方式上也有著莫大的差別，好在這次的遊戲只需要輸入數字鍵，那麼就來做個虛擬數字鍵盤吧！

主要透過 Flex 來簡單排版，再用 position: fixed、bottom: 0 把數字鍵盤固定於畫面下方，最後加上 @media 規則，讓虛擬鍵盤僅於手機畫面上出現。

想參考完整 CSS 的朋友請移步至 GitHub。

將樣式完善後，該來為虛擬鍵盤加上功能了。

由於此時我已經寫好電腦版的按鍵輸入函式（偵測 keydown event 並根據輸入按鍵處理），如果為了相容虛擬鍵盤而共用同一個函式，會需要經過大規模修改，程式碼也會變得很不漂亮。因此我在第一時間的打算是寫一個新函式專供虛擬鍵盤使用，但是這麼一來新、舊函式又會有大量相似或重複的程式碼片段，後續維護時也必須分別更動，顯然不是太聰明的寫法。

幾經琢磨後，霎時間，我靈光一閃：「虛擬鍵盤……鍵盤……啊！關鍵（key）就是按鍵（key）！」。

如果直接把虛擬按鍵映射到實體鍵盤上的按鍵輸入，那不就解決了嗎：

1
2
3
4
5
6
// 寫在 methods 裡面
simulateKeydown (keydown = '') {
  // 建立一個新的 keydown event 並立即觸發
  window.dispatchEvent(new KeyboardEvent('keydown', { key: keydown }));
}
// 在按鍵「1」加上 ＠click="simulateKeydown('1')"，以此類推

最終成品

最終成品（手機版）最終成品（手機版）

小結

這次的小遊戲規模不大，但前前後後也花了我幾天才順利完成。

這個 Web 版復刻相較原版少了幾樣功能：

  • 計時器
  • 題目變動時的捲軸動畫
  • 每題的時間限制
  • 根據正確率調整回溯數

這些功能其實不是做不到，而是涉及太多遊戲設計層面的問題（除了捲軸動畫），尤其是數值，例如要幫每題加上時間限制，就必須先知道原作裡對於時間限制的計算規則，如果不知道，就只能自己照著實機畫面算幀數；或者要根據正確率調整回溯數，但是卻無從得知原作關於題目數量的計算公式（原作根據玩家進度會有不同數量的題目）。基於種種因素，無法達到百分之百還原，不過我仍然在能力可及的範圍內十分逼近原作了。總體而言，我對於這次的復刻還是相當滿意，也許之後有空會考慮復刻《魔鬼鍛鍊》的其他項目。

結尾再聊回《腦鍛鍊》

3DS 上的《魔鬼鍛鍊》真的是一款蠻不錯的遊戲，我自己斷斷續續玩了一段時間（累積登入五十多天），對於工作記憶的提升還蠻有感的（當然也不排除是我原本程度太差才這麼有感啦）。裡面除了本篇實作的《魔鬼計算》外，還有許多諸如《魔鬼翻牌》、《魔鬼朗讀》等不同鍛鍊項目，雖然痛苦，但也相當有趣。如果現在手邊還有 3DS 且喜歡自我折磨的朋友不妨入手一片來玩玩看。

至於《腦鍛鍊》系列的最新作——《腦科學專家 川島隆太博士監修 大人的Nintendo Switch腦部鍛鍊》，我個人還沒有入手。

原因如下：

  • 比起《魔鬼鍛鍊》，這作看起來又走回「預防老人癡呆」的路線了，對於我這樣（還算）年輕的人來說，起不了什麼訓練效果
  • 雖然附了一支專用觸控筆，但是觸控筆在電容式觸控面板上的糟糕體驗可想而知
  • 全版本無配音，但是在《魔鬼鍛鍊》裡明明能夠做到簡、繁兩版都擁有各自的翻譯、配音，太偷懶
  • 其中一個類似《魔鬼朗讀》的單元在中文版直接被閹割了，差別待遇讓人很不舒服

但即使如此，如果哪天特惠售價低到某個程度，我大概還是會買一份來玩吧，畢竟「嫌貨才是買貨人」啊！