爱意满满的作品展示区。
zjcqoo

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

  zjcqoo · Jan 23, 2018 · 12959 views
This topic created in 3212 days ago, the information mentioned may be changed or developed.

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

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

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

demo.png

演示: 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 以上 😀

67 replies  •  2018-01-25 01:36:32 +08:00
missdeer
missdeer
Jan 23, 2018
1
这一波 666
toou123
toou123
Jan 23, 2018
2
小心被任天堂告了...(手动笑哭)
ljbljb007
ljbljb007
Jan 23, 2018
3
有 bug 啊 带子弹的玛丽被小怪碰一下不是变成没子弹的玛丽吗? 这里怎么直接变小了?
zjcqoo
zjcqoo
OP
Jan 23, 2018
4
imdoge
imdoge
Jan 23, 2018
5
好难跳……
另外按着前进怎么就跳不高。。难道我需要机械键盘
jiqing
jiqing
Jan 23, 2018
6
我一直在看关于 6502 模拟器的资料,想用 Java 写一个,看底层看得相当蛋疼
tinytin
tinytin
Jan 23, 2018
7
竟然连第一关都过不去了。。。。
civet
civet
Jan 23, 2018
8
看到楼上几位同学,好像还没发现 B 键的用处……
northisland
northisland
Jan 23, 2018
9
一不小心就点了 2 下收藏
droiz
droiz
Jan 23, 2018
10
Firefox 太可怕了,我的 2014 年中独显 macbookpro,ff 可以跑 214285FPS,chrome 只有 28407FPS
basstk
basstk
Jan 23, 2018
11
勾起了小时候的回忆,厉害了我的哥
goldenlove
goldenlove
Jan 23, 2018
12
游戏不错,但再也找不回当时的感觉了~
可支持手柄不?
mYYnSmiTEQWcCwAr
mYYnSmiTEQWcCwAr
Jan 23, 2018
13
强烈建议加一个存档功能。。。
zjcqoo
zjcqoo
OP
Jan 23, 2018
14
@goldenlove 可以支持。改天我加上。
tghgffdgd
tghgffdgd
Jan 23, 2018
15
@ljbljb007 #3 看来你没玩过 1 代的超级玛丽
gluttony
gluttony
Jan 23, 2018
16
赞。

前几天玩了一个 C++ to JS 运行 CPS 1/2/3 等模拟器的,也很顺畅 http://neptunjs.xyz/cps.html
newtype0092
newtype0092
Jan 23, 2018
17
@ljbljb007 你玩到山寨版了
luoway
luoway
Jan 23, 2018
18
nice!
跳是 I 键
蹲是哪个键?
qipan0321
qipan0321
Jan 23, 2018
19
看了楼主的博客园,真的强!
MonoLogueChi
MonoLogueChi
Jan 23, 2018 via Android
20
建议加上虚拟按键,方便在手机上玩
lneoi
lneoi
Jan 23, 2018
21
这个可真的是会被告...
zjcqoo
zjcqoo
OP
Jan 23, 2018
22
@cy97cool 在考虑做个实时存档的,可以回滚到之前任何一帧,就跟拖动视频进度一样~

(原理也简单,只需记录每一帧的按键就可以。NES 里没有熵池,就算有随机数算法,估计也只跟种子和按键有关)
master13
master13
Jan 23, 2018
23
厉害厉害!
fy
fy
Jan 23, 2018
24
大概这就是大佬吧 膜拜
xi4ohz
xi4ohz
Jan 23, 2018
25
同看了楼主的博客园,真的强!
300
300
Jan 23, 2018
26
我只有 43290FPS /(ㄒoㄒ)/~~
zhouyou457
zhouyou457
Jan 23, 2018 via iPhone
27
7p 只有 2338fps ……
woffee
woffee
Jan 23, 2018
28
好巧妙的方法
a570295535
a570295535
Jan 23, 2018
29
一般屌,如果改成 [多人在线玛丽奥跑酷] 就真屌了
linap
linap
Jan 23, 2018 via Android
30
s8+ 18200fps
pluto1
pluto1
Jan 23, 2018
31
Safari 随手跑了一下只有 2600。。吓得我赶紧打开 Firefox 看了下,19W+ 。。还以为电脑已经落后时代那么多了 2333
ericFork
ericFork
Jan 23, 2018
32
能不能把 I 和 O 键反过来……因为这个死了好多次了
yagnqionggo
yagnqionggo
Jan 23, 2018
33
太厉害了
abeholder
abeholder
Jan 23, 2018
34
膜拜大佬 。
zenze
zenze
Jan 23, 2018
35
玩了好久,谢谢大佬!
kran
kran
Jan 23, 2018 via iPhone
36
nes 图像是怎么做的?
morethansean
morethansean
Jan 23, 2018 via iPhone
37
既然这个帖子变成了 benchmark ...
iPhoneX: 2570
Pixel 2: 18522
为啥差距这么大...
zjcqoo
zjcqoo
OP
Jan 23, 2018
38
@ericFork 刚刚加了一个 Swap AB 的选项。我也经常纠结这个顺序 😂
zjcqoo
zjcqoo
OP
Jan 23, 2018
39
@pluto1
@morethansean 现在整个游戏逻辑最终在一个 JS function 里,函数越大优化开销是指数上升的。有些浏览器快是因为支持 asm.js ,它有专门的优化策略,和普通 JS 不太一样。

