bfbf 0.1.0 → 0.1.1

package/AGENTS.md

@@ -0,0 +1,113 @@
+# Agent Guidelines for bfbf Project
+
+## Project Overview
+bfbf is a Brainfuck interpreter implemented in pure JavaScript. The project demonstrates Turing completeness through a Towers of Hanoi implementation in Brainfuck code.
+
+- **Language**: JavaScript (Node.js)
+- **Type System**: Plain JavaScript (no TypeScript)
+- **Test Framework**: Mocha
+- **Package Manager**: npm (pnpm lock file present)
+- **Module System**: CommonJS
+- **Commit Convention**: Commitizen with cz-jt adapter
+
+## Build, Lint, and Test Commands
+
+### Core Commands
+```bash
+npm start          # Start development server with nodemon (auto-restarts on changes)
+npm test           # Run all tests with mocha
+npm run cz         # Run commitizen for interactive conventional commits
+```
+
+### Running Specific Tests
+```bash
+# Run a single test file
+npx mocha tests/filename.js
+
+# Run all test files matching a pattern
+npx mocha --grep "pattern" ./tests/*.js
+
+# Run a specific test within a file
+npx mocha tests/filename.js --grep "test name"
+
+# Run tests with reporter options
+npx mocha tests/*.js --reporter spec
+```
+
+## Code Style Guidelines
+
+### Formatting
+- Use **tabs** for indentation (2 spaces per tab) - not spaces
+- **No semicolons** at statement ends
+- Maximum line length: 100 characters
+- Use template literals for string interpolation (backticks)
+- Use consistent spacing around operators and after commas
+- Break long lines at logical points with proper indentation
+
+### Naming Conventions
+- **Functions**: camelCase with descriptive names (e.g., `js2BF`, `parseInput`, `executeBF`)
+- **Variables**: camelCase with descriptive names (e.g., `memoryPtr`, `inputPtr`, `outputBuffer`)
+- **Constants**: UPPER_SNAKE_CASE for true constants (e.g., `MEMORY_SIZE`, `MAX_INPUT_LENGTH`)
+- **Files**: kebab-case for JavaScript files (e.g., `brainfuck-interpreter.js`, `hanoi-solver.js`)
+- **Classes**: PascalCase if used (e.g., `BFInterpreter`, `MemoryManager`)
+
+### Type Handling
+- Use `Uint8Array` for memory buffers (fixed-size, typed arrays)
+- Use `String.fromCharCode()` for character conversions
+- Use `charCodeAt()` for string to character code conversion
+- Avoid implicit type coercion; use explicit comparisons (`===` not `==`)
+- Validate input types at function boundaries with early returns
+- Use `typeof` and `instanceof` for type checking
+
+### Import Patterns
+- Use CommonJS `require()` for module imports (not ES6 imports)
+- Use `module.exports` or `exports` for module exports
+- Import modules at the top of files (no inline requires)
+- Group related imports together
+- Avoid circular dependencies
+
+### Error Handling
+- Use `try/catch` for synchronous operations that may throw
+- Return error objects with descriptive messages instead of throwing when appropriate
+- Handle edge cases explicitly (empty input, null values, undefined values)
+- Validate array bounds before access operations to prevent errors
+- Use defensive programming techniques for external inputs
+- Log errors with sufficient context for debugging
+
+### Code Structure
+- Keep functions focused and small (target under 50 lines when possible)
+- Use early returns to reduce nesting and improve readability
+- Group related logic together in the same function
+- Extract complex logic into separate, well-named helper functions
+- Add Chinese comments for complex algorithms (per project convention)
+- Document public APIs with JSDoc-style comments
+
+### BF Interpreter Specific Guidelines
+- Memory size: 10,000 bytes (fixed, `Uint8Array(10000)`)
+- Input handling: character-by-character with fallback to null/0
+- Loop matching: Use stack-based approach for bracket pairs (`[` and `]`)
+- Pointer movement: Validate pointer bounds (0 to 9999)
+- Output: Support both array collection and stream output modes
+- Command filtering: Skip non-BF commands silently (optimization)
+
+### Git Workflow
+- Use `npm run cz` for commits to follow conventional changelog
+- Write meaningful commit messages describing the "why" not just the "what"
+- Keep commits atomic and focused on a single change
+- Review changes before committing
+- Push changes regularly to avoid data loss
+
+## Testing Guidelines
+- Write tests for new functionality in the `tests/` directory
+- Use descriptive test names that explain the behavior being tested
+- Test edge cases: empty input, maximum input, invalid characters
+- Test both success and error paths
+- Mock external dependencies when necessary
+
+## Development Workflow
+1. Create a feature branch for changes
+2. Write code following the style guidelines
+3. Add or update tests for the functionality
+4. Run `npm test` to verify all tests pass
+5. Use `npm run cz` to create a proper commit message
+6. Push changes and create a pull request when ready

