在本文中,将探讨如何在浏览器中设置PC XT和PC AT模拟器。首先,需要从PCjs的GitHub仓库中复制所需的XML、CSS、XSL和JS文件到项目中。以下是HTML代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>pcjs.org | /apps/pcx86/examples/example1.html</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="components.css">
<script type="text/javascript" src="pcx86.js"></script>
</head>
<body style="font-family: Helvetica, Arial, sans-serif;">
<div id="pcxt"></div>
<script type="text/javascript">
embedPCx86("pcxt", "pcxt.xml", "components.xsl");
</script>
</body>
</html>
确保div的名称与传递给embedPCx86的值匹配,否则页面将只显示空白。在这里,pcxt.xml指定了RAM、BIOS、软驱等设置:
<?xml version="1.0" encoding="UTF-8" ?>
<machine id="example1" type="pcx86" width="720px">
<computer id="pc" name="IBM PC"/>
<cpu id="cpu8088" model="8088" autostart="true"/>
<ram id="ramLow" addr="0x00000" size="0x10000"/>
<rom id="romBASIC" addr="0xf6000" size="0x8000" file="ibm-basic-1.00.json"/>
<rom id="romBIOS" addr="0xfe000" size="0x2000" file="1981-04-24.json"/>
<keyboard id="keyboard"/>
<video id="videoMDA" screenWidth="720" screenHeight="350" fontROM="ibm-mda-cga.json">
<menu>
<title>Monochrome Display</title>
</menu>
</video>
<chipset id="chipset" model="5150" sw1="01000001" sw2="11110000"/>
</machine>
重要的是确保XML中提到的所有文件(BIOS映像、软盘映像等)以及PCx86支持文件(可在versions/pcx86文件夹中找到)都位于正确的文件夹中,否则将会出现难以理解的错误消息。特别是如果缺少某些CSS/XSL文件,负责初始化HTML canvas以显示模拟器的JS代码将失败,并报告一个非常误导性的错误:“缺少<canvas>支持。请尝试使用更新的网络浏览器。”
由于PCjs只接受JSON格式的BIOS/磁盘映像,因此首先需要将二进制映像转换。可以参考这里和这里了解如何执行转换。此外,参考PCjs在线示例了解模拟不同类型机器所需的配置条目。
有了正确的配置,能够迅速在浏览器中启动PC XT模拟器:
串行鼠标仿真也与CuteMouse正常工作,尽管浏览器文本光标与DOS光标一起显示。这可能可以通过CSS样式修复。无论如何,光标对来说不是大问题,因为通常会忽略浏览器光标。
注意到的一个问题是,尽管模拟器在其他方面工作得很好,但声音有时在Google Chrome中无法播放。原因可以在Chrome控制台中找到一条消息:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
似乎Chrome会阻止音频播放,除非用户明确与模拟器交互。在PC XT模拟器的情况下,需要在POST蜂鸣声之前点击模拟器,然后才能播放音频。要解决此问题,请打开chrome://flags并将“Autoplay policy”设置为“No user gesture is required”:
或者,只需使用Firefox,它在测试时可以正常工作。至于Internet Explorer,即使使用最新版本,也未能获得音频播放。
一个挑战是保存虚拟机的当前状态,特别是修改后的硬盘映像,以便即使在浏览器重新启动后也能恢复到相同的状态。虽然对于其他模拟器(如DosBox)来说这通常很简单,因为磁盘映像是直接更新的,但PCjs在JSON数组上工作,模拟器状态只能通过调用“Save Machine”菜单选项来保存。不幸的是,由于PCjs使用硬编码路径到pcx86.js脚本的bug,这并未奏效。作为变通方法,使用CSS隐藏默认的“Save Machine”链接并实现菜单:
<a href="#" onclick='savePC("pcxt", "pcx86.js")'>Save Machine</a>
在这里,pcxt是模拟器的名称,pcx86.js是pcx86.js脚本的路径。有了这个变通方法,可以在Firefox下保存机器状态。描述模拟器当前状态的JavaScript文件将被下载,PCjs还会向显示用于重新加载保存状态的代码片段。
不幸的是,没有简单的方法可以不保存整个机器的状态就提取修改后的硬盘映像。savePC()函数在Chrome中也会立即失败,出现“下载失败 - 网络错误”。在Internet Explorer和Firefox中,该功能可以正常工作。
当使用CGA显示时,还注意到PCjs似乎忽略了video标签的screenWidth和screenHeight属性,并始终以100%的屏幕宽度显示模拟器。如果这是一个问题,请使用以下JavaScript代码将模拟器设置为喜欢的宽度:
setTimeout(function() {
document.getElementById('ibm5160').setAttribute("style", "width:50%");
}, 500);
setTimeout函数需要引入一个小延迟;否则样式更改将被PCjs初始化代码简单地撤销。