红白机游戏《超级玛丽》重编译成 JavaScript 代码

[zjcqoo]

周末在 GitHub 上看到有人把原版的《超级玛丽》汇编加上了详细的注释： https://gist.github.com/1wErt3r/4048722，差不多算是开源了吧:)

于是想起之前捣鼓的一个玩具 《机器指令翻译成 JavaScript 》，做了一些改进，加上了 NES 的接口，例如图像、声音、手柄等。

然后和之前文中说的一样，将 6502 ASM 「翻译」成 C，然后再通过 emscripten 「编译」成 JavaScript：

演示： https://www.etherdream.com/FunnyScript/smb-js/game.html

由于最新版的浏览器会把 asm.js 代码自动转成 WebAssembly，所以部分浏览器初始化比较慢，比如 Chrome 启动需要等好几秒。像 FireFox 会缓存 asm.js 的解析，所以只有首次加载会慢。

---

需要注意的是，这不是模拟器！最明显的特征，就是性能。

点击 Benchmark 按钮可测试游戏逻辑的极限 FPS，目前最快的是 Firefox，在我笔记本上可以跑到 19 万 FPS ！就算 IE10 也能跑到 600 FPS。（ IE10 以下的浏览器不支持）

当然，这还只是没做任何性能优化的结果，之后还会尝试更好的翻译方案，比如指令层的 call/jump 尽可能翻译成代码层的函数调用、分支代码等。希望能达到 50 万 FPS 以上 😀

[missdeer]

这一波 666

[toou123]

小心被任天堂告了...（手动笑哭）

[ljbljb007]

有 bug 啊 带子弹的玛丽被小怪碰一下不是变成没子弹的玛丽吗？ 这里怎么直接变小了？

[zjcqoo]

@ljbljb007 原版的超级玛丽在线模拟器： https://jsnes.fir.sh/run/Super%20Mario%20Bros.%20(JU)%20(PRG0)%20[!].nes

[imdoge]

好难跳……
另外按着前进怎么就跳不高。。难道我需要机械键盘

[jiqing]

我一直在看关于 6502 模拟器的资料，想用 Java 写一个，看底层看得相当蛋疼

[tinytin]

竟然连第一关都过不去了。。。。

[civet]

看到楼上几位同学，好像还没发现 B 键的用处……

[northisland]

一不小心就点了 2 下收藏

[droiz]

Firefox 太可怕了，我的 2014 年中独显 macbookpro，ff 可以跑 214285FPS，chrome 只有 28407FPS

[basstk]

勾起了小时候的回忆，厉害了我的哥

[goldenlove]

游戏不错，但再也找不回当时的感觉了~
可支持手柄不？

[mYYnSmiTEQWcCwAr]

强烈建议加一个存档功能。。。

[zjcqoo]

@goldenlove 可以支持。改天我加上。

[tghgffdgd]

@ljbljb007 #3 看来你没玩过 1 代的超级玛丽

[gluttony]

赞。

前几天玩了一个 C++ to JS 运行 CPS 1/2/3 等模拟器的，也很顺畅 http://neptunjs.xyz/cps.html

[newtype0092]

@ljbljb007 你玩到山寨版了

[luoway]

nice!
跳是 I 键
蹲是哪个键？

[qipan0321]

看了楼主的博客园，真的强！

[MonoLogueChi]

建议加上虚拟按键，方便在手机上玩

[lneoi]

这个可真的是会被告...

[zjcqoo]

@cy97cool 在考虑做个实时存档的，可以回滚到之前任何一帧，就跟拖动视频进度一样~

（原理也简单，只需记录每一帧的按键就可以。NES 里没有熵池，就算有随机数算法，估计也只跟种子和按键有关）

[master13]

厉害厉害！

[fy]

大概这就是大佬吧 膜拜

[xi4ohz]

同看了楼主的博客园，真的强！

[300]

我只有 43290FPS /(ㄒoㄒ)/~~

[zhouyou457]

7p 只有 2338fps ……

[woffee]

好巧妙的方法

[a570295535]

一般屌，如果改成 [多人在线玛丽奥跑酷] 就真屌了

[linap]

s8+ 18200fps

[pluto1]

Safari 随手跑了一下只有 2600。。吓得我赶紧打开 Firefox 看了下，19W+ 。。还以为电脑已经落后时代那么多了 2333

[ericFork]

能不能把 I 和 O 键反过来……因为这个死了好多次了

[yagnqionggo]

太厉害了

[abeholder]

膜拜大佬 。

[zenze]

玩了好久，谢谢大佬！

[kran]

nes 图像是怎么做的？

[morethansean]

既然这个帖子变成了 benchmark ...
iPhoneX: 2570
Pixel 2: 18522
为啥差距这么大...

[zjcqoo]

@ericFork 刚刚加了一个 Swap AB 的选项。我也经常纠结这个顺序 😂

[zjcqoo]

@pluto1
@morethansean 现在整个游戏逻辑最终在一个 JS function 里，函数越大优化开销是指数上升的。有些浏览器快是因为支持 asm.js ，它有专门的优化策略，和普通 JS 不太一样。

以后会考虑拆成多个小 function，这样性能会提高很多。

[zjcqoo]

@kran 图像是 CHR 数据通过 PPU 渲染出来的。（可以想象 WebGL 里纹理通过 GPU 渲染出图像）

[jonirrings]

兄弟干得不错啊。来看看这个 http://koute.github.io/pinky-web/
看看能不能把 Pixelated 加上

[kran]

@zjcqoo 我没说清楚，本想问的是 nes 游戏图像数据是怎么获取到，然后渲染在网页上，是不是只需要读取显存就好了？

[xx314327475]

打了一关 奖人还在熟悉的地方 谢谢作者

[zjcqoo]

@kran 数据是从 NES 文件里提取出来的，打包在脚本里。（那 js 里一大坨 base64 的数据大部分都是图像数据）

[kran]

@zjcqoo 打包的是贴图数据吧？动态的是怎么搞滴？

很奇怪，@ 没提醒

[zgl2007dj]

666

[zjcqoo]

@kran 可以看下原始的汇编程序： https://gist.github.com/1wErt3r/4048722 这里面包含了 指令+数据，贴图不在里面。我就是对照着翻译，并不关心动态数据是怎么产生的。

[toan]

然后看了楼主博客的热文《一根网线发起的攻击》，哈哈哈，楼主真是牛，创新力，创造力，动手力真是个强！哈哈哈，服了！

[killadm]

@toan 这篇文章以前看过，楼主在知乎发过？

[cczy]

git 链接错了？

[sammo]

好吃不腻

[maemolee]

吊炸天啊这个 www

[maemolee]

@cczy #49 去掉逗号和之后的部分

[meanmachine]

既然都在 benchmark...s7e 4w

[Creabine]

厉害了

[Immortal]

厉害 不过更被楼主博客内容吸引

[lizhenda]

真心厉害了

[ariesjia]

太强大了 厉害厉害

[doubleflower]

能自定义键就好了，这个 IO 太反人类了，建议 J 发子弹，K 跳

[yesqu]

chrome 49969FPS

[lancerly]

楼主好强！

[subpo]

收藏了！第一次看到在 js 上模拟一个电脑的 cpu 内存的时候觉得无比高大上

[yuankui]

跪拜

[0754]

大佬，给跪

[think2011]

大佬 大佬

[aksoft]

求坦克大战 和魂多罗~~

[jedihy]

楼主有没有兴趣来微软西雅图？