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

简介

        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要替换为实际的游戏文件名称,该处为魂斗罗游戏的示例

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开源模型应用落地-FastAPI-助力模型交互-WebSocket篇(六)

一、前言 使用 FastAPI 可以帮助我们更简单高效地部署 AI 交互业务。FastAPI 提供了快速构建 API 的能力,开发者可以轻松地定义模型需要的输入和输出格式,并编写好相应的业务逻辑。 FastAPI 的异步高性能架构,可以有效支持大量并发的预测请求,为用户提供流畅的交互体验。此外,F…

动手学深度学习 --带你了解chatgpt,跟上AI发展!

本书旨在向读者交付有关深度学习的交互式学习体验。书中不仅阐述深度学习的算法原理&#xff0c;还演示它们的实现和运行。与传统图书不同&#xff0c;本书的每一节都是一个可以下载并运行的 Jupyter记事本&#xff0c;它将文字、公式、图像、代码和运行结果结合在了一起。此外…

【JS】纯web端使用ffmpeg实现的视频编辑器-视频合并

纯前端实现的视频合并 接上篇ffmpeg文章 【JS】纯web端使用ffmpeg实现的视频编辑器 这次主要添加了一个函数&#xff0c;实现了视频合并的操作。 static mergeArgs(timelineList) {const cmd []console.log(时间轴数据,timelineList)console.log("文件1",this.readD…

openGauss真的比PostgreSQL差了10年?

前不久写了MogDB针对PostgreSQL的兼容性文章&#xff0c;我在文中提到针对PostgreSQL而言&#xff0c;MogDB兼容性还是不错的&#xff0c;其中也给出了其中一个能源客户之前POC的迁移报告数据。 But很快我发现总有人回留言喷我&#xff0c;而且我发现每次喷的这帮人是根本不看文…

容器内存

一、容器内存概述 容器本质上还是一个进程&#xff0c;是一个被隔离和限制的进程。因此容器内存和进程内存在表现形式上其实是一样的&#xff0c;这块主要涉及三部分内容&#xff1a;RSS&#xff0c;page cache和swap这三部分&#xff0c;容器基于memory Cgroup对内存进行限制…

Xorbits inference操作实战

1.操作环境 序号软件版本备注1Windows1.版本&#xff1a;Windows 10 专业版2.版本号&#xff1a;21H23.操作系统内部版本&#xff1a;19044.18892Docker Desktop4.24.2 (124339)3WSLUbuntu 22.04 LTS4Python3.105CUDA12.16Dify0.6.6 Xorbits inference 是一个强大且通用的分布…

Python基础001

Python输出语句 print输出字符串 print("中国四大名著&#xff1a;","西游记|","三国演义|","红楼梦|","水浒传") print(6) print(1 1)Python输入语句 input函数 input() input("我的名字是&#xff1a;") p…

在非 antd pro 项目中使用 umi OpenAPI

大家好&#xff0c;我是松柏。自从跟着鱼皮哥使用了ant design pro中的OpenAPI插件之后&#xff0c;我已经无法忍受自己写请求后端接口的方法了&#xff0c;所以这篇文章记录一下如何在非ant design pro项目中使用OpenAPI。 安装依赖 首先我们需要安装包umijs/openapi&#x…

java面试课程-SpringIOC部分源码解析

1.SpringIOC的refresh源码解析 核心&#xff1a; 核心使用的是&#xff1a; 需要完成配置类的解析&#xff0c;各种BeanFactoryProcessor的注册。还有写国际化配置的初始化。Web容器的内部构造。 上面几个方法是refresh方法的内容。注意可以与applicationContext里的内容一起…

Profibus DP主站转Modbus网关连接智能化电表通讯

