因为不确定网站是否也可以作为原创工具发表，所以发到编程语言区。有知道的小伙伴帮忙解答下。
今天要讲的这个是一个基于 Node Express 网页解谜游戏的开发框架：Online Puzzle。曾经使用这个框架制作的网页游戏有摸鱼大闯关：https://p.hancel.org/ ，应该有些人已经玩过了。使用这个框架，现在你也可以制作自己的网页解谜游戏给别人玩拉~
食用方法
- 首先 clone 仓库或在 GitHub 上直接 Use This Template。
- 在
stages 拷贝 tpl.js 为一个新的 js 文件。文件名必须完全小写，名称与关卡地址一致。
- 填写关卡编号
stage，下一关卡路径 next ，网页标题提示 title (选填)，通关密码 passwd (选填)等等。
- 最后在
html() 中编写谜面即可完成一个关卡。
更多参数参考 tpl.js
运行方法
- 首次运行需要执行
npm run init。根据提示做项目初始化就好了。
- 然后本地调试在 VSCode 直接按下
F5 就可以了。
- 如果是要服务器运行，可以使用 pm2，执行
pm2 start -n puzzle npm -- start 即可。
代码解析
代码的核心就在于 interface/stage.js 这个文件。
其中的 load 函数会去 stage 文件夹根据路由载入对应的关卡文件：
static load(stage) {
let stage_path = path.join('..', 'stages', stage.toLowerCase());
try {
return new Stage(require(stage_path));
} catch (error) {
return null;
}
}
在 express 的 route 处，则会通过载入的关卡文件，检查跳关，更新闯关进度，最后渲染关卡。
router.get('/:stage.html', async function(req, res, next) {
let puzzle = Stage.load(req.params.stage);
// 找不到关卡文件返回 404
if (!puzzle) return next();
// 跳关检查，如果访问关卡数大于当前闯关进度+1则返回 404
if (req.session.last && puzzle.stage - req.session.last.stage > 1)
return next();
let user = new User(req.session);
let last = { url: req.url, stage: puzzle.stage < 0 ? 0 : puzzle.stage }
// 添加闯关进度
if (user.islogin) await user.addRecord(last)
if (!req.session.last || req.session.last.stage < puzzle.stage) req.session.last = last
// 关卡设定的 response 处理
if (puzzle.beforeRsp instanceof Function && await puzzle.beforeRsp(req, res)) return;
// 渲染关卡
res.render('puzzle', { config, puzzle, user: req.session.user, last: req.session.last });
});
这样，就可以通过关卡文件，单独定于谜面与谜题 Tip，可以把 Tip 通过代码隐藏到网页的不同地方，比如 Header，Js，CSS，HTML 代码中。
最后，如果你有用这个框架制作好的网页解谜游戏，欢迎分享出来，我挂到 Readme 上去。
代码仓库地址：https://github.com/imlinhanchao/puzzle_node
镜像地址：https://gitee.com/imlinhanchao/puzzle_node
| 
发表于 2023-11-22 10:48
