经典FC游戏web模拟器--EmulatorJS

news2024/10/5 13:11:48

简介

        EmulatorJS是一个基于JavaScript和Webassembly技术的虚拟环境的实现,可以在网页中运行各种经典FC游戏系统,支持任天堂、世嘉、雅达利等经典红白机。EmulatorJS的诞生使得诸如超级玛丽、坦克大战、魂斗罗等经典FC游戏能够以一种全新的方式回归。本文将以魂斗罗为例讲述如何使用 EmulatorJS在网页端实现经典FC游戏(仅供学习使用)。下载地址

一、创建游戏目录

将Emulator解压以后,进入games文件夹

在games文件夹中创建游戏目录,本文以魂斗罗为例,顾创建了contra文件夹。如下图所示:

二、添加游戏文件

将魂斗罗游戏文件contra.nes复制到contra文件夹中

三、创建游戏index.html

在contra文件夹中创建index.html文件,并编写如下代码:

<!DOCTYPE html>
<html>
    <head>
        <title>Contra</title>
        <meta name = viewport content = "width = device-width, initial-scale = 1">
        <link rel = "stylesheet" type = "text/css" href = "../basesetting.css">
        <script src = "../basesetting.js"></script>
    </head>

    <body>
        <script>
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            let language = urlParams.get('language');
            //console.log('language:' + language);
            if (language === null || language === undefined) {
                language = "en-US"
            }
            window.onload = loadEvent("contra.nes",language);
        </script>
    </body>
</html>

四、制作游戏图标(可选)

可自行设计游戏图标用于在自己的网站上展示游戏,可使用ico51来制作。

五、部署游戏

将emulator整个文件夹上传到你网站的public或者根目录下,访问emulator/games/contra/index.html即可。需要注意的是,如果要在你的网页中嵌入游戏页面,则需要使用iframe标签,否则可能出现CSS样式污染。

<iframe src="/emulator/games/contra/index.html?language=zh-CN"></iframe>

//language=zh-CN 表示模拟器将使用中文
//language=en-US 表示模拟器将使用英文

六、在线演示地址

https://potatoh5games.fun/gameEntrance/classic/h5contra.html

若要制作其他游戏,则重复第一到第五步,在第三步制作游戏入口Index.html时,需要将加载的游戏文件名替换为实际的游戏文件名称

 window.onload = loadEvent("contra.nes",language);

// 在制作其他游戏入口时,contra.nes要替换为实际的游戏文件名称,该处为魂斗罗游戏的示例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1888388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL:高效的索引

数据库索引 1. 索引介绍1.1 创建索引1.2 查看索引 2. 索引应用2.1 前缀索引2.2 全文索引2.3 复合索引2.4 复合索引中的列顺序2.5 建立最佳索引2.6 使用索引排序2.7 覆盖索引 3. 维护索引4. 建立性能数据库 索引对大型和高并发数据库非常有用&#xff0c;因为它可以显著提升查询…

KVM虚拟机动态添加网卡

一、在宿主机上临时在线添加虚拟网卡&#xff0c;关机再开机失效 1、查看运行的虚拟机 [rootlocalhost img]# virsh list 2、添加NAT网卡&#xff0c;会自动获取192.168.122.X网段的IP virsh attach-interface hadoop01 --type network --source default 3、查看虚机mac …

vue+element-ui简洁完美实现个人博客“​响石潭 ​”

目录 一、项目介绍 二、项目截图 1.项目结构图 2.首页 3.生活 ​编辑 4.文章详情 ​编辑 5.关于我 ​编辑 ​编辑 三、源码实现 1.项目依赖package.json 2.项目启动 3.首页源码 四、总结 一、项目介绍 本项目在线预览&#xff1a;点击访问 参考官网&#xff1…

360的chromesafe64.dll动态链接库导致chrome和edge浏览器闪退崩溃关闭

在chrome或edge浏览器中打开特定的一些网页会导致浏览器闪退关闭 这是windows系统记录的报错日志 chrome报错日志 edge报错日志 日志指向的就是chromesafe64.dll这个动态库 然后用everything搜索发现原来在360安装目录下 360安装目录下的chromesafe64.dll文件 为什么360中的…

使用TensorFlow进行OCR识别:将表格图片转换为结构化数据

随着人工智能和机器学习技术的不断发展&#xff0c;OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术已经成为处理图像中文本信息的强大工具。TensorFlow是一个广泛使用的开源机器学习框架&#xff0c;它提供了丰富的API和工具&#xff…

独立开发者系列(17)——MYSQL的常见异常整理

虽然安装MYSQL到本地很简单&#xff0c;但是数据库报错还是经常出现&#xff0c;这个时候&#xff0c;需要我们进行逐步检查与修复。作为我们最常用的开发软件&#xff0c;无论切换php/go/python/node/java&#xff0c;数据库的身影都少不了&#xff0c;对于我们储存数据而言&a…

Android 如何通过一个设备开发多种分辨率屏幕UI

获取当前屏幕密度&#xff1a; adb shell wm density 获取当前分辨率&#xff1a; adb shell wm size 重置设备密度和分辨率 adb shell wm size reset adb shell wm density reset 屏幕1 adb shell wm size 3082x934 adb shell wm density 160 屏幕2 adb shell wm siz…

