PC-98店头演示

随着最新生成式AI的发展,制作怀旧应用变得轻松许多。受最近发布并引发关注的日本QuuBee启发,笔者尝试用Claude Code开发了一个PC-98应用,模拟童年时常见的电脑店铺演示效果,展示了本网站“AI Watch”的内容。能在现代重温那种感觉,令人非常开心。

制作成果展示

先来看看最终效果。

演示截图

想要体验,可以从以下GitHub仓库的“Releases”下载已编译的ZIP文件,然后拖入QuuBee执行网站,点击“RUN”即可运行。

虽然个人希望做得更复杂,但受限于技术和审美,这已是极限。不过整体氛围还算贴近当年店铺演示。虽然用了生成式AI,实际开发中也经历了不少反复调试,程序能运行的那一刻感动很大。

关于QuuBee的详细信息,可参考:

开发过程详解

开发并非一蹴而就,而是分阶段进行:环境搭建、文本显示、音源测试、滚动效果、图像显示等。下面逐步说明。

第1步:环境准备

本次开发使用Windows桌面版Claude Code。该版本支持多种工作环境:本地、默认云端、远程控制、SSH。这里选择SSH,连接局域网内搭建的Linux虚拟机。

虽然默认云端环境使用方便,但需要支持PC-98的交叉编译器“Open Watcom V2”,因此自行搭建可控的Linux环境更合适。服务器、NAS虚拟机或闲置PC均可,Windows用户也可用WSL2。开发前安装了Git。

创建新文件夹并用Git管理,准备工作完成。

环境准备

第2步:开发指令输入

输入详细开发指令(完整内容见GitHub仓库),包括:

  • 在浏览器上运行的PC-98免费软件播放器QuuBee中制作店铺演示风格的FM音源演示
  • 使用Open Watcom编译
  • 演示内容包括:
    1. 开场显示Logo(图片或文字艺术)
    2. 背景音乐:FM音源原创轻快曲风
    3. 屏幕底部横向滚动显示“AI Watch”等宣传语
    4. 依次显示生成AI、开发基础设施、AI应用等主要栏目
    5. 结尾显示网址(ai.watch.impress.co.jp)

优先保证能在QuuBee上稳定运行,复杂效果后续调整。初始指令也是由Claude生成,基于预先提供的资料和需求。

开发指令

第3步:环境搭建与初始应用生成

Claude Code自动安装Open Watcom,完成自检并生成测试EXE。随后自动生成了只用文本的简易初始应用,先实现最小可运行版本,再逐步添加音频和图像,验证了分阶段开发的合理性。

初始应用

第4步:修复缺陷

初版程序未完全测试,出现乱码、屏幕尺寸识别错误、标题显示异常等问题。通过提供屏幕截图,逐一定位并修正。

调试时发现,向AI反馈时需具体描述“视觉异常”,如“乱码已修正,但标题看起来不像‘AI Watch’”、“滚动时屏幕整体向上移动”等,便于快速定位问题。

缺陷修复

第5步:FM音源测试与实现

先简单测试音效播放,经过风格询问后自动生成旋律。Claude Code无法直接听QuuBee上的播放效果,需人工试听反馈节奏快慢,反复调整。

音乐节奏等主观感受无法单靠代码判断,需人类决定想要的氛围,体现了AI辅助开发中人机协作的重要性。

音源测试

第6步:整体构建与测试

确认基本功能后,生成包含“AI Watch”介绍的完整应用。但屏幕底部滚动信息导致整屏逐行上移,需再次修正。

问题源于滚动时光标位置异常改变,后续文本显示从错误位置继续。PC-98风格屏幕中文本显示、光标管理和滚动处理相互影响,需反复测试修正。

整体测试

第7步:初步完成并添加图像

修复缺陷后,应用基本完成。因仅文本演示较单调,追加了“AI Watch”风格Logo图像,增强店铺演示感。

最初图像显示不理想,Logo与文本重叠。通过调整QuuBee的屏幕模式和图形VRAM管理,逐步优化显示位置和绘制方式。

图像添加

第8步:丰富演示效果

最后增加了“变换Logo颜色”、“自动切换画面”、“添加动画机器人”等效果,使演示更具动态感。

仍有细节问题,如机器人动画后残影,调整擦除范围后解决。最终包含标题页、栏目介绍、背景音乐、滚动字幕、Logo显示和机器人动画。

最终效果

这就是开头展示的PC-98店头演示风格应用。

总结与经验积累

本文简化了许多细节,实际开发中遇到的乱码、屏幕模式、滚动、音源、图像显示等问题耗费了不少时间。

为避免重复踩坑,将遇到的问题和解决方案整理成提示和注意事项,作为Claude的技能保存(也包含在仓库中)。涉及Open Watcom编译方法、字符串终止处理、OPNA寄存器写入、屏幕模式初始化、滚动时光标保存恢复等关键点,方便未来开发。

这体现了AI辅助开发的优势,不仅保留成功经验,也记录失败过程,为下一次制作提供起点。

结语:开发门槛大幅降低

通过Claude Code制作PC-98店头演示应用,虽然有反复调试,但不必事先掌握所有PC-98细节和FM音源知识,AI能辅助查询、尝试、修正,最终实现可运行程序。

当然,提升完成度仍需人工确认画面、音效和整体氛围。即便如此,探索“这能行吗?”、“还能做什么?”的好奇心更容易转化为实际作品。

本次应用虽小,但结合旧环境和怀旧表现,借助生成式AI共同开发,带来了意想不到的乐趣。用现代AI重现PC-98店头演示,这种奇妙组合本身就是一次有趣的创作体验。