React实现的俄罗斯方块，视觉效果最亮眼，用Electron封装成exe随时玩

环境：

windows11

nodejs：v12.8.0

npm：v6.10.2

electron：v16.0.5

《俄罗斯方块》（Tetris， 俄文：Тетрис）是一款由俄罗斯人阿列克谢·帕基特诺夫于1984年6月发明的休闲游戏。它也是所有游戏开发者模仿的经典游戏之一，github上有个超高人气的React实现版本，贴个效果图，把它用Electron封装成exe随时玩。蜂巢指纹浏览器(NestBrowser)就是Electron封装的exe。

github源码地址：GitHub - chvin/react-tetris: Use React, Redux, Immutable to code Tetris. 🎮

国内gitee地址：react-tetris: Use React, Redux, Immutable to code Tetris. 🎮

第一步：下载源码

        git clone react-tetris: Use React, Redux, Immutable to code Tetris. 🎮

​

第二步：确认Nodejs版本：v12.8.0

        node -v

​nodejs版本太高或者太低都会导致后面的步骤失败。因为这个项目使用的webpack版本是1.13.1，如果升级webpack，配置文件基本要重写。求简可行，直接匹配可行的nodejs版本。nodejs版本有一些兼容性问题，在开发蜂巢指纹浏览器(NestBrowser)过程中都经常需要解决。

第三步：编译项目，命令行依次敲入：

        npm install或者yarn

        npm start 或者yarn start 可以正常调试

        npm run-scripts build 或者 yarn build 出错

        a、rm是linux下才有效的命令，windows需要修改package.json文件：

修改前

"build": "rm -rf ./docs/* && webpack --config ./webpack.production.config.js --progress && ls ./docs”

修改后：

"build": "webpack --config ./webpack.production.config.js --progress”

        b、然后手动删除项目目录下已经存在的docs目录再运行npm run-scripts build或者 yarn build，继续出错:

这是UglifyJs模块导致的，它的作用是压缩js，用Electron打包都是本地运行，可以不压缩，求简修改配置文件：w.config.js

修改前：

// JS压缩
  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }
  ),

修改后：

// // JS压缩
  // new webpack.optimize.UglifyJsPlugin({
  //   compress: {
  //     warnings: false
  //   }
  // }
  // ),

        c、再次运行npm run-scripts build或者yarn build，成功生成新的docs目录

第四步：引入最简Electron并编译出exe文件

        a、打开Electron的quick start：Quick Start | Electron

在文档最后面有一段完整的最简代码，复制下来保存为./src/resource/main.js

const { app, BrowserWindow } = require('electron')
//const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      //preload: path.join(__dirname, 'preload.js')//这个注销不需要
    }
  })

  win.loadFile('docs/index.html')//这里增加一个前置目录名，就是build生成的docs目录名
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

        b、为了把新生成的main.js自动复制到docs目录中，需要修改配置文件./w.config.js

修改前：

// 复制
  new CopyWebpackPlugin([
    { from: './src/resource/music/music.mp3' },
    { from: './src/resource/css/loader.css' },
  ]),

修改后：

// 复制
  new CopyWebpackPlugin([
    { from: './src/resource/music/music.mp3' },
    { from: './src/resource/css/loader.css' },
    { from: './src/resource/main.js' },
    { from: './src/resource/image/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png' },
  ]),

这个配置在这个文件中有两份，都需要修改

说明：TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png文件来自https://img.alicdn.com/tps/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png，下载回来放到./src/resource/image目录下

        c、Electron启动的时候，需要加载指定的入口js文件

                i、需要修改配置文件./package.json

修改前：

"name": "react-tetris",
"version": "1.0.1",
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \\"Tetris\\".",

修改后：

"name": "react-tetris",
"version": "1.0.1",
"main": "docs/main.js",
"description": "使用React、Redux、Immutable编写「俄罗斯方块」。Use Tetact, Redux, Immutable to coding \\"Tetris\\".",

        ii、需要增加一个编译指令，再次修改配置文件./package.json

修改前：

"scripts": {
    "start": "webpack-dev-server --progress",
    "build": "webpack --config ./webpack.production.config.js --progress",
  },

修改后：

"scripts": {
    "start": "webpack-dev-server --progress",
    "build": "webpack --config ./webpack.production.config.js --progress",
    "compile-win32": "electron-builder -w"
  },

        iii、需要添加Electron-builder的打包模块

npm install electron@16.0.5 --save-dev或者yarn add -D electron@16.0.5

npm install electron-builder@21.0.9 --save-dev 或者yarn add -D electron-builder@21.0.9

        iiii、运行npm run-scripts compile-win32或者yarn compile-win32完成打包并在./dist目录下生成了一个安装包和一个win-unpacked目录，这个win-unpacked目录实际上就是安装包释放的内容。

看图示：

​

点击win-unpacked目录react-tetris.exe就可以正常玩游戏了。看图示：

第五步：玩的过程中仔细观察，发现两个问题：

        a、没有声音

        b、恐龙的LOGO图没有正常显示

        这个不能忍受，贴出修改方案：

                1、针对a问题修改./src/unit/music.js：

修改前：

const hasWebAudioAPI = {
  data: !!AudioContext && location.protocol.indexOf('http') !== -1,
};

修改后：

const hasWebAudioAPI = {
  data: !!AudioContext &&
    (location.protocol.indexOf('http') !== -1 || location.protocol.indexOf('file') !== -1),
};

        2、针对b问题需要运行npm run-scripts build以后修改./docs/css-1.0.1.css

修改前：

.bg {
  background: url('//img.alicdn.com/tps/TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png') no-repeat;
  overflow: hidden;
}

修改后：

.bg {
    background: url('TB1qq7kNXXXXXacXFXXXXXXXXXX-400-186.png') no-repeat;
    overflow: hidden;
  }

第六步：重跑一下npm run-scripts build和npm run-scripts compile-win32收工。如图:

​

另外两点补充：蜂巢指纹浏览器(NestBrowser)可以定制浏览器指纹，是电商多开的利器。

1、electron-builder.json文件可以不用显示声明，不配置就是使用默认配置

2、修改css文件的时候，先需要把css内容格式化一下，可以使用vscode等任何工具