JavaScript游戏站

queens clone — JavaScript 游戏站模板

作者 sihlecodes

开源益智游戏站，复刻LinkedIn Queens玩法，支持从截图载入地图，适合学习与二次开发。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

完整复刻 LinkedIn Queens 核心玩法，包含计时、错误检测与清空功能

支持通过 OpenCV 从游戏截图自动识别并载入地图，可读取已通关棋盘

纯原生 JavaScript 实现，无框架依赖，便于学习与修改

提供在线演示，可直接体验游戏手感

项目结构清晰，适合作为前端模块化开发的学习案例

模板详细介绍

Queens Clone 是一个用原生 HTML、CSS 和 JavaScript 构建的网页益智游戏项目，复刻了 LinkedIn 上的 Queens 游戏。它提供完整的核心玩法：放置皇冠和标记、错误检测、完成判定、清空棋盘和计时，操作手感力求接近原版。项目最大的特色是支持通过 OpenCV 从游戏截图自动识别并载入地图，甚至能读取已通关的棋盘，但无法处理带有错误标记或鼠标悬停状态的截图。

项目采用 JavaScript 模块化结构，因此不能直接双击 index.html 运行，需要借助本地 HTTP 服务器（如 Node.js 配合 Express）来启动。仓库提供了清晰的启动命令，适合想研究游戏逻辑或前端模块化开发的开发者。界面简洁，无后端依赖，部署到 GitHub Pages 即可在线体验。

需要注意的是，项目目前没有随机地图生成功能，每日谜题依赖外部截图导入，且作者明确表示自动放置 X 标记的功能尚未实现。若计划长期运营，需自行补充地图生成或题库系统。上线前建议核对许可证细节（MIT 徽章但需确认）并测试截图识别在不同设备上的准确度。

可直接运行网页游戏益智玩法

适合你的项目吗？

适用场景

想快速搭建一个可玩的益智游戏网站，用作个人项目或作品集展示
对 Queens 玩法感兴趣，希望研究其逻辑实现或在此基础上添加新功能
需要学习如何用 OpenCV 处理图像识别并集成到网页应用中

适合人群

前端开发者或游戏爱好者，想动手改造或扩展游戏功能
教育场景，用于演示 JavaScript 模块化、游戏状态管理等概念
需要离线或轻量级网页游戏解决方案的静态站点项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
需先安装 Git 和 Node.js，克隆仓库后执行 npm install 和 npm start，然后在浏览器打开 http://localhost:3050。
2
项目依赖本地 HTTP 服务器，不能直接打开 index.html。
3
截图载入功能需要浏览器支持 OpenCV.js，建议使用最新版 Chrome 或 Firefox 测试。

查看仓库使用说明