以后会考虑拆成多个小 function,这样性能会提高很多。
zjcqoo
zjcqoo
OP
Jan 23, 2018
40
@kran 图像是 CHR 数据通过 PPU 渲染出来的。(可以想象 WebGL 里纹理通过 GPU 渲染出图像)
jonirrings
jonirrings
Jan 23, 2018
41
兄弟干得不错啊。来看看这个 http://koute.github.io/pinky-web/
看看能不能把 Pixelated 加上
kran
kran
Jan 23, 2018 via iPhone
42
@zjcqoo 我没说清楚,本想问的是 nes 游戏图像数据是怎么获取到,然后渲染在网页上,是不是只需要读取显存就好了?
xx314327475
xx314327475
Jan 23, 2018
43
打了一关 奖人还在熟悉的地方 谢谢作者
zjcqoo
zjcqoo
OP
Jan 23, 2018
44
@kran 数据是从 NES 文件里提取出来的,打包在脚本里。(那 js 里一大坨 base64 的数据大部分都是图像数据)
kran
kran
Jan 23, 2018 via iPhone
45
@zjcqoo 打包的是贴图数据吧?动态的是怎么搞滴?

很奇怪,@ 没提醒
zgl2007dj
zgl2007dj
Jan 23, 2018
46
666
zjcqoo
zjcqoo
OP
Jan 23, 2018
47
@kran 可以看下原始的汇编程序: https://gist.github.com/1wErt3r/4048722 这里面包含了 指令+数据,贴图不在里面。我就是对照着翻译,并不关心动态数据是怎么产生的。
toan
toan
Jan 23, 2018 via Android
48
然后看了楼主博客的热文《一根网线发起的攻击》,哈哈哈,楼主真是牛,创新力,创造力,动手力真是个强!哈哈哈,服了!
killadm
killadm
Jan 24, 2018 via Android
49
@toan 这篇文章以前看过,楼主在知乎发过?
cczy
cczy
Jan 24, 2018
50
git 链接错了?
sammo
sammo
Jan 24, 2018 via iPhone
51
好吃不腻
maemolee
maemolee
Jan 24, 2018
52
吊炸天啊这个 www
maemolee
maemolee
Jan 24, 2018
53
@cczy #49 去掉逗号和之后的部分
meanmachine
meanmachine
Jan 24, 2018 via Android
54
既然都在 benchmark...s7e 4w
Creabine
Creabine
Jan 24, 2018
55
厉害了
Immortal
Immortal
Jan 24, 2018
56
厉害 不过更被楼主博客内容吸引
lizhenda
lizhenda
Jan 24, 2018
57
真心厉害了
ariesjia
ariesjia
Jan 24, 2018
58
太强大了 厉害厉害
doubleflower
doubleflower
Jan 24, 2018
59
能自定义键就好了,这个 IO 太反人类了,建议 J 发子弹,K 跳
yesqu
yesqu
Jan 24, 2018
60
chrome 49969FPS
lancerly
lancerly
Jan 24, 2018
61
楼主好强!
subpo
subpo
Jan 24, 2018
62
收藏了!第一次看到在 js 上模拟一个电脑的 cpu 内存的时候觉得无比高大上
yuankui
yuankui
Jan 24, 2018
63
跪拜
0754
0754
Jan 24, 2018 via Android
64
大佬,给跪
think2011
think2011
Jan 24, 2018
65
大佬 大佬
aksoft
aksoft
Jan 24, 2018
66
求坦克大战 和魂多罗~~
jedihy
jedihy
Jan 25, 2018 via iPhone
67
楼主有没有兴趣来微软西雅图?
About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2606 Online   Highest 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 262ms · UTC 10:44 · PVG 18:44 · LAX 02:44 · JFK 05:44
♥ Do have faith in what you're doing.