ByteScope

Type Quest

打真實的程式碼 — 看著它在旁邊活起來,也量出你真正的打字速度。

全部在你的瀏覽器裡跑,什麼都不會上傳。

選擇一個專案 — 親手打出程式碼,見證它活過來。進度僅儲存於你的瀏覽器中。

程式語言

clock

JS

bounce

JS

counter

JS

loader

CSS

card

CSS

stopwatch

JS

breakout

JS

orbit

TS

python

Python· 僅限打字練習(無預覽)

c

C· 僅限打字練習(無預覽)

cpp

C++· 僅限打字練習(無預覽)

go

Go· 僅限打字練習(無預覽)

rust

Rust· 僅限打字練習(無預覽)

java

Java· 僅限打字練習(無預覽)

關於這個工具

Type Quest 是一個「有產出」的程式碼打字練習:每份教材都是一個小而完整的前端作品(會走的數位時鐘、彈跳球動畫、CSS 載入動畫……),而你打的程式碼就是實際執行的程式碼。簡單的關卡邊打邊長 — 預覽隨著你的進度逐行成形;困難的關卡則憋到最後一刻,打完最後一個字元的瞬間,完成的作品爆發式地渲染出來。你完成的不是一次打字測驗,而是一個真的能動的東西,還能把它下載成單一 HTML 檔帶走 — 一字一鍵親手打出來的作品。

打字引擎的數字誠實不灌水:不自動跳過難打的字元、退格鍵有真實代價、顯示的 WPM 是扣掉未修正錯誤的淨 WPM。行首縮排自動處理,讓你專注在有意義的字元上。連續打對會累積連擊倍率,每個正確字元會沿五聲音階往上彈一個音(連擊升高八度),通關時還有 8-bit 小號曲慶祝。

每次練習結束都有一份儀器風格的結算報告 — 全程 WPM 曲線、逐鍵延遲熱圖、最慢符號 Top 5、準確率、連擊峰值 — 而你的進度會在本機累積:每課最佳 WPM、跨場次的成長曲線、最拖累你的弱鍵統計。這一切只存在你瀏覽器的 localStorage:不上傳、不需帳號,一顆按鈕就能全部清除。

魔王戰是整條線的高潮。你打的不是片段,而是一整個能跑的專案,魔王還會全程反擊:施放「突進」攻擊要你限時衝刺到標記字元、施放「凝視」詛咒要你在時限內零失誤、螢幕震動、故意騙你的「typo 陷阱」(顯示的字元是假的),還可能有整場時限。你的打錯會替魔王的必殺技充能;持續高連擊則替你自己的必殺充能。預覽會鎖到最後一個字元才渲染 — 打完作品就是致命一擊,用你親手打出來的作品在畫面上擊倒魔王。連擊現在也直接驅動音樂:鼓點脈衝墊在你的打字底下,連擊層級越高疊上 bassline 與旋律伴奏(節奏跟著你的打字速度呼吸),斷連擊就剝回只剩鼓點。

所有教材程式碼都是為本站離線生成的原創程式碼,沒有抓取或重用任何第三方程式碼。每份教材都以一致的風格排版,並在上架前通過「能解析、真的能跑」的機器驗證。

Type Quest 現在不只涵蓋前端程式碼。TypeScript 教材完全可執行 —— 你打的是型別化的原始碼,即時預覽跑的是它離線轉譯後的 JavaScript。Python、C、C++、Go、Rust 與 Java 則是純打字教材:瀏覽器無法執行它們,因此沒有即時預覽,遊玩畫面也會如實說明 —— 回饋就是打字練習本身,內容是慣用且依難度分級的片段(用 channel 的 Go worker pool、帶生命週期與 match 的 Rust 泛型堆疊、Java 的 stream 處理、C++ 的樣板與 STL 等)。每種語言都以自己的慣例排版 —— 4 空格縮排,或 Go 的 gofmt tab;tab 和空格一樣會被引擎當作行首縮排自動跳過,所以你不必打它。由於瀏覽器內的解析器無法像檢查 Web 教材那樣驗證這些語言,每份純打字片段都在上架前經過人工審閱,教材清單上方也有語言篩選列可直接跳到你想練的語言。

教材庫同時也是一張地圖:每種專案類型是一個「區域」,各自有自己的難度階梯,打完一階就解鎖下一階 —— 不必先精通一個區域才能探索另一個。魔王關(The Chrono Keeper、The Brick Warden)是這張地圖上的主題關卡:每個魔王會在你至少碰過通往它的每個區域後解鎖;如果同一段路上不只一個魔王,還要先打倒前一個魔王。每打通一課(不論是不是魔王關),都會加進你的「作品收藏館」:一張附上你最佳成績與該作品縮圖的收藏卡,可以再次執行(同時只會有一個即時預覽在跑,頁面才不會卡)、開全螢幕、下載成 HTML,或重新挑戰整堂課。

