brainfuck-IDE - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #go #android #machine-learning #macos #nodejs #awesome #cli #awesome-list #ios #open-source

brainfuck-IDE

(★ 14)

一个功能完整、现代化的 Brainfuck 语言集成开发环境，使用 Vue 3 + Vite 构建。

brainfuck-IDE 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🧠 Brainfuck IDE

![Vue.js](https://img.shields.io/badge/Vue.js-4FC08D?style=flat-square&logo=vue.js&logoColor=white)
![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)
![License](https://img.shields.io/badge/License-MIT-blue?style=flat-square)
![Version](https://img.shields.io/badge/Version-1.0.0-green?style=flat-square)
![Maintained](https://img.shields.io/badge/Maintained-Yes-brightgreen?style=flat-square)
![Brainfuck](https://img.shields.io/badge/Language-Brainfuck-red?style=flat-square)
![IDE](https://img.shields.io/badge/Type-IDE-orange?style=flat-square)

一个功能完整、现代化的 Brainfuck 语言集成开发环境，使用 Vue 3 + Vite 构建。

## 🎯 项目亮点

- 🚀 **高性能执行** - 批量执行模式达到 10M+ IPS
- 🐛 **专业调试** - 指令级断点 + 单步执行 + 括号匹配
- 🎨 **现代化UI** - VS Code 风格深色主题 + 响应式设计
- ⚙️ **高度可定制** - 快捷键、速度档位完全可配置
- 🔍 **智能检查** - 静态分析（括号、字符、越界）
- 📦 **开箱即用** - 无需配置，内置示例和完整文档

## ✨ 功能特性

### 核心功能
- ✅ **代码编辑器** - 语法高亮、行号显示、注释支持（# 符号）、智能输入
- ✅ **解释器引擎** - 完整实现8个Brainfuck指令，30000字节内存
- ✅ **断点调试** - 基于指令位置的断点，点击代码设置，自动暂停执行
- ✅ **执行控制** - 运行/继续/单步/停止/重置，支持四档速度（最快/快/中/慢）
- ✅ **性能优化** - 最快模式批量执行（1000指令/更新），达到100K+ IPS
- ✅ **内存可视化** - 翻页浏览30000个内存单元（每页30个），自动跟随指针
- ✅ **输入输出** - 支持字符/ASCII两种模式，控制字符可视化显示
- ✅ **状态监控** - 实时显示执行状态、指令计数、IPS、内存指针
- ✅ **性能分析器** - 点击执行次数查看指令统计，支持颜色编码和数据持久化
- ✅ **指令按钮** - 8个快捷按钮，可自定义键盘快捷键
- ✅ **静态检查** - 括号匹配、无效字符、指针越界检测
- ✅ **括号匹配** - 光标旁括号自动高亮配对，支持嵌套
- ✅ **完成状态** - 程序执行完成后显示"完成"状态，区分就绪状态

### 辅助功能
- 📚 内置6个示例程序（Hello World、输出A、加法等）
- ❓ 完整的指令帮助文档和使用说明  
- 📁 代码文件导入导出（支持 .bf/.b/.brainfuck/.txt 格式）
- ⚙️ 完整设置系统 - 自定义快捷键（预设：数字/Home Row）、速度档位（支持0.01ms精度）
- 🔒 运行时保护 - 程序运行时自动禁用速度设置修改，防止意外操作
- ✅ 智能验证 - 速度档位关系验证（快速<中速<慢速），确保配置合理性  
- 🎨 现代化深色主题界面（VS Code 风格）
- 📱 响应式设计，适配各种屏幕尺寸
- ⌨️ 智能键盘处理 - 支持注释模式，焦点隔离，防止冲突
- 📄 GitHub集成 - 内置GitHub链接按钮，方便查看源码和参与贡献

## 🚀 快速开始

### 安装依赖
```bash
npm install
```

### 运行开发服务器
```bash
npm run dev
```

浏览器会自动打开 `http://localhost:3001`

### 构建生产版本
```bash
npm run build
```

### 预览生产构建
```bash
npm run preview
```

### 通过域名访问（HTTPS）
- 本项目已经部署到公网服务器并配置了 SSL 证书，用户可以安全访问：
- 打开 https://www.brainfk-ide.cn
- 注：HTTP 访问会自动重定向到 HTTPS

## 📖 Brainfuck 指令说明

| 指令 | 说明 |
|------|------|
| `>` | 指针右移一位 |
| `<` | 指针左移一位 |
| `+` | 当前单元值加1 |
| `-` | 当前单元值减1 |
| `.` | 输出当前单元的字符 |
| `,` | 读取一个字符到当前单元 |
| `[` | 如果当前单元为0,跳转到匹配的] |
| `]` | 如果当前单元不为0,跳回到匹配的[ |

## 🎯 使用指南

### 基本操作
1. **编写代码** - 在代码编辑器中输入 Brainfuck 代码，支持 # 注释（整行或行内）
2. **快捷输入** - 使用底部8个指令按钮或配置的快捷键（默认1-8）快速插入指令
3. **静态检查** - 点击"🔍 检查"按钮验证代码：括号匹配、字符有效性、指针越界
4. **设置断点** - 点击要设置断点的指令，确认后设置/取消断点（红色高亮标记）
5. **运行程序** - 点击"▶️ 运行"按钮开始执行，可选择四档速度（最快/快/中/慢）
6. **断点调试** - 程序遇到断点会自动暂停，点击"⏭️ 继续"恢复执行
7. **单步执行** - 点击"⏯️ 单步"逐条执行指令，观察内存和输出变化
8. **查看内存** - 自动跟随指针位置，或手动翻页浏览30000个内存单元
9. **调整速度** - 使用四个速度按钮控制执行快慢：
   - 最快：0ms延迟，批量执行，10M+ IPS（时间分片优化技术）
   - 快：可自定义延迟（默认50ms）
   - 中：可自定义延迟（默认100ms）  
   - 慢：可自定义延迟（默认200ms）
   - 🔒 运行时速度锁定：程序执行期间自动禁用速度调整
10. **输入输出** - 输入区支持字符/ASCII模式，输出区支持字符/ASCII显示（控制字符可视化）
11. **性能分析** - 点击状态栏"执行次数"查看详细指令统计，支持颜色编码和保持统计功能
12. **括号匹配** - 将光标放在 `[` 或 `]` 右侧，自动高亮显示配对括号
13. **自定义设置** - 点击"⚙️ 设置"自定义快捷键（预设：数字/Home Row）和速度档位（0.01ms精度）

### 快捷键（可自定义）
默认配置：
- `1` - 插入 `>` （指针右移）
- `2` - 插入 `<` （指针左移）
- `3` - 插入 `+` （值加1）
- `4` - 插入 `-` （值减1）
- `5` - 插入 `.` （输出）
- `6` - 插入 `,` （输入）
- `7` - 插入 `[` （循环开始）
- `8` - 插入 `]` （循环结束）

可在设置中切换到 Home Row 预设（a/s/d/f/j/k/l/;）或自定义任意键。

### 代码示例

#### Hello World
```brainfuck
# 经典的 Hello World 程序
++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.
```

#### 输出字母A（ASCII 65）
```brainfuck
# 将内存单元设置为65并输出
+++++[>+++++++++++++<-]>.
```

#### 简单加法（输入两个数字，输出和）
```brainfuck
# 读取两个数字相加
,>,<[>+<-]>.
```
## 🌟 特色功能

### 性能优化
- **时间分片执行** - 最快模式采用16ms时间分片技术，防止UI阻塞的同时达到10M+ IPS
- **批量执行优化** - 智能批次大小调整，最快模式执行10,000条指令/帧，普通模式动态批处理
- **IPS监控** - 实时显示指令执行速度（支持K/M单位格式化）
- **性能分析器** - 可视化指令执行统计，支持颜色编码和数据持久化
- **高性能渲染** - 优化的语法高亮和内存显示

### 智能编辑
- **注释支持** - 使用 # 符号添加整行或行内注释
- **智能输入** - 注释区域自由输入，代码区域受快捷键控制
- **焦点隔离** - 输入框和设置界面不受编辑器快捷键影响
- **括号高亮** - 光标旁的括号自动显示配对位置（金色高亮 + 脉冲动画）

### 静态分析
- **括号匹配** - 检测未闭合或多余的方括号
- **字符验证** - 识别无效字符，提示正确的指令集
- **指针越界** - 模拟执行检测指针是否超出内存范围（0-29999）
- **错误定位** - 精确显示错误所在行号和位置

### 调试增强
- **指令级断点** - 基于指令位置而非行号，精确控制
- **选择设置** - 点击指令即可切换断点（带确认对话框）
- **状态追踪** - 区分就绪/运行中/暂停/完成四种状态
- **视觉反馈** - 当前指令金色高亮，断点红色背景

### 用户体验
- **自动跟随** - 内存显示自动跳转到指针所在页
- **设置持久化** - 快捷键和速度配置自动保存到localStorage  
- **运行时保护** - 程序执行期间禁用速度设置修改，防止意外操作
- **智能验证** - 速度档位关系自动验证（快<中<慢），确保配置合理性
- **错误提示** - 静态检查和运行时错误都有详细提示
- **控制字符** - 输出中的控制字符显示为可读标记（如 ⟨LF⟩、⟨NUL⟩）

## 📁 项目结构

```
brainfuck-ide/
├── src/
│   ├── components/          # Vue组件
│   │   ├── Header.vue      # 顶部导航栏（示例、帮助、设置）
│   │   ├── CodeEditor.vue  # 代码编辑器（语法高亮、断点、检查）
│   │   ├── ControlPanel.vue # 控制面板（运行控制、速度选择）
│   │   ├── MemoryVisualizer.vue # 内存可视化（翻页、自动跟随）
│   │   ├── IOPanel.vue     # 输入输出面板（双模式）
│   │   └── StatusBar.vue   # 状态栏（状态、IPS、指针位置）
│   ├── utils/
│   │   ├── interpreter.js  # Brainfuck解释器（断点支持）
│   │   └── settings.js     # 设置管理（持久化、验证）
│   ├── App.vue             # 主应用组件
│   ├── main.js             # 应用入口
│   └── style.css           # 全局样式
├── index.html              # HTML模板
├── vite.config.js          # Vite配置
├── package.json            # 项目配置
└── README.md               # 项目文档
```

## 🛠️ 技术栈

- **Vue 3** - 采用 Composition API 和 `<script setup>` 语法
- **Vite 5** - 极速的开发服务器和构建工具
- **JavaScript ES6+** - 现代JavaScript特性
- **CSS Variables** - 可维护的主题系统
- **LocalStorage API** - 设置持久化存储

## � 浏览器兼容性

推荐使用现代浏览器以获得最佳体验：

- ✅ Chrome / Edge 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Opera 76+

## �🎨 界面预览

- 🌙 深色主题设计，VS Code 风格，护眼舒适
- 📐 响应式布局，支持各种屏幕尺寸
- 🎮 直观的控制面板和状态栏
- 📊 实时的内存状态可视化
- 💛 金色当前指令高亮
- 🔴 红色断点标记
- 🟡 金色括号匹配高亮
- 🎨 语法高亮（8种指令 + 注释）

## 📋 开发路线

### 已完成 ✅
- [x] 基础解释器实现（8个指令 + 30000字节内存）
- [x] 代码编辑器（语法高亮、行号、注释支持）
- [x] 指令级断点系统（选择切换、自动暂停）
- [x] 内存可视化（翻页 + 自动跟随指针）
- [x] 输入输出面板（字符/ASCII双模式）
- [x] 控制面板（运行/继续/单步/停止/重置）
- [x] 四档速度控制（最快/快/中/慢）
- [x] 性能优化（批量执行，100K+ IPS）
- [x] IPS实时监控（K/M格式化显示）
- [x] 性能分析器（交互式指令统计、颜色编码、数据持久化）
- [x] 指令快捷按钮（8个按钮 + 可自定义键盘快捷键）
- [x] 完整设置系统（快捷键预设、速度档位配置、持久化）
- [x] 代码导入导出（多格式支持）
- [x] 示例程序（5个内置示例）
- [x] 静态代码检查（括号、字符、指针越界）
- [x] 括号匹配高亮（自动配对显示）
- [x] 智能输入处理（注释模式、焦点隔离）
- [x] 完成状态追踪（区分就绪/完成）
- [x] 当前指令高亮（金色显示）
- [x] 控制字符可视化（输出面板）
- [x] 滚动条优化（行号与代码同步滚动）

### 计划中 🚧
- [ ] 多主题支持（亮色主题、自定义配色）
- [ ] 执行历史记录（时间旅行调试）
- [ ] 代码优化建议（冗余指令检测）
- [ ] 更多示例程序（斐波那契、曼德博集等）
- [ ] 代码分享功能（URL编码）
- [ ] 多语言支持（国际化）
- [ ] 内存监视器（特定单元追踪）
- [ ] 断点条件（条件断点）
- [ ] 宏系统（自定义指令组合）
- [ ] 执行热力图（可视化代码执行路径）
- [ ] 性能对比分析（多次运行对比）

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

### 贡献指南
1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 提交 Pull Request

## 📮 联系方式

- GitHub: [@yuese12333](https://github.com/yuese12333)
- Email: yuese12333@qq.com
- 项目地址: [brainfuck-IDE](https://github.com/yuese12333/brainfuck-IDE)

---

## 部署状态

本项目已成功部署到公网服务器，配置了 SSL 证书，并已通过 HTTPS 域名对外提供安全服务，用户可以直接在浏览器中访问在线页面。HTTP 访问会自动重定向到 HTTPS。若需获取完整的部署细节或运维记录，请联系项目维护者以获得私有文档访问权限。

⭐ 如果这个项目对你有帮助，请给个 Star！

享受 Brainfuck 编程! 🎉