Profibus DP主站转Modbus网关&#xff08;XD-MDPBM20&#xff09;&#xff0c;是实现不同工业通信协议之间互联互通的设备&#xff0c;主要将Profibus DP协议转换为Modbus协议&#xff0c;实现数据的双向传输。通过Profibus DP主站转Modbus网关&#xff08;XD-MDPBM20&#xff…

大Excel表格76M,电脑16G内存打不开,内存利用率100%虚拟内存占用16G还是卡死提示内存不足,如何才能查看里面内容?

环境: Excel2016 问题描述: 大Excel表格76M,电脑16G内存打不开,内存利用率100%虚拟内存占用16G还是卡死提示内存不足,如何才能查看里面内容? 解决方案: 遇到这种情况,说明Excel文件非常大,超出了你当前计算机配置的处理能力。以下是一些解决方法,帮助你尝试打开或…

代码随想录-Day45

198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个…

编译原理2

推导和短语 推导 推导过程中&#xff0c;每一步推导都是对句型的 最右非终结符 进行替换&#xff0c;最右推导(规范推导)&#xff1b; 短语 用 β 替换 A&#xff0c;则 β 就是 关于A 的一个短语&#xff1b; 直接短语是短语范围内的一步推导&#xff1b; 直接短语可能不…

基于python的随机森林回归预测+贝叶斯优化超参数前后训练效果对比

目录 1.导入必要的库 2.导入数据与数据预处理 3.查看数据分布 4.特征选择 5.模型建立与训练 6.训练集预测结果 7.模型评估 8.预测新数据 9.贝叶斯优化超参数 1.导入必要的库 # 导入所需的库 from sklearn.model_selection import cross_val_score import pandas as …

Sentinel实现区分来源

要区分来源就要写代码实现RequestOriginParser接口 &#xff0c;注意是要实现com.alibaba.csp.sentinel.adapter.servlet.callback.RequestOriginParser 接口&#xff0c;别搞错接口了。 MyRequestOriginParser.java package com.codex.terry.sentinel.origin;import com.ali…

STM32mp157aaa按键中断实验

效果图&#xff1a; 源码&#xff1a; #include "key.h" void hal_key1_rcc_gpio_init() {// 使能GPIOF组RCC->MP_AHB4ENSETR | (0x1 << 5);// 设置引脚位输入模式GPIOF->MODER & (~(0X3 << 18));GPIOF->MODER & (~(0X3 << 16))…

当Matplotlib遇见SciencePlots

分享一个Matplotlib扩展工具SciencePlots&#xff0c;一行代码绘制science、nature、ieee等要求的图形。 安装 安装SciencePlots # 直接从PyPI安装 pip install SciencePlots 安装latex 如果latex未安装&#xff0c;会报错&#xff1a;RuntimeError: Failed to process st…

【QT开发】乒乓球碰撞反弹demo

在编写代码时&#xff0c;无意弄出来了一个这个东西&#xff0c;觉得挺有意思的记录一下&#xff0c;类似乒乓球在矩形内一直运动碰撞反弹demo 头文件 #ifndef MYPROJECT_H #define MYPROJECT_H#include <QMainWindow> #include <QPainter> #include "form.…

【区块链+基础设施】国家健康医疗大数据科创平台 | FISCO BCOS应用案例

在医疗领域&#xff0c;疾病数据合法合规共享是亟待解决的难题。一方面&#xff0c;当一家医院对患者实施治疗后&#xff0c;若患者转到其 他医院就医&#xff0c;该医院就无法判断诊疗手段是否有效。另一方面&#xff0c;医疗数据属于个人敏感数据&#xff0c;一旦被泄露或被恶…

前端开发中的常见问题及解决方法

前端开发是一个充满挑战和乐趣的领域。然而&#xff0c;在开发过程中&#xff0c;开发者常常会遇到各种各样的问题。本文将介绍一些前端开发中常用或者经常遇到的问题&#xff0c;并提供相应的解决方法&#xff0c;帮助你提高开发效率和解决问题的能力。 一. 页面布局问题 问题…