診斷直接閉環成訓練。進度分頁畫出一張鍵盤形狀的熱圖,累積你所有場次的每一個鍵 — 橘色填色代表比你自己其他鍵慢、洋紅色邊框代表容易打錯(一個鍵要累積到最低嘗試次數才算數,開頭一次手滑不會被定罪)。根據這份側寫,「Train weak keys(弱鍵特訓)」會推薦程式碼最密集命中你弱點字元的課程,並明白告訴你為什麼:這堂課鎖定哪些字元、你目前在這些字元上的錯誤率。打完推薦課程後,會顯示這些鍵的訓練前後對照,接著看熱圖在往後的場次裡慢慢降溫。已經以目標 WPM 通關的課程會被排除 — 推薦永遠指向還有進步空間的地方。

長期回訪的機制補齊了整個循環。每日挑戰用當天日期的固定雜湊選出同一份教材 — 同一個 UTC 日曆日,每個造訪的人打到的都是同一課,完全不需要伺服器 — 通關一次就記錄當天成績,並顯示今天的 WPM 跟昨天比快了多少,以及目前連續完成的天數。通關教材、掃平一個專案類型的所有難度、打完每一堂 D5 課程、打倒魔王、達到某個 WPM 門檻、連續 7 天完成每日挑戰,或是把一個被標記的弱鍵訓練到錯誤率低於 5%,都會解鎖成就徽章 — 新解鎖時會立刻跳出提示,進度分頁的 Badges 區塊會永久列出每個已解鎖的徽章與解鎖日期。不論是一般練習、魔王戰還是每日挑戰的結算畫面,或是成就解鎖的提示,都能產生一張可分享的 PNG 結果卡 — 整個在你瀏覽器裡用 canvas 畫出來,不需要上傳任何東西 — 下載或直接交給裝置的分享選單。

常見問題

每日挑戰是什麼?

每個 UTC 日曆日,一個固定的日期雜湊會從教材庫選出一課 — 同一天造訪的每個人打到的都是同一課,完全不需要伺服器運算。通關一次就會記錄當天的成績;重打只會保留你最好的一次。Practice 分頁的每日卡片會顯示你今天的成績(如果打過)、跟昨天比快了多少,還有目前連續完成的天數。

成就/徽章是怎麼運作的?

一組規則 — 首次通關、掃平某個專案類型的所有難度、打完每一堂 D5 課程、打倒每個魔王、在符號密集課程拿下 99% 以上準確率、三個 WPM 速度里程碑、連續 7 天完成每日挑戰,以及把一個被標記的弱鍵訓練到錯誤率低於 5% — 每次通關後都會重新檢查一次。新解鎖的成就會立刻跳出提示,並永久列在進度分頁的「Badges」區塊(附上解鎖日期);已解鎖的成就不會被收回。

可以分享成績嗎?

可以 — 每個結算畫面與成就提示都有一個分享/下載按鈕,會用瀏覽器的 canvas API 在你的裝置上直接畫出一張 PNG 卡片(教材名稱、WPM/準確率/連擊、一小段 WPM 曲線),接著交給裝置的分享選單(主要是手機)或直接下載。產生過程完全不會上傳任何資料。

我的打字資料會被上傳嗎?

不會。打字引擎、統計、音效合成與即時預覽全部在你的瀏覽器裡執行。進度(最佳 WPM、歷史紀錄、弱鍵、音效偏好)只存在瀏覽器的 localStorage — 沒有帳號、沒有伺服器,清除按鈕一按就全部刪除。

WPM 是怎麼算的?

毛 WPM 是所有按鍵數 ÷ 5 換算成每分鐘;淨 WPM 再扣掉你留著沒修正的錯誤。報告兩者都顯示,但紀錄與成長曲線一律採用淨 WPM。退格不是免費的,難打的字元也不會被跳過,所以數字反映真實實力。

縮排也要自己打嗎?

不用 — 行首縮排會自動跳過,讓你專注在有意義的字元。無論教材用空格或 tab(Go 的 gofmt 風格)縮排都一樣:兩者的行首連續空白都會被同樣自動跳過。行中的空格、換行(按 Enter)和所有符號仍然要一字不差地打。空格顯示為 ·、換行顯示為 ↵、tab 顯示為 ⇥,你隨時看得到接下來要打什麼。

我可以練習哪些程式語言?

