html使用jsnes在网页中运行nes游戏

⌚Time: 2024-04-12 13:01:00

👨‍💻Author: Jack Ge

jsnes 是一个基于 JavaScript 的任天堂模拟器,允许用户在浏览器上玩任天堂的经典游戏。

jsnes 是通过解析和运行原始的任天堂游戏 ROM 文件来实现的。它使用了 HTML5 的 canvas 元素来绘制游戏界面,并且提供了键盘和手柄控制器的支持。用户可以选择玩任天堂的经典游戏,

官网是简洁的 https://jsnes.org/

开源地址

https://github.com/bfirsh/jsnes

下载后解压,脚本和例子在example文件夹下,其中的nes-embed.html是例子,我加了注释

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Embedding Example</title>
        <!--引入js脚本-->
        <script type="text/javascript" src="https://unpkg.com/jsnes/dist/jsnes.min.js"></script>
        <script type="text/javascript" src="nes-embed.js"></script>
        <script>
            window.onload = function(){
                //加载nes游戏,参数1是画布id,参数2是nes文件路径
                nes_load_url("nes-canvas", "InterglacticTransmissing.nes");
            }
        </script>
    </head>
    <body>
        <div style="margin: auto; width: 75%;">
            <!--定义画布绘制nes游戏-->
            <canvas id="nes-canvas" width="256" height="240" style="width: 100%"/>
        </div>
        <!--操作提示-->
        <p>DPad: Arrow keys<br/>Start: Return, Select: Tab<br/>A Button: A, B Button: S</p>
    </body>
</html>

自己修改一些参数,使用web服务器运行起网页,浏览器访问就行了。

对于引用的js脚本地址https://unpkg.com/jsnes/dist/jsnes.min.js,一般都把它下载下来到本地路径使用。

<script type="text/javascript" src="./jsnes.min.js"></script>
<script type="text/javascript" src="nes-embed.js"></script>