在线红白机游戏

基于vue3 + express的在线FC(NES)🎮游戏项目。

功能

在线玩FC游戏，一共约400个游戏，全中文版。

前端框架：vue3，后端框架：express。

所有游戏资料、图片提取自OfflineList。

• 设置主题色
• 黑暗模式
• 有限的支持移动端
• 游戏分类
• 搜索
• 支持本地ROM
• 支持双人
• 支持保存和读取，每个游戏默认提供三个存档位。
• 自定义按键
• 支持手柄
• 截图
• 全屏
• 支持PWA模式

>

技术栈

前端

• 框架：vue3
• 构建工具：vite
• FC模拟器组件：taiyuuki/nes-vue
• 组件库：element-plus
• 类型检测：typescript
• 前后端交互：axios
• CSS预编译：scss
• 代码格式：eslint stylelint
• vue3生态
  • vue-router
  • pinia
    • pinia-plugin-persistedstate：pinia持久化插件
• vite插件
  • unocss：CSS原子类生产
  • unplugin-auto-import：自动导入API
  • unplugin-vue-components：自动导入组件
  • vite-plugin-pages：基于文件自动创建路由
  • vite-plugin-vue-layouts：自动创建根路由
  • vite-plugin-pwa：PWA模式

后端

• 框架：express
• 数据库：sqlite3
• 数据库驱动： Sequelize
• 类型检测：typescript
• 代码格式：eslint
• 打包：tsup

接口详情：nes-web/server

静态资源

像素字体：SolidZORO/zpix-pixel-font

项目运行

项目目录

nes-web
   ├─client 前端
   └─server 后端

前端和后端需要分别安装依赖，前端包管理器yarn，后端包管理器pnpm。

后端需要的游戏ROM、图片等静态资源，我单独打包放在release里，下载、解压后将roms文件夹放在server文件夹内即可。

启动服务端

安装依赖

pnpm install

node

用node运行dist目录下的index.js即可。

node dist/index.js

pm2

推荐使用pm2：

安装pm2

npm i pm2 -g

启动服务

pm2 start dist/index.js --watch

前端运行

安装依赖

yarn install

运行

yarn dev