package/README.md

@@ -3,7 +3,21 @@
 Turing Complete Towers of Hanoi
 
 ```javascript
+npm i bfbf
+```
+
+```javascript
+visualize.html 可视化html
+```
+
+```javascript
+const bf = require('bfbf)
 const input = ''
-// console.log(js2BF(hanoiCode, input, 1)) // 第三个参数是是否使用流模式输出
-console.log(js2BF(helloCode, input).output) // 输出hello world
+console.log(bf(hanoiCode, input, 1)) // 第三个参数是是否使用流模式输出
+// console.log(bf(helloCode, input).output) // 输出hello world
 ```
+
+<video width="640" height="480" controls>
+  <source src="https://github.com/kongnet/bf/raw/main/hanoi.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>

package/index.js

@@ -0,0 +1,74 @@
+// 实现图灵完备语言BF
+// 浏览器兼容版本
+(function(root, factory) {
+  if (typeof module === 'object' && module.exports) {
+    module.exports = factory()
+  } else {
+    root.js2BF = factory()
+  }
+}(typeof self !== 'undefined' ? self : this, function() {
+  function js2BF (code, input, stream = false) {
+    const memory = new Uint8Array(10000)
+    let ptr = 0
+    let inputPtr = 0
+    let output = []
+
+    const stack = []
+
+    for (let i = 0; i < code.length; i++) {
+      const char = code[i]
+      switch (char) {
+        case '>':
+          ptr++
+          break
+        case '<':
+          ptr--
+          break
+        case '+':
+          memory[ptr]++
+          break
+        case '-':
+          memory[ptr]--
+          break
+        case '.':
+          output.push(String.fromCharCode(memory[ptr]))
+          stream && process.stdout.write(String.fromCharCode(memory[ptr]))
+          break
+        case ',':
+          if (inputPtr < input.length) {
+            memory[ptr] = input.charCodeAt(inputPtr)
+            inputPtr++
+          } else {
+            memory[ptr] = 0
+          }
+          break
+        case '[':
+          if (memory[ptr] === 0) {
+            let count = 1
+            while (count > 0) {
+              i++
+              if (code[i] === '[') count++
+              else if (code[i] === ']') count--
+            }
+          } else {
+            stack.push(i)
+          }
+          break
+        case ']':
+          if (memory[ptr] !== 0) {
+            i = stack[stack.length - 1]
+          } else {
+            stack.pop()
+          }
+          break
+      }
+    }
+
+    return {
+      output: output.map(x => String.fromCharCode(x)).join(''),
+      ptr,
+      memory
+    }
+  }
+  return js2BF
+}))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bfbf",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "bfbf",
   "main": "index.js",
   "scripts": {

package/{turing.js → sample.js}

@@ -1,70 +1,4 @@
-//实现图灵完备语言BF
-function js2BF (code, input, stream = false) {
-  const memory = new Uint8Array(10000) // bf使用的内存空间大小
-  let ptr = 0 // 内存指针
-  let inputPtr = 0 // 输入指针
-  let output = [] // 输出
-
-  const stack = [] // 栈，'[' , ']' 匹配
-
-  for (let i = 0; i < code.length; i++) {
-    const char = code[i]
-    switch (char) {
-      case '>':
-        ptr++
-        break
-      case '<':
-        ptr--
-        break
-      case '+':
-        memory[ptr]++
-        break
-      case '-':
-        memory[ptr]--
-        break
-      case '.':
-        output.push(memory[ptr]) // += String.fromCharCode(memory[ptr]) 压入数组为了可以输出观察内存模式
-        stream && process.stdout.write(String.fromCharCode(memory[ptr])) // 要兼容网页输出,改这里
-        break
-      case ',':
-        if (inputPtr < input.length) {
-          memory[ptr] = input.charCodeAt(inputPtr)
-          inputPtr++
-        } else {
-          memory[ptr] = 0
-        }
-        break
-      case '[':
-        if (memory[ptr] === 0) {
-          let count = 1
-          while (count > 0) {
-            i++
-            if (code[i] === '[') count++
-            else if (code[i] === ']') count--
-          }
-        } else {
-          stack.push(i)
-        }
-        break
-      case ']':
-        if (memory[ptr] !== 0) {
-          i = stack[stack.length - 1]
-        } else {
-          stack.pop()
-        }
-        break
-      default:
-        break
-    }
-  }
-
-  return {
-    output: output.map(x => String.fromCharCode(x)).join(''),
-    ptr,
-    memory
-  }
-}
-
+const bf = require('./index.js')
 // 以下是例子
 let iloveyou = `
      +++++       +++++
@@ -767,6 +701,6 @@ let helloCode = `>+++++++++[<++++++++>-]<.>+++++++[<++++>-]<+.
 
 // 3个例子
 const input = ''
-// console.log(js2BF(hanoiCode, input, 1)) // 汉诺塔 命令行动态演示 第三个参数是是否使用流模式输出
-console.log(js2BF(helloCode, input).output) // 输出Hello World!\n 返回{ output, ptr, memory} 3个对象
+console.log(bf(hanoiCode, input, 1)) // 汉诺塔 命令行动态演示 第三个参数是是否使用流模式输出
+// console.log(js2BF(helloCode, input).output) // 输出Hello World!\n 返回{ output, ptr, memory} 3个对象
 // console.log(js2BF(iloveyou, input).output)

package/visualize.html

@@ -0,0 +1,632 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Brainfuck 可视化解释器</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: #1a1a2e;
+        color: #eee;
+        min-height: 100vh;
+        padding: 20px;
+      }
+
+      h1 {
+        text-align: center;
+        margin-bottom: 20px;
+        color: #00d4ff;
+      }
+
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+      }
+
+      .panel {
+        background: #16213e;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+      }
+
+      .panel h2 {
+        color: #00d4ff;
+        margin-bottom: 15px;
+        font-size: 1.2rem;
+        border-bottom: 2px solid #0f3460;
+        padding-bottom: 10px;
+      }
+
+      .code-display {
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        line-height: 1.8;
+        background: #0f3460;
+        padding: 15px;
+        border-radius: 8px;
+        white-space: pre-wrap;
+        word-break: break-all;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      #codeInput {
+        width: 100%;
+        height: 120px;
+        background: #0f3460;
+        border: 1px solid #00d4ff;
+        border-radius: 8px;
+        color: #eee;
+        padding: 15px;
+        font-family: 'Courier New', monospace;
+        font-size: 14px;
+        resize: vertical;
+      }
+
+      .code-display .char {
+        display: inline-block;
+        padding: 2px 4px;
+        margin: 1px;
+        border-radius: 3px;
+        transition: all 0.1s ease;
+      }
+
+      .code-display .current {
+        background: #ffd700;
+        color: #000;
+        font-weight: bold;
+        box-shadow: 0 0 10px #ffd700;
+      }
+
+      .memory-grid {
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        gap: 5px;
+      }
+
+      .cell {
+        background: #0f3460;
+        padding: 10px 5px;
+        text-align: center;
+        border-radius: 5px;
+        font-family: 'Courier New', monospace;
+        font-size: 12px;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+      }
+
+      .cell .addr {
+        font-size: 10px;
+        color: #666;
+        margin-bottom: 3px;
+      }
+
+      .cell .value {
+        font-size: 16px;
+        font-weight: bold;
+        color: #00d4ff;
+      }
+
+      .cell.active {
+        background: #ffd700;
+        border-color: #ff9500;
+        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
+      }
+
+      .cell.active .addr,
+      .cell.active .value {
+        color: #000;
+      }
+
+      .cell.changed {
+        animation: pulse 0.3s ease;
+      }
+
+      @keyframes pulse {
+        0% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+          background: #4ade80;
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+
+      .io-section {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+      }
+
+      .input-area,
+      .output-area {
+        background: #0f3460;
+        padding: 15px;
+        border-radius: 8px;
+      }
+
+      .input-area textarea {
+        width: 100%;
+        height: 80px;
+        background: #16213e;
+        border: 1px solid #00d4ff;
+        border-radius: 5px;
+        color: #eee;
+        padding: 10px;
+        font-family: 'Courier New', monospace;
+        resize: none;
+      }
+
+      .output-area pre {
+        background: #16213e;
+        padding: 10px;
+        border-radius: 5px;
+        min-height: 60px;
+        font-family: 'Courier New', monospace;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .controls {
+        grid-column: 1 / -1;
+        display: flex;
+        gap: 15px;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+
+      button {
+        padding: 12px 30px;
+        font-size: 16px;
+        border: none;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-weight: bold;
+      }
+
+      .btn-start {
+        background: #4ade80;
+        color: #000;
+      }
+
+      .btn-start:hover {
+        background: #22c55e;
+        transform: translateY(-2px);
+      }
+
+      .btn-step {
+        background: #00d4ff;
+        color: #000;
+      }
+
+      .btn-step:hover {
+        background: #0ea5e9;
+        transform: translateY(-2px);
+      }
+
+      .btn-reset {
+        background: #ef4444;
+        color: #fff;
+      }
+
+      .btn-reset:hover {
+        background: #dc2626;
+        transform: translateY(-2px);
+      }
+
+      .speed-control {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .speed-control input {
+        width: 150px;
+      }
+
+      .status {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: 15px;
+        background: #0f3460;
+        border-radius: 8px;
+        font-family: 'Courier New', monospace;
+      }
+
+      .status .highlight {
+        color: #ffd700;
+        font-weight: bold;
+      }
+
+      .legend {
+        grid-column: 1 / -1;
+        display: flex;
+        gap: 20px;
+        justify-content: center;
+        flex-wrap: wrap;
+        font-size: 14px;
+      }
+
+      .legend span {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .legend .dot {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+      }
+
+      .legend .dot.code {
+        background: #ffd700;
+      }
+
+      .legend .dot.cell {
+        background: #ffd700;
+        border: 2px solid #ff9500;
+      }
+
+      .legend .dot.changed {
+        background: #4ade80;
+      }
+
+      .presets {
+        margin-bottom: 10px;
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+
+      .presets button {
+        padding: 6px 12px;
+        font-size: 12px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>🧠 Brainfuck 可视化解释器</h1>
+
+    <div class="container">
+      <div class="panel">
+        <h2>📝 代码</h2>
+        <div class="presets">
+          <button onclick="loadPreset('hello')">Hello World</button>
+          <button onclick="loadPreset('love')">I love your</button>
+        </div>
+        <textarea id="codeInput" placeholder="输入 Brainfuck 代码..."></textarea>
+        <div class="code-display" id="codeDisplay" style="margin-top: 10px"></div>
+      </div>
+
+      <div class="panel">
+        <h2>💾 内存 (0-99)</h2>
+        <div class="memory-grid" id="memoryGrid"></div>
+      </div>
+
+      <div class="panel io-section">
+        <div class="input-area">
+          <h2>📥 输入</h2>
+          <textarea id="inputArea" placeholder="在此输入字符..."></textarea>
+        </div>
+        <div class="output-area">
+          <h2>📤 输出</h2>
+          <pre id="outputArea"></pre>
+        </div>
+      </div>
+
+      <div class="controls">
+        <button class="btn-start" onclick="run()">▶️ 运行</button>
+        <button class="btn-step" onclick="step()">👆 单步</button>
+        <button class="btn-reset" onclick="reset()">🔄 重置</button>
+        <div class="speed-control">
+          <label>速度:</label>
+          <input type="range" id="speedSlider" min="10" max="500" value="50" />
+          <span id="speedValue">50ms</span>
+        </div>
+      </div>
+
+      <div class="status" id="status">
+        准备就绪 - 输入 Brainfuck 代码并点击运行
+      </div>
+
+      <div class="legend">
+        <span
+          ><div class="dot code"></div>
+          当前代码</span
+        >
+        <span
+          ><div class="dot cell"></div>
+          当前内存</span
+        >
+        <span
+          ><div class="dot changed"></div>
+          值已更改</span
+        >
+      </div>
+    </div>
+
+    <script src="index.js"></script>
+    <script>
+      const presets = {
+        hello: `>+++++++++[<++++++++>-]<.>+++++++[<++++>-]<+.
+  +++++++..+++.>>>++++++++[<++++>-]<.>>>++++++++++[<+++++++++>-]<---.
+  <<<<.+++.------.--------.>>+.>++++++++++.`,
+        love: `
+     +++++       +++++
+[->+++++++>+++>++++++++++<<<]
+  >+++.>++.>++++++++.+++.++
+    +++++.---------------
+      --.<.>+++++++++++
+        +++++++++.---
+          -------.+
+            +++++
+              .`
+      }
+
+      let code = presets.hello
+      let input = ''
+      let memory = new Uint8Array(100)
+      let ptr = 0
+      let codePtr = 0
+      let output = []
+      let inputPtr = 0
+      let stack = []
+      let isRunning = false
+      let timer = null
+      let stepCount = 0
+
+      const codeInput = document.getElementById('codeInput')
+      const codeDisplay = document.getElementById('codeDisplay')
+      const memoryGrid = document.getElementById('memoryGrid')
+      const inputArea = document.getElementById('inputArea')
+      const outputArea = document.getElementById('outputArea')
+      const status = document.getElementById('status')
+      const speedSlider = document.getElementById('speedSlider')
+      const speedValue = document.getElementById('speedValue')
+
+      // 获取解释器函数 (index.js 暴露的全局变量)
+      const bf = window.js2BF
+
+      function init() {
+        codeInput.value = code
+        renderCode()
+        renderMemory()
+        inputArea.value = ''
+        outputArea.textContent = ''
+        status.innerHTML =
+          '准备就绪 - <span class="highlight">输入 Brainfuck 代码并点击运行</span>'
+      }
+
+      function loadPreset(name) {
+        code = presets[name]
+        codeInput.value = code
+        reset()
+      }
+
+      function renderCode() {
+        let html = ''
+        for (let i = 0; i < code.length; i++) {
+          const char = code[i]
+          const classes = ['char']
+          if (i === codePtr) classes.push('current')
+          const displayChar =
+            char === '>' ? '&gt;' : char === '<' ? '&lt;' : char
+          html += `<span class="${classes.join(' ')}">${displayChar}</span>`
+        }
+        codeDisplay.innerHTML = html
+
+        if (codePtr < code.length) {
+          codeDisplay.children[codePtr]?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'center'
+          })
+        }
+      }
+
+      function renderMemory() {
+        let html = ''
+        for (let i = 0; i < 100; i++) {
+          const isActive = i === ptr
+          html += `
+          <div class="cell ${isActive ? 'active' : ''}" id="cell-${i}">
+            <div class="addr">${i.toString().padStart(3, '0')}</div>
+            <div class="value">${memory[i]}</div>
+          </div>
+        `
+        }
+        memoryGrid.innerHTML = html
+      }
+
+      function updateCell(index) {
+        const cell = document.getElementById(`cell-${index}`)
+        if (cell) {
+          cell.classList.add('changed')
+          cell.querySelector('.value').textContent = memory[index]
+          setTimeout(() => cell.classList.remove('changed'), 300)
+        }
+      }
+
+      function getMatchingBracket(code, pos) {
+        const char = code[pos]
+        const isForward = char === '['
+        const target = isForward ? ']' : '['
+        const direction = isForward ? 1 : -1
+        let count = 0
+
+        for (
+          let i = pos + direction;
+          i >= 0 && i < code.length;
+          i += direction
+        ) {
+          if (code[i] === char) count++
+          else if (code[i] === target) {
+            count--
+            if (count === 0) return i
+          }
+        }
+        return -1
+      }
+
+      function executeCommand() {
+        if (codePtr >= code.length) {
+          stopExecution()
+          status.innerHTML = `执行完成! 共 <span class="highlight">${stepCount}</span> 步`
+          return false
+        }
+
+        const char = code[codePtr]
+        let nextPtr = codePtr
+
+        switch (char) {
+          case '>':
+            ptr = Math.min(99, ptr + 1)
+            break
+          case '<':
+            ptr = Math.max(0, ptr - 1)
+            break
+          case '+':
+            memory[ptr] = (memory[ptr] + 1) % 256
+            updateCell(ptr)
+            break
+          case '-':
+            memory[ptr] = (memory[ptr] + 255) % 256
+            updateCell(ptr)
+            break
+          case '.':
+            output.push(String.fromCharCode(memory[ptr]))
+            outputArea.textContent = output.join('')
+            break
+          case ',':
+            if (inputPtr < input.length) {
+              memory[ptr] = input.charCodeAt(inputPtr)
+              inputPtr++
+              updateCell(ptr)
+            } else {
+              memory[ptr] = 0
+              updateCell(ptr)
+            }
+            break
+          case '[':
+            if (memory[ptr] === 0) {
+              nextPtr = getMatchingBracket(code, codePtr)
+            } else {
+              stack.push(codePtr)
+            }
+            break
+          case ']':
+            if (memory[ptr] !== 0) {
+              nextPtr = stack[stack.length - 1] || codePtr
+            } else {
+              stack.pop()
+            }
+            break
+        }
+
+        codePtr = nextPtr + 1
+        stepCount++
+        return true
+      }
+
+      function updateStatus() {
+        const cmds = {
+          '>': '向右移动指针',
+          '<': '向左移动指针',
+          '+': '增加当前单元格值',
+          '-': '减少当前单元格值',
+          '.': '输出字符',
+          ',': '输入字符',
+          '[': '循环开始 (值为0时跳过)',
+          ']': '循环结束 (值不为0时回跳)'
+        }
+        const currentCmd = code[codePtr]
+        const desc = cmds[currentCmd] || '未知命令'
+        status.innerHTML = `步骤 <span class="highlight">${stepCount}</span> | 当前命令: <span class="highlight">${currentCmd}</span> - ${desc} | 指针: <span class="highlight">${ptr}</span> | 值: <span class="highlight">${memory[ptr]}</span>`
+      }
+
+      function run() {
+        if (isRunning) return
+        code = codeInput.value
+        input = inputArea.value
+        reset()
+        isRunning = true
+        executeStep()
+      }
+
+      function executeStep() {
+        if (!isRunning) return
+        if (!executeCommand()) return
+        renderCode()
+        renderMemory()
+        updateStatus()
+
+        const speed = parseInt(speedSlider.value)
+        timer = setTimeout(executeStep, speed)
+      }
+
+      function step() {
+        if (isRunning) {
+          clearTimeout(timer)
+          isRunning = false
+        }
+        code = codeInput.value
+        input = inputArea.value
+        if (executeCommand()) {
+          renderCode()
+          renderMemory()
+          updateStatus()
+        }
+      }
+
+      function stopExecution() {
+        isRunning = false
+        if (timer) {
+          clearTimeout(timer)
+          timer = null
+        }
+      }
+
+      function reset() {
+        stopExecution()
+        memory = new Uint8Array(100)
+        ptr = 0
+        codePtr = 0
+        inputPtr = 0
+        output = []
+        stack = []
+        stepCount = 0
+        code = codeInput.value
+        input = inputArea.value
+        renderCode()
+        renderMemory()
+        outputArea.textContent = ''
+        status.innerHTML =
+          '已重置 - <span class="highlight">点击运行开始执行</span>'
+      }
+
+      speedSlider.addEventListener('input', e => {
+        speedValue.textContent = `${e.target.value}ms`
+      })
+
+      init()
+    </script>
+  </body>
+</html>