tools

Brainfuck 視覺化工具 (Brainfuck Visualizer)

這是一個基於 Web 的 Brainfuck 程式語言執行與視覺化工具。透過動態的記憶體帶（Memory Tape）動畫與程式碼高亮，幫助開發者與學習者更直觀地理解 Brainfuck 的運作原理。

---

🚀 功能特色

• 即時視覺化：動態展示記憶體帶的數值變化（十進位）與對應的 ASCII 字元。
• 指令追蹤：執行時自動高亮當前程式碼位置，並支援自動捲動。
• 多種執行模式：
  • Run：以設定的速度連續執行。
  • Step：單步偵錯，逐一觀察每個指令的影響。
  • Pause：隨時暫停執行以檢查狀態。
• 靈活控制：
  • 支援自定義執行速度（10ms - 1000ms）。
  • 提供輸入緩衝區（Input Buffer），支援需處理輸入的指令（,）。
• 響應式設計：採用 Tailwind CSS 構建，支援不同螢幕尺寸。

---

🛠 使用技術

• HTML5 / JavaScript (ES6+)：核心解釋器邏輯。
• Tailwind CSS：介面佈局與美化。
• Uint8Array：模擬標準的 8-bit 記憶體單元。

---

📖 使用說明

1. 輸入程式碼：在左側的「Brainfuck 程式碼」區域輸入您的代碼。
2. 設定輸入（選填）：如果程式中有 , 指令，請先在「程式輸入」框中輸入字元。
3. 開始執行：
   • 點擊 執行 (Run) 觀察自動運行。
   • 使用 單步執行 (Step) 手動控制節奏。
4. 調整速度：在執行過程中拖動滑桿，可即時改變執行頻率。
5. 重置：點擊 重置 (Reset) 可將記憶體歸零並將指標回到起點。

---

🧩 指令參考表

指令	說明
>	將指標向右移動一格。
<	將指標向左移動一格。
+	將指標指向的記憶體數值加 1。
-	將指標指向的記憶體數值減 1。
.	輸出當前指標指向的字元（ASCII）。
,	從輸入流中讀取一個字元到當前記憶體單元。
[	如果當前數值為 0，跳轉到匹配的 ] 之後。
]	如果當前數值不為 0，跳回到匹配的 [。

---

📝 範例程式碼

您可以嘗試將以下「Hello World」代碼貼入工具中執行：

++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.