V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
zjcqoo
V2EX  ›  分享创造

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

  zjcqoo · 2018-01-23 11:10:20 +08:00 · 11203 次点击
这是一个创建于 2478 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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