提交 bf813551 编写于 作者: P Pengan Zhou

Seperate educational computer page

上级 f7787fad
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e63f5c6957cc47c6a3205539df60d821";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
<html> <html>
<head> <head>
<title>网页里的电脑博物馆</title> <title>中文家用游戏博物馆</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@2.10.0/github-markdown.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@2.10.0/github-markdown.css">
<link rel="stylesheet" href="base.css" /> <link rel="stylesheet" href="base.css" />
<link rel="stylesheet" href="emularity.css" /> <link rel="stylesheet" href="emularity.css" />
<script src="baidustat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.8.7/dist/showdown.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/showdown@1.8.7/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise@2.0.0/dist/es6-promise.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise@2.0.0/dist/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browserfs@1.2.1/dist/browserfs.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browserfs@1.2.1/dist/browserfs.min.js"></script>
<script src="http://dnbwg.cdn.bcebos.com/emularity-common/loader.js"></script> <script src="http://dnbwg.cdn.bcebos.com/emularity-common/loader.js"></script>
<!-- <script src="experiment/loader.js"></script> -->
<script src="famiclone.js"></script> <script src="famiclone.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
</head> </head>
...@@ -21,7 +20,13 @@ ...@@ -21,7 +20,13 @@
<nav id="mainnav" style="position: relative; z-index: 2;"> <nav id="mainnav" style="position: relative; z-index: 2;">
<ul> <ul>
<li> <li>
<a href="/index.html">目录</a> <a href="index.html">游戏机</a>
</li>
<li>
<a href="index.html?menu=learn.json">学习机</a>
</li>
<li>
<a href="http://www.dnbwg.com">电脑</a>
</li> </li>
<li> <li>
<a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a> <a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a>
...@@ -39,7 +44,7 @@ ...@@ -39,7 +44,7 @@
</div> </div>
</div> </div>
<div style="display: none;"> <div style="display: none;">
<img src="title.png"> <img src="cart.gif">
</div> </div>
<div id="mobile-tools"> <div id="mobile-tools">
<button id="toggleKeyboard" onclick="toggleMobileKeyboard()">显示键盘</button> <button id="toggleKeyboard" onclick="toggleMobileKeyboard()">显示键盘</button>
......
...@@ -7,17 +7,16 @@ function getUrlVars() { ...@@ -7,17 +7,16 @@ function getUrlVars() {
return vars; return vars;
} }
function runMAME(cart) { function runMAME(cart, device) {
var emulator = new Emulator(document.querySelector("#emularity-canvas"), var emulator = new Emulator(document.querySelector("#emularity-canvas"),
postRun, postRun,
new JSMESSLoader(JSMESSLoader.driver("nespal"), new JSMESSLoader(JSMESSLoader.driver(device),
JSMESSLoader.nativeResolution(640, 480), JSMESSLoader.nativeResolution(640, 480),
JSMESSLoader.emulatorJS("http://dnbwg.cdn.bcebos.com/emularity-common/emulators/jsmess/mamenes_wasm.js"), JSMESSLoader.emulatorJS("http://dnbwg.cdn.bcebos.com/emularity-common/emulators/jsmess/mamenes_wasm.js"),
JSMESSLoader.emulatorWASM("http://dnbwg.cdn.bcebos.com/emularity-common/emulators/jsmess/mamenes_wasm.wasm"), JSMESSLoader.emulatorWASM("http://dnbwg.cdn.bcebos.com/emularity-common/emulators/jsmess/mamenes_wasm.wasm"),
JSMESSLoader.mountFile("game.nes", JSMESSLoader.mountFile("game.nes",
JSMESSLoader.fetchFile("Game File", JSMESSLoader.fetchFile("Game File",
cart)), cart)),
JSMESSLoader.peripheral("cart", "game.nes"))) JSMESSLoader.peripheral("cart", "game.nes")))
emulator.setScale(3).start({ waitAfterDownloading: true }); emulator.setScale(3).start({ waitAfterDownloading: true });
} }
...@@ -48,6 +47,9 @@ $(document).ready(function () { ...@@ -48,6 +47,9 @@ $(document).ready(function () {
var gameBaseUrl = "http://dnbwg3.cdn.bcebos.com/NES-China/" var gameBaseUrl = "http://dnbwg3.cdn.bcebos.com/NES-China/"
var game = getUrlVars()["game"]; var game = getUrlVars()["game"];
var cart = gameBaseUrl + game + ".nes" var cart = gameBaseUrl + game + ".nes"
var device = getUrlVars()["device"];
runMAME(cart); if (!device) {
device = "nespal"
}
runMAME(cart, device);
}); });
\ No newline at end of file
此差异已折叠。
<html> <html>
<head> <head>
<title>网页里的电脑博物馆</title> <title>中文家用游戏博物馆</title>
<meta name="description" content="在网页模拟器中重现电脑发展史"> <meta name="description" content="在网页模拟器中重现电脑发展史">
<meta name="keywords" content="电脑, 计算机, 博物馆, 网页, 浏览器, 模拟器, 游戏, 历史"> <meta name="keywords" content="电脑, 计算机, 博物馆, 网页, 浏览器, 模拟器, 游戏, 历史">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-css-only@4.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-css-only@4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="base.css" /> <link rel="stylesheet" href="base.css" />
<script src="baidustat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="index.js"></script> <script src="index.js"></script>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
...@@ -18,7 +18,13 @@ ...@@ -18,7 +18,13 @@
<nav style="position: relative; z-index: 2; width:100%"> <nav style="position: relative; z-index: 2; width:100%">
<ul> <ul>
<li> <li>
<a href="index.html">目录</a> <a href="index.html">游戏机</a>
</li>
<li>
<a href="index.html?menu=learn.json">学习机</a>
</li>
<li>
<a href="http://www.dnbwg.com">电脑</a>
</li> </li>
<li> <li>
<a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a> <a href="https://zhuanlan.zhihu.com/retrocomputing">知乎专栏</a>
......
var machineList; var machineList;
var newMachineList = []; var newMachineList = [];
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
vars[key] = value;
});
return vars;
}
function processJson(data) { function processJson(data) {
machineList = data; machineList = data;
machineList = splitArrayByTime(machineList); machineList = splitArrayByTime(machineList);
...@@ -11,6 +19,11 @@ function processJson(data) { ...@@ -11,6 +19,11 @@ function processJson(data) {
var clone = base.clone(); var clone = base.clone();
var title = machine.name + " - " + machine.vendor; var title = machine.name + " - " + machine.vendor;
var playerlink = "famiclone.html?game=" + encodeURI(machine.filename); var playerlink = "famiclone.html?game=" + encodeURI(machine.filename);
if (machine.device) {
playerlink = playerlink + "&device=" + machine.device;
}
clone.show(); clone.show();
clone.attr("id", machine.id); clone.attr("id", machine.id);
clone.find("a").attr("href", playerlink); clone.find("a").attr("href", playerlink);
...@@ -36,7 +49,11 @@ function splitArrayByTime(someArray) { ...@@ -36,7 +49,11 @@ function splitArrayByTime(someArray) {
} }
$(document).ready(function () { $(document).ready(function () {
$.getJSON("games.json", processJson); var menu = getUrlVars()["menu"];
if (!menu) {
menu = "games.json"
}
$.getJSON(menu, processJson);
}); });
function testImage() { function testImage() {
......
[
{
"name": "Windows 2000",
"vendor": "未知",
"filename": "Windows 2000 [未知]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/Windows 2000 [未知].gif",
"device": "sb486"
},
{
"name": "智力小状元",
"vendor": "数奇玉",
"filename": "智力小状元 [数奇玉]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/智力小状元 [数奇玉].gif",
"device": "sb486"
},
{
"name": "数学小状元",
"vendor": "数奇玉",
"filename": "数学小状元 [数奇玉]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/数学小状元 [数奇玉].gif",
"device": "sb486"
},
{
"name": "小博士",
"vendor": "鸿达",
"filename": "小博士 [鸿达]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/小博士 [鸿达].gif",
"device": "sb486"
},
{
"name": "英语声霸卡",
"vendor": "东生",
"filename": "英语声霸卡 [东生]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/英语声霸卡 [东生].gif",
"device": "sb486"
},
{
"name": "小百科学习机",
"vendor": "maxzhou88",
"filename": "小百科学习机 [maxzhou88]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/小百科学习机 [maxzhou88].gif",
"device": "sb486"
},
{
"name": "小霸王学习机V3",
"vendor": "小霸王",
"filename": "小霸王学习机V3 [小霸王]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/小霸王学习机V3 [小霸王].gif",
"device": "sb486"
},
{
"name": "小霸王学习机V4",
"vendor": "小霸王",
"filename": "小霸王学习机V4 [小霸王]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/小霸王学习机V4 [小霸王].gif",
"device": "sb486"
},
{
"name": "小霸王英语词霸卡",
"vendor": "小霸王",
"filename": "小霸王英语词霸卡 [小霸王]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/小霸王英语词霸卡 [小霸王].gif",
"device": "sb486"
},
{
"name": "马步迷阵 - 趣味成语屋",
"vendor": "小霸王",
"filename": "马步迷阵 - 趣味成语屋 [小霸王]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/马步迷阵 - 趣味成语屋 [小霸王].gif",
"device": "sb486"
},
{
"name": "王中霸学习卡",
"vendor": "荣丰",
"filename": "王中霸学习卡 [荣丰]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/王中霸学习卡 [荣丰].gif",
"device": "sb486"
},
{
"name": "荣丰学习卡",
"vendor": "荣丰",
"filename": "荣丰学习卡 [荣丰]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/荣丰学习卡 [荣丰].gif",
"device": "sb486"
},
{
"name": "MXMDHTWO学习卡",
"vendor": "TXC",
"filename": "MXMDHTWO学习卡 [TXC]",
"image": "http://dnbwg3.cdn.bcebos.com/NES-China/images/MXMDHTWO学习卡 [TXC].gif",
"device": "sb486"
}
]
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册