一、proxx小游戏介绍

1.1 proxx小游戏简介

一款类似扫雷的游戏，玩法和规则和扫雷基本上一样，这里是排除未知块背后的黑洞。

1.2 开源地址

github地址：https://github.com/GoogleChromeLabs/proxx

二、本地环境介绍

2.1 本地环境规划

本次实践为个人测试环境，操作系统版本为centos7.6。

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境；
2.在centos7.6环境下部署proxx扫清黑洞小游戏。

三、检查本地环境

3.1 检查本地操作系统版本

检查本地操作系统版本

[root@jeven ~]# cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)

3.2 检查系统内核版本

检查系统内核版本

[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64

四、部署Node.js环境

4.1 下载Node.js安装包

在/root目录下，下载Node.js安装包，下载版本为v16.17.0。

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

4.2 解压Node.js安装包

在/root目录下，解压Node.js安装包

tar -xvJf node-v16.17.0-linux-x64.tar.xz

4.3 链接二进制文件

将 /root/node-v16.17.0-linux-x64/bin/下的二进制文件链接到/usr/local/bin下

ln -s  /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm

4.4 配置环境变量

• 在/etc/profile文件中，新增以下两行：

vim /etc/profile

export NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/

• 使变量生效

source /etc/profile

4.5 查看node版本

查看node版本

[root@jeven ~]#  npm -v
8.15.0
[root@jeven ~]# node -v
v16.17.0

五、下载proxx源码包

5.1 下载proxx源码包

github下载proxx小游戏源码包

git clone https://github.com/GoogleChromeLabs/proxx.git

5.2 查看源码目录

查看proxx小游戏源码目录

[root@jeven ~]# ls ~/proxx/
CONTRIBUTING.md        lib      package.json       prettier.config.js  rollup.config.js      src
generic-tsconfig.json  LICENSE  package-lock.json  README.md           sizereport.config.js  tslint.json

[root@jeven ~]# tree -L 2 ~/proxx/
/root/proxx/
├── CONTRIBUTING.md
├── generic-tsconfig.json
├── lib
│   ├── add-files-plugin.js
│   ├── asset-plugin.js
│   ├── asset-transform-plugin.js
│   ├── bundle-utils.js
│   ├── chunk-name-plugin.js
│   ├── consts-plugin.js
│   ├── create-html.js
│   ├── css-module-types.js
│   ├── ejs-asset-plugin.js
│   ├── glsl-plugin.js
│   ├── loadz0r-loader.ejs
│   ├── nebula-safe-dark.js
│   ├── render-static.js
│   ├── resource-list-plugin.js
│   └── simple-ts.js
├── LICENSE
├── package.json
├── package-lock.json
├── prettier.config.js
├── README.md
├── rollup.config.js
├── sizereport.config.js
├── src
│   ├── assets
│   ├── _headers
│   ├── index.ejs
│   ├── main
│   ├── manifest.ejs
│   ├── missing-types.d.ts
│   ├── shared-types
│   ├── sw
│   ├── utils
│   └── worker
└── tslint.json

8 directories, 29 files

六、部署proxx扫清黑洞小游戏

6.1 进入proxx源码目录

进入proxx源码目录

[root@jeven ~]# cd proxx/
[root@jeven proxx]#

6.2 设置npm镜像源

npm设置国内淘宝镜像源

npm config set registry https://registry.npmmirror.com

6.3 安装依赖

安装WBO项目的依赖

npm install 

6.4 构建项目

执行以下命令，构建项目。

npm run build

6.5 启动proxx服务

启动proxx服务，启动小游戏，也可以将./dist目录放在例如httpd服务的网站根目录下进行访问。

npm run serve

6.6 访问proxx扫清黑洞小游戏

访问地址：http://192.168.3.166:8080/no-prerender.html，将IP换为自己服务器IP地址。

七、试玩proxx扫清黑洞小游戏

游戏规则：

• 开局可以设置游戏难度、宽/高和黑洞数量。
• 点击一个未知块后，可能会出现数字或者黑洞。
• 如果出现数字，则该数字代表周围的黑洞数量。
• 如果点到黑洞，则游戏结束。
• 左上角显示的是未知块的数量，右上角是耗费/最佳时间。
• 可以切换到标记模式。