Electron[桌面端开发]:网页版街机游戏套壳,开启node文件读写

NO.1

网页版街机游戏

以下是Electron桌面端街机游戏

参考文章

<<树莓派4B（Raspberry Pi For NAS）：EmulatorJS在线网页街机游戏>>

之前docker部署的项目都尝试有web端优先

但是在使用web,chrome扩展后,发现electron桌面版才有更多的能力和权限

NO.2

Electron优点

本文仅以web街机作为对比

不需要单独开启http server服务,也就是不需要买服务器(省钱)
不需要单独买域名(省钱)
不需要给域名配置https买ssl证书(省钱)
可以单独设置安全策略(不需要学习Nginx等)
可以本地文件读写(nodeJs)(为了让web街机可以拖拽文件,我写了PWA拦截文件流,又因为PWA仅支持https和localhost,部署繁琐)

在chrome扩展中,v3版本比v2版本限制更多

想要在chrome中使用ffmpeg.wasm是不行的,因为没有服务端允许安全策略

综上所述,更为适合的场景反而是桌面端

NO.3

Node使用

如何在html中调用node方法

首先在main.js中引入预加载脚本preload.js,这个脚本里面会定义一些node的方法以供html调用(也就是安全策略上,html代码中无法直接调用node)

preload: path.join(__dirname, ‘preload.js’),就是添加预加载脚本的作用

 const mainWindow = new BrowserWindow({
    width: 1080,
    height: 720,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    }
  })

开启页面node环境

添加下面变量,这样这个window才有node环境

nodeIntegration: true

nodeIntegrationInWorker: true

const mainWindow = new BrowserWindow({
    width: 1080,
    height: 720,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }
  })

在preload.js中定义一个node的方法,如获取当前目录

其中getDir就是定义的方法

const { contextBridge } = require('electron')
// 设置node方法和window方法通信
contextBridge.exposeInMainWorld('nodeFunc', {
  getDir: () => {
    let currentDir = process.cwd()
    console.log(`currentDir`, currentDir)
    return currentDir
  }
})

在html中调用这个node方法

因为上面定义的方法,会自动挂载到window上的nodeFunc(nodeFunc名称可以自定义)

所以直接调用window上nodeFunc的这个方法即可

let funcRes=window.nodeFunc.getDir()

可以看到控制台执行并打印了方法结果

NO.4

默认打开右侧控制台

每次打开控制台都要手动点击好几个菜单

可以设置默认打开控制台(本文默认设置打开右侧控制台)

mainWindow.webContents.openDevTools({mode:'right'});

查看console

NO.5

Tips

EmulatorJS这个项目好是好,nes游戏可以直接拖拽

但是arcade街机游戏,无法拖拽,只能在代码中指定游戏文件

所以先设置PWA在WEB上可以拖拽,后在客户端Electron设置node读写文件,实现可以拖拽

END.

公众号发送关键词加群,加入交流群

觉得本文还行，不妨顺手点赞和收藏，下期见。