鐵人檔案
本系列文章將帶領讀者從零開始，使用純前端技術（HTML5、CSS3、Vanilla JavaScript）打造一個名為「賽博紓壓診所」的互動心理測驗網頁。
內容涵蓋：結合 Web Audio API 的動態互動音效、Rage Click 壓力消滅小遊戲、廟宇抽籤盲選、即時心電圖暴走特效、Canvas 六角形能力雷達圖，以及惡搞病歷戳章動畫與匿名發洩牆。
除了技術實作，也融入了多國語系與日夜模式切換，希望透過這 30 天的實作分享，帶大家用程式碼創造一個兼具娛樂性與療癒感的網頁作品！
前言 昨天解決完呼吸過場的語言同步問題之後，我盯著那個圓圈動畫看了很久。 單純地縮放、變色，一縮一放，看久了其實有點像……呼吸球。嗯，它確實就是設計來模擬呼吸的...
前言 昨天把心電圖的線畫出來之後，我把瀏覽器開著晾在旁邊，自己去倒了杯水。 回來的時候畫面還亮著，那條綠線還在螢幕上滴滴答答地跑。我盯著它看了幾秒，突然有點恍神...
前言 上一篇總結寫到一半，我手癢把語言切換器拿出來重新戳了幾輪，想說順便檢查一下有沒有漏網之魚。 結果抓到兩個問題，但仔細一查才發現事情比我想的嚴重。 第一個，...
前言 昨天把多語系的破洞補完之後，我把結果頁翻來覆去檢查了好幾次，確定每個角落都能正常切換語言，心裡踏實不少。 然後我盯著那張乾乾淨淨的診斷結果看了很久，總覺得...
前言 昨天把戳章落地的動畫調完之後，整個結果頁看起來已經相當完整。雷達圖、處方籤、電池耗損率、戳章，一路排下來，像一份真的有在運作的診斷報告。 我自己反覆測試了...
前言 昨天讓大家可以把怨言丟上牆之後，我回頭去看了一圈市面上其他的心理測驗網站，想參考一下別人怎麼做「分享」這個功能。 結果看到的大部分都是同一套：一排社群圖示...
前言 診所開到現在，替別人量過電池、畫過雷達圖、蓋過章，卻從來沒有人替診所自己做過健檢。 昨天拿手機測完分享功能，我看著那支沒反應的舊手機，突然有種「醫者不能自...
前言 昨天診所做完健檢，報告上列得清清楚楚。不過健檢查的是程式碼的體質，使用者實際走過一遍會遇到什麼，單子上看不出來。所以做完三張檢驗單之後，我換成使用者的身分...
