★ FEATURED ARTICLE 【免费下载链接】x86CSSx86CSS is a working CSS-only x86 CPU/emulator/computer. No JavaScript required.项目地址https://gitcode.com/gh_mirrors/x8/x86CSS点击查看免费下载x86CSS是一个纯 CSS 实现的 16 位 x86 CPU 模拟器完全不需要 JavaScript你可以用C 语言写程序通过gcc-ia16 交叉编译成 8086 机器码让浏览器里的这台CSS 计算机直接执行它。本文是 x86CSS构建管线的完全指南安装 gcc-ia16 交叉编译器、运行 build_c.py 生成机器码、再用 build_css.py 一键产出最终页面x86css.htmlx86CSS 是什么一台跑在 CSS 里的真·CPU先说结论x86CSS 里执行的就是你电脑 CPU 运行的那种机器码原版 16 位 8086 指令集只是处理器由 CSS 变量、property和calc()运算拼成。整个流程是你用 C 写程序入口函数是_start不是maingcc-ia16交叉编译器把它编译成 8086 机器码program.bin构建脚本把这段机器码逐字节烧进CSS 变量里浏览器逐拍取指、译码、执行。下面是官方演示程序CSS-OS的运行效果——它就是用 C 写的包含斐波那契数列、帕斯卡三角和一个猜词小游戏 Horsle项目核心文件一览构建管线围绕它们展开文件作用c/main.c默认编译的 C 源码CSS-OS 演示程序build_c.pygcc-ia16 交叉编译脚本产出program.bin和program.startbuild_css.py把机器码注入 CSS 模板生成最终页面x86css.htmlbase_template.html手写的 CSS CPU 模板含取指、译码、执行逻辑program.bin / program.start编译产物机器码 _start入口地址x86-instructions-rebane.json8086 指令表由 extra/gen_inst.py 从 extra/8086_table.txt 生成构建管线总览.c 到 HTML 三步走整个构建管线非常干净只有三步c/main.c ──python3 build_c.py──▶ program.bin program.start │ python3 build_css.py ▼ x86css.html浏览器直接打开即可运行开始前先克隆仓库git clone https://gitcode.com/gh_mirrors/x8/x86CSS cd x86CSS⚠️ 构建管线支持Linux 和 WSL1/2脚本会自动检测 Windows 环境并加wsl前缀macOS 未经验证。第一步安装 gcc-ia16 交叉编译器一键安装步骤gcc-ia16 是专为 8086/16 位 x86 打造的 GCC 交叉工具链提供ia16-elf-gcc、ia16-elf-objdump、ia16-elf-nm三个关键工具。获取方式有两种方式 A从 PPA 软件源直接安装Ubuntu 用户最省事方式 B自行编译 build-ia16 项目适合想要最新版本的玩家。装好后验证一下ia16-elf-gcc --version能看到版本号就说明 gcc-ia16 交叉编译器就绪 ✅第二步build_c.py 交叉编译 C 代码为 8086 机器码python3 build_c.py一条命令完成四件事这也是 gcc-ia16 交叉编译的关键步骤编译ia16-elf-gcc c/main.c -o tmp/main.a -nostdlib -Os反汇编用ia16-elf-objdump -Mi8086 -Mintel --adjust-vma256输出可读的汇编--adjust-vma256正好对应程序加载地址 0x100方便你对着浏览器里的执行效果调试找入口用ia16-elf-nm提取_start函数的地址落盘把机器码拷贝为 program.bin把入口地址当前值为599写入 program.start。两个可自定义的点见 build_c.pyBASE_NAME main # 编译 c/[BASE_NAME].c换文件名改这里 FLAGS -nostdlib -Os # 优化级别也可以换 -O2编译目标是裸机程序所以用-nostdlib不链接标准库I/O 全靠 x86CSS 提供的自定义函数指针见下文想换成更简单的示例把BASE_NAME改成example即可编译 c/example.c改完 C 代码记得重跑build_c.py再跑第三步。第三步build_css.py 把机器码注入 CSS最快配置方法python3 build_css.pyPython3 直接运行零依赖读取 program.bin、program.start 和 base_template.html做占位符替换后输出最终页面x86css.html。控制整台计算机的常量都在 build_css.py 开头常量默认值含义CPU_CYCLE_MS1024每个 CPU 周期的毫秒数调小跑得更快PROG_OFFSET0x100程序加载的内存地址MEM_SIZE0x600内存总量 1.5KB程序不够大就调这里IP 寄存器的初始值 PROG_OFFSETprogram.start中的数字599即0x100 599 0x357CPU 从这开始取指。x86CSS 还预留了一段自定义 I/O 内存映射见 build_css.py地址区间用途0x100 起你的程序机器码逐字节写入 CSS 变量0x2000–0x2010外部函数写屏、读键盘0x2100–0x2110外部 I/O如SHOW_KEYBOARD键盘显隐开关自定义 I/O 速查表写屏幕与读键盘在 C 里把这几个地址绑定到函数指针就能操作系统了参考 c/main.c符号地址功能writeChar10x2000写 1 个字节到屏幕writeChar40x2002写 4 字节串writeChar80x2004写 8 字节串输出字符串时按 8 字节分块调用它效率最高readInput0x2006读一个键盘按键SHOW_KEYBOARD0x2100写 1数字键盘、2字母键盘、0隐藏典型初始化只需这么一小段其余照普通 C 写writeChar1 (void*)(0x2000); writeChar8 (void*)(0x2004); readInput (void*)(0x2006);彩蛋字符集里0x80是 0x83是 ——写writeChar1(0x80)就能在屏幕上打印小马演示程序 Horsle 的马味就这么来的 运行成果浏览器里打开你的 CSS 计算机用Chromium 系浏览器Chrome、Edge 等直接打开x86css.html即可运行零交互CPU 时钟由 CSS 动画 容器查询驱动鼠标不用动它就在跑可选的脚本时钟只是锦上添花禁用 JS 依然能执行屏幕下方还能实时看到 AX、CX、IP 等寄存器数值和屏幕内存相当于自带调试面板。常见问题清单程序放不下默认内存只有 1.5KBMEM_SIZE 0x600去 build_css.py 调大后再重新构建。入口函数写错裸机程序入口必须是_startmain不会被找到。跑得慢调小CPU_CYCLE_MS或确认用了-O2优化。某条指令行为不对项目实现了大部分8086 指令集个别标志位如 CF/OF行为不完美属于已知取舍详见 README.md 的 Compatibility 章节。想深入 CPU 原理指令表由 extra/8086_table.txt8086 操作码表 extra/gen_inst.py 生成模板中的译码逻辑都在 base_template.html 里。照着这条 gcc-ia16 交叉编译 双脚本的构建管线走一遍你的 C 程序就真正跑在 CSS 上了——去把 c/main.c 里的三个 demo 换成你自己的代码吧赞分享【免费下载链接】x86CSSx86CSS is a working CSS-only x86 CPU/emulator/computer. No JavaScript required.项目地址https://gitcode.com/gh_mirrors/x8/x86CSS点击查看免费下载相关推荐在 FreeBSD 上构建 .NET CoreCLRDocker 交叉编译、Linux 交叉编译与直接构建全指南在 FreeBSD 上构建 .NET CoreCLRDocker 交叉编译、Linux 交叉编译与直接构建全指南 本文基于 dotnet/runtime 仓库语言运行时标准库编译器JIT编译内存管理并发编程在树莓派上构建 Apache MXNet原生编译与交叉编译全流程指南在树莓派上构建 Apache MXNet原生编译与交叉编译全流程指南 MXNet 官方支持在 ARM 设备如树莓派上运行本文基于仓库中的 树莓派构建指南深度学习人工智能机器学习分布式训练上交 SJTU 编译原理课程指南从零用 C 构建 Tiger 语言编译器上交 SJTU 编译原理课程指南从零用 C 构建 Tiger 语言编译器 本篇指南围绕本仓库《计算机自学指南》收录的上海交通大学编译原理课程展开详细介绍文档教程知识库创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
