@TOC
一、proxx小游戏介绍
1.1 proxx小游戏简介
一款类似扫雷的游戏，玩法和规则和扫雷基本上一样，这里是排除未知块背后的黑洞。
1.2 开源地址
github地址：https://github.com/GoogleChromeLabs/proxx
二、本地环境介绍
2.1 本地环境规划
本次实践为个人测试环境，操作系统版本为centos7.6。
hostname | 本地P地址 | 操作系统版本 | 内核版本 | node版本 |
|---|---|---|---|---|
jeven | 192.168.3.166 | centos 7.6 | 3.10.0-957.el7.x86_64 | v16.17.0 |
2.2 本次实践介绍
1.本次实践部署环境为个人测试环境；
2.在centos7.6环境下部署proxx扫清黑洞小游戏。
三、检查本地环境
3.1 检查本地操作系统版本
代码语言：shell复制检查本地操作系统版本
[root@jeven ~]# cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)3.2 检查系统内核版本
代码语言：shell复制检查系统内核版本
[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64四、部署Node.js环境
4.1 下载Node.js安装包
代码语言：shell复制在/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安装包
代码语言：shell复制在/root目录下，解压Node.js安装包
tar -xvJf node-v16.17.0-linux-x64.tar.xz
在这里插入图片描述4.3 链接二进制文件
代码语言：shell复制将 /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/npm4.4 配置环境变量
- 在/etc/profile文件中，新增以下两行：
vim /etc/profileexport NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/- 使变量生效
source /etc/profile4.5 查看node版本
代码语言：shell复制查看node版本
[root@jeven ~]# npm -v
8.15.0
[root@jeven ~]# node -v
v16.17.0五、下载proxx源码包
5.1 下载proxx源码包
代码语言：shell复制github下载proxx小游戏源码包
git clone https://github.com/GoogleChromeLabs/proxx.git
在这里插入图片描述5.2 查看源码目录
代码语言：shell复制查看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源码目录
代码语言：shell复制进入proxx源码目录
[root@jeven ~]# cd proxx/
[root@jeven proxx]#6.2 设置npm镜像源
代码语言：shell复制npm设置国内淘宝镜像源
npm config set registry https://registry.npmmirror.com6.3 安装依赖
代码语言：shell复制安装WBO项目的依赖
npm install 
在这里插入图片描述6.4 构建项目
代码语言：shell复制执行以下命令，构建项目。
npm run build6.5 启动proxx服务
代码语言：shell复制启动proxx服务，启动小游戏，也可以将./dist目录放在例如httpd服务的网站根目录下进行访问。
npm run serve
在这里插入图片描述6.6 访问proxx扫清黑洞小游戏
访问地址：http://192.168.3.166:8080/no-prerender.html，将IP换为自己服务器IP地址。
在这里插入图片描述七、试玩proxx扫清黑洞小游戏
在这里插入图片描述游戏规则：
- 开局可以设置游戏难度、宽/高和黑洞数量。
- 点击一个未知块后，可能会出现数字或者黑洞。
- 如果出现数字，则该数字代表周围的黑洞数量。
- 如果点到黑洞，则游戏结束。
- 左上角显示的是未知块的数量，右上角是耗费/最佳时间。
- 可以切换到标记模式。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