可執行的教材涵蓋前端 Web 程式碼 —— JavaScript、CSS 與 TypeScript —— 你打的內容會建構出一個即時執行的預覽(TypeScript 是你打型別化原始碼,沙箱執行它離線轉譯後的 JavaScript)。除此之外,Type Quest 還有 Python、C、C++、Go、Rust 與 Java 的純打字教材:瀏覽器無法執行這些語言,因此沒有即時預覽 —— 遊玩畫面會收合成專注的單欄打字介面,並如實說明。它們同樣是慣用且依難度分級的片段,以各語言的慣例排版(4 空格縮排,或 Go 的 gofmt tab;tab 和空格一樣會被當作縮排自動跳過)。由於瀏覽器內沒有解析器能驗證它們,每份純打字教材都在上架前經過人工審閱。用教材清單上方的語言篩選列即可直接跳到某個語言。

為什麼有些關卡的預覽要到最後才出現?

難度 1–2 的關卡邊打邊渲染,你可以看著作品逐步長出來。較難的關卡把渲染留到完成的那一刻,讓通關有一個爆發的高潮時刻。何況打到一半的程式碼常常是語法錯誤,較難的 JS 中途本來就跑不起來。

打完的作品可以留下來嗎?

可以 — 通關後可以把你打出來的作品下載成單一自足的 HTML 檔,任何瀏覽器離線都能開。

教材的程式碼是哪裡來的?

每份教材都是為本站離線生成的原創程式碼(license: generated),沒有從開源專案抓取任何程式碼,因此沒有第三方版權疑慮。每份教材上架前都經過「能解析、真的能跑」的機器驗證。

魔王戰是怎麼玩的?

魔王關是在攻擊火力下打完一整個能跑的專案。魔王會預告攻擊:「突進」要你在期限前衝刺到標記字元(拼速度)才能格擋;「凝視」要你在時窗內零失誤(拼準確)才能撐過。格擋失敗會扣你的 HP,你的打錯會替魔王的必殺充能(充滿就是無法迴避的一擊),高連擊則替你自己的必殺充能。獲勝的方式只有一個:把專案打完 — 渲染會鎖到最後一個字元,你剛打完的作品會親手給魔王致命一擊。輸了(HP 歸零或超時)結算會誠實告訴你敗因,然後讓你立刻重來。

畫面上顯示的字元打下去卻是錯的,是 bug 嗎?

那是「typo 陷阱」— 魔王的干擾招式之一:在後期階段,顯示會故意在某個即將打到的字元上說謊(例如程式碼其實是 ; 卻顯示成 :)。照程式碼「應該是什麼」打就能閃過;上當了就得退格修正。程式碼面板下方的提示會告訴你陷阱何時解除、謊言是什麼。陷阱只存在於魔王戰,自由練習的顯示永遠誠實。

地圖分頁是什麼?

它把整個教材庫畫成一趟旅程:每種專案類型是一個區域,有自己的 D1 → D3 → D5 階梯,打完一階就解鎖下一階 —— 不必先完成一個區域才能嘗試另一個。魔王關卡是地圖上的關口:魔王會在你至少通關過通往它的每個區域後解鎖;如果同一段路上有不只一個魔王,還需要先打倒前一個魔王。鎖住的節點一律會告訴你要怎麼解鎖。

收藏館/收藏是什麼?

每打通一課 —— 不管是一般課程還是魔王關 —— 都會加進你的收藏:一張卡片顯示你的最佳 WPM、準確率與連擊峰值,還有那個真的能跑的作品。點縮圖就能即時執行(同時只會有一個預覽在跑,頁面才夠快);也可以開全螢幕、下載成獨立的 HTML 檔,或重新挑戰整堂課。

弱鍵特訓(Train weak keys)是怎麼運作的?

你打的每一鍵都會記錄該字元的錯誤與延遲,跨場次累積在你的瀏覽器裡。進度分頁把它畫成鍵盤形狀的熱圖 — 橘色代表比你自己其他鍵慢、洋紅代表容易打錯 — 並依照每堂課的程式碼命中你弱點字元的密度為整個教材庫排名。排名最前的推薦會以「Train weak keys」卡片呈現,明確列出鎖定的字元與你在每個字元上的錯誤率;打完推薦課程後會顯示這些鍵的前後錯誤率對照。已用目標 WPM 通關的課程會被排除,所以特訓永遠瞄準真正的缺口。

為什麼某個我常打錯的鍵沒出現在熱圖或推薦裡?

一個字元要在你所有場次中累積到最低嘗試次數(5 次)才會列入 — 罕見符號上的一次手滑還算不上弱鍵,所以早期資料刻意不過度反應。慢也是相對你自己的中位數判定的,不是絕對速度,因此整體偏謹慎的節奏不會把每個鍵都標成弱點。持續練習,達標的鍵就會亮起來;只要有任何字元同時累積了足夠嘗試與真實的弱點訊號,推薦就會出現。