【数据结构与算法】利用堆结构高效解决TopK问题

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​ 目录 一、引言 二、堆的基本概念 三、使用堆解决TopK问题 四、算法实现&#xff08;C语言…

HTTPS基础

目录 1. HTTPS概述2. HTTPS工作原理3. HTTPS证书4. HTTPS安全性特性5. 配置HTTPS示例5.1 获取和配置SSL/TLS证书5.2 示例&#xff1a;在Nginx上配置HTTPS5.3 实施HSTS 6. 结论 1. HTTPS概述 术语描述HTTPS超文本传输安全协议&#xff0c;HTTP的安全版本。SSL/TLS安全套接字层/…

UG NX二次开发(C++)-根据草图创建拉伸特征(UFun+NXOpen)

1、前言 UG NX是基于特征的三维建模软件,其中拉伸特征是一个很重要的特征,有读者问如何根据草图创建拉伸特征,我在这篇博客中讲述一下草图创建拉伸特征的UG NX二次开发方法,感兴趣的可以加入QQ群:749492565,或者在评论区留言。 2、在UG NX中创建草图,然后创建拉伸特征 …

uniapp + vue3 + Script Setup 写法变动 (持续更新)

一、uniapp 应用生命周期&#xff1a; https://uniapp.dcloud.net.cn/tutorial/vue3-composition-api.html 注意&#xff1a; 应用生命周期仅可在App.vue中监听&#xff0c;在其它页面监听无效。 二 、uniapp页面生命周期&#xff1a; https://uniapp.dcloud.net.cn/tutori…

电商控价:系统监测的必要性与优势

在品牌的发展进程中&#xff0c;会遭遇各种各样的渠道问题&#xff0c;控价乃是其中颇为关键的一环。品牌进行控价的目的无疑是为了妥善治理低价链接&#xff0c;低价链接的发现途径可以是人工&#xff0c;也可以是系统。力维网络在为上百个品牌提供服务的过程中察觉到&#xf…

中南大学湘雅三院张如旭/刘爱华团队发现牙髓干细胞来源的外泌体减轻脑缺血再灌注损伤的神经保护机制

随着我国人口老龄化的加剧&#xff0c;中风已成为我国主要的公共卫生疾病之一&#xff0c;确定其潜在的分子机制和治疗靶点对于开发有效的预防和治疗策略至关重要。近期&#xff0c;中南大学湘雅第三医院张如旭、刘爱华团队在经典权威期刊《Pharmacological Research》&#xf…

在 Mac 上使用 MLX 微调微软 phi3 模型

微调大语言模型是常见的需求&#xff0c;由于模型参数量大&#xff0c;即使用 Lora/Qlora 进行微调也需要 GPU 显卡&#xff0c;Mac M系是苹果自己的 GPU&#xff0c;目前主流的框架还在建立在 CUDA 的显卡架构&#xff0c;也就是主要的卡还是来自英伟达。如果要用 Mac 来做训练…

【AI提升】如何使用大模型:本机离线和FastAPI服务调用

大模型本身提供的功能&#xff0c;类似于windows中的一个exe小工具&#xff0c;我们可以本机离线调用然后完成具体的功能&#xff0c;但是别的机器需要访问这个exe是不可行的。常见的做法就是用web容器封装起来&#xff0c;提供一个http接口&#xff0c;然后接口在后端调用这个…

单目行车测距摄像系统(单目测距-行车)

单目行车测距摄像系统是一种利用单个摄像头实现车辆行驶中前方障碍物距离测量的技术。该系统通过计算机视觉算法&#xff0c;能够实时分析摄像头捕捉的图像&#xff0c;精确计算出车辆与前方物体之间的距离&#xff0c;对于自动驾驶、高级驾驶辅助系统&#xff08;ADAS&#xf…

为什么说AI大模型开发人人必备?

首先&#xff0c;能够开发 AGI 时代新应用程序 第一步&#xff1a;学会大模型内核架构&#xff0c;对 Transformer 神经网络架构有个大致的了解&#xff0c;能够搞懂 &#xff1a;LLM 大模型是如何预测下一个 token 的、涌现是如何产生的、幻觉问题如何避免、在线推理的性能问…

德国Testing Expo丨知迪科技Vehicle Bus Tool免费软件“剧透”抢先看!

今日&#xff0c;德国斯图加特汽车测试及质量监控展览会&#xff08;Automotive Testing Expo&#xff09;在斯图加特会展中心正式开幕。作为汽车测试领域专业性最强、影响力最广泛的展会之一&#xff0c;展会首日盛况空前&#xff0c;面向组件和整车的最新测试、开发和验证技术…

CTF实战:从入门到提升

CTF实战&#xff1a;从入门到提升 &#x1f680;前言 没有网络安全就没有国家安全&#xff0c;网络安全不仅关系到国家整体信息安全&#xff0c;也关系到民生安全。近年来&#xff0c;随着全国各行各业信息化的发展&#xff0c;网络与信息安全得到了进一步重视&#xff0c;越…

新的Meta 3D Gen可在一分钟内根据文本生成高质量的3D素材

创建 3D 资产是最耗时、最具挑战性的创意任务之一。如果人工智能助手能够根据文本输入生成三维内容&#xff0c;那么它将使三维内容创作普及化&#xff0c;并对视频游戏和电影行业以及 AR 和 VR 应用程序的开发大有帮助。 Meta 的人工智能研究团队最近推出了 Meta 3D Gen (3DGe…