阅读 307
用electron实现宠物连连看flash小游戏

用electron实现宠物连连看flash小游戏

0 背景

从小学开始,我就很喜欢玩4399上的宠物连连看flash小游戏

然而,因为flash的安全性等问题,很多浏览器都不再支持flash。比如chrome,自 2021 年起,在任何版本的 Chrome 中,Flash 内容(包括音频和视频)都将无法再正常播放,并且从v88起完全移除Flash插件的相关代码。

不能玩了

1 解决方案

因此,我想到了,利用 Electron ,指定一个低于v88的版本的chromium,使用 Pepper Flash 插件加载钟爱的flash小游戏,以供随时娱乐^ ^。

1.1 electron原理

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。它嵌入了 Chromium 和 Node.js,允许您使用 JavaScript、HTML 和 CSS 代码创建 在Windows、 macOS和Linux上运行的跨平台应用。

按我的理解,就是利用Node.js创建一个服务,把开发者写好的网页部署到Node.js服务中,并在Chromium浏览器中打开这个网址。

1.2 主要代码

版本:项目中的electron版本为^11.4.7,chromium版本为87.0.4280.141

index.html,就只放一个宠物连连看flash小游戏。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>宠物连连看</title>
    <link rel="stylesheet" type="text/css" href="./electron/main.css" />
  </head>
  <body style="margin: 0;">
    <embed class="game" src="./electron/assets/game.swf"> </embed>
  </body>
</html>
复制代码

window.js中,实现创建窗口方法,打开index.html

  
const { BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    webPreferences: {
      plugins: true,
    }
  });

  win.loadFile('index.html');
  const contents = win.webContents;
  contents.on("did-finish-load", () => {
    contents.insertCSS("html, body { height: 100vh; width: 100vw; }");
  });
}

module.exports = createWindow;
复制代码

plugins.js中,根据不同的操作系统引入不同的Pepper Flash 插件。

const getFlashPlugin = () => {
  if (process.platform === "win32") {
    if (process.arch === "x64") {
      return {
        pluginPath: "pepflashplayer64_34_0_0_164.dll",
        version: "34.0.0.164",
      };
    }

    return {
      pluginPath: "pepflashplayer32_32_0_0_363.dll",
      version: "32.0.0.363",
    };
  }

  if (process.platform === "darwin") {
    return {
      pluginPath: "PepperFlashPlayer.plugin",
      version: "30.0.0.127",
    };
  }

  return null;
};

module.exports = {
  getFlashPlugin
};
复制代码

main.js中引入plugins.jswindow.js并调用。

const { app, BrowserWindow } = require('electron');
const path = require('path');
const { getFlashPlugin } = require('./plugins'); 
const createWindow = require('./window'); 

// 获得系统里面flash插件的位置
const flashPlugin = getFlashPlugin();
let flashFlag = false;
if (flashPlugin) {
  const { pluginPath, version } = flashPlugin;
  app.commandLine.appendSwitch("ppapi-flash-path", path.join(__dirname, 'assets', pluginPath));
  app.commandLine.appendSwitch("ppapi-flash-version", version);
  flashFlag = true;
}

app.whenReady().then(() => {
  if (!flashFlag) {
    console.error('get flash plugin error');
  }
  console.log('chrome version: ', process.versions.chrome); //  Chromium v88 以上版本(包含 v88)内核的浏览器不再支持 Flash
  createWindow();
});

// 如果没有窗口打开则打开一个窗口 (macOS)
app.on('activate', function () {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
});

// 关闭所有窗口时退出应用-windows--linux
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
});
复制代码

详细代码可看下面的源码。

2 源码

github仓库:github.com/seminelee/e…

只需运行简单的命令,你就能得到一个桌面版的flash小游戏应用!收获你想要的快乐!

3 最终效果

最终效果

参考

文章分类
前端
文章标签