每日一题、免注册、多选：Atlas式轻量网页游戏的纯前端实现

在 Hacker News 的 Show HN 栏目里，每天都有大量新项目出现，大部分看一眼就关掉了。但 Atlas 这个项目的一句话标题足够特别：like GeoGuessr but multiple choice, daily, no sign-up。这句话把产品形态、使用节奏、注册门槛一次说完了，看到它的技术人很容易追问一句：这东西到底是怎么实现的？不注册怎么保存进度？每天一题又是怎么保证不重复的？如果我也想做一款类似的轻量网页游戏，需要准备哪些东西？

先给一个明确判断：这类项目真正值得关注的不是“猜地点”这个玩法本身，而是它用三个非常克制的产品决策，把一个原本偏硬核的地理挑战游戏，做成了普通人愿意每天点开、愿意分享给朋友的小型 Web 应用。多选代替自由输入，降低了答题门槛；每日更新代替无限对局，制造了长期回访理由；免注册代替账号体系，让传播路径缩短到近乎为零。对于做前端、做独立开发、做小程序或轻应用的技术人来说，这套思路完全可以迁移到自己的题目型产品里。

这篇文章会从 Atlas 的产品形态出发，分析它的设计逻辑，再拆解实现一个同类型应用需要涉及的技术模块，最后用一段可以直接运行的 HTML + JavaScript 代码，演示一个“多选地点猜谜 + 每日一题 + localStorage 记录进度”的最小实现。读完你可以照着做，也可以把同样思路套用到成语、历史、建筑、食物等任何题目类场景中。

1. 这篇文章真正要解决的问题

先回到一个现实场景：很多开发者看到 GeoGuessr 类游戏会觉得很有意思，但想做一个类似的体验时，会在第一步就遇到成本问题。街景数据从哪来？全景图怎么加载？地图平台怎么选？如果还要做账号系统、排行榜、连续答题，开发量会迅速膨胀。结果就是，项目还没开始就已经放弃了。

Atlas 这种产品的价值恰恰在于：它用“多选题”这个动作，把地理猜谜从“重度体验”降级成了“轻量问答”。用户不再需要拖动地图、放大街景、估算坐标，只需要看着一张图片和几个选项，做一道选择题。这个改变看似很小，实际影响非常大。它意味着数据来源可以只是普通图片而不是全景街景，地图 SDK 也可以完全不用，整个应用甚至不需要后端也能跑。

所以这篇文章要解决的问题不是“如何复制一个 GeoGuessr”，而是“如何用最小的技术成本，做出一款有传播能力的题目型 Web 应用”。

谁最应该读这篇文章？第一，对地理、旅行、地图类内容感兴趣，想做站点或小游戏的前端开发者。第二，想把某个知识领域做成每日答题产品的独立开发者。第三，想理解“免注册应用如何保存状态”“每日内容如何保证稳定变化”这类工程问题的技术读者。如果你只是想要一个能直接部署的成品模板，这篇文章也提供了完整代码。

2. Atlas 是什么：一个标题拆出三个产品决策

Show HN 是 Hacker News 上个人开发者展示自己作品的固定栏目。Atlas 这个项目标榜自己是 GeoGuessr 的变体，但它的标题没有用“更好的地图”“更强的技术”这类说法，而是用了三个用户能直接感知的词：multiple choice、daily、no sign-up。这三个词分别代表了三个产品决策。

第一，multiple choice。传统 GeoGuessr 是把用户扔到世界的某个角落，让他判断自己在哪里，然后在地图上点击猜测位置，越接近得分越高。这个体验很有趣，但它的门槛很高。用户要有基本的地理直觉，要能识别地域性建筑、植被、路牌、文字，还要适应全景视角。如果对目的地不熟悉，挫败感会很强烈。改成多选题之后，游戏目标从“在世界地图上定位”变成“根据线索选择正确地名”。玩家不再需要理解经纬度和视角，只需要调用自己的知识储备和观察力。

第二，daily。每日一题不是限制用户，而是在帮用户建立访问习惯。很多小游戏的问题是“内容太多反而不知道从哪开始”，或者玩了一次就再也不会回来。每日一题通过时间维度制造稀缺感。今天错过就没了，明天又会有一个新的题目。这种机制在 Wordle 等游戏里已经被验证得非常充分，它让分散的用户在同一时间面对同一道题，形成话题集中点。

第三，no sign-up。这一个决策可能是产品能传播起来的最关键因素。注册是转化率最大的杀手。用户进入页面如果先看到注册表单，心理上就已经开始计算成本。免注册意味着用户从点开链接到完成第一次答题，中间没有强制跳转、没有邮箱验证、没有密码确认。路径越短，分享率越高。

从一个产品比较的角度看，过去常见的地理猜谜应用和 Atlas 代表的轻量题目应用之间存在明显差异。

这里有一个容易被误读的点：多选题不是玩法的退化，而是把乐趣从“空间推理”转移到了“视觉识别和知识判断”。它对大众更友好，也更适合在今天的信息流环境中快速传播。

3. 为什么这种“轻量题目型网页游戏”值得关注

从技术开发者的视角看，Atlas 这类产品背后有一个明显的趋势：很多小而美的 Web 游戏正在把后端复杂度压缩到极致，甚至完全去掉后端。过去做一个问答游戏需要数据库、账号体系和后端接口，现在完全可以用静态托管加本地存储来实现。

传统方案里，用户数据必须由服务端保存。用户登录后，服务器要记录他的答题历史、正确率、连续打卡天数。至少需要一个数据库、一组用户认证接口、一组业务接口。遇到并发需求还要做缓存。为了一个轻量级答题产品搭建完整后端，投入产出比并不高。Atlas 这类 no-sign-up 产品选择绕开整个体系，把用户状态放在浏览器本地。localStorage 虽然不跨设备，但足以支撑大部分单人答题场景。

这类产品的另一个技术价值在于它把“每日更新”变成了一种前端可控的确定性任务。服务端每天发布题目的做法需要定时任务，前端根据日期生成题目则要简单得多。只要题目库足够大，再配合一个稳定的哈希函数，就可以让每一天固定对应一道题。用户在任意时间打开应用，看到的都是属于当天的题目。

再看部署和分发。静态页面意味着可以放到任何静态站点托管服务上，不需要维护服务器，也不需要处理用户数据隐私合规的复杂问题。用户在完成答题后，把结果复制到聊天工具里，其他用户点击链接即可开始挑战。整个信息传播链里没有注册、没有短信验证码、没有第三方登录授权，传播阻力降到了历史最低点。

从独立开发的角度看，这个模式还有一层价值：它把“内容运营”和“代码开发”脱耦了。代码只需要维护一个固定的题目库和一套渲染逻辑，新内容就是向库中增加数据。也就是说，在 Atlas 类产品里，编辑器才是真正的增长引擎，开发者能集中精力做好答题体验，剩下的交给内容质量。

4. 实现一个 Atlas 类网页应用需要拆解的技术模块

由于手头没有 Atlas 的实际源码，下面这部分不是对某个特定项目的逐行分析，而是根据这类“图片多选 + 每日一题 + 免注册”产品的常见实现方式，给出技术模块拆解。如果你自己动手实现，大概率也会落到这些模块上。

4.1 题目数据的组织方式

题目是整个产品的地基。一条典型的题目数据至少需要包含图片地址、答项列表、正确答案索引、文字线索，以及用于展示和分享的名称信息。如果需要未来扩展地图模式，还可以预留给坐标字段，但最小版本并不需要。

一个合理的 JSON 结构长这样。

{ "id": "temple-of-heaven", "title": "北京天坛", "image": "https://example.com/images/temple-of-heaven.jpg", "hint": "明清两代皇家祭天场所，标志建筑是祈年殿。", "options": ["故宫", "北京天坛", "曲阜孔庙", "西安鼓楼", "沈阳故宫"], "answer": 1 }

这里要注意两个容易出错的地方。第一，options里的干扰项不是越多越好。选项太多会加重阅读负担，对每天一题的产品来说，四个到六个选项通常最合适。第二，干扰项要有迷惑性，不能明显错误。想要让玩家有“不确定但觉得合理”的思考过程，就需要把选项控制在知识相关的范围内。

4.2 每日题目的稳定性生成

很多人的第一反应是：“每日一题很容易，从题库里随机取一道就行。”但实际上，随机在浏览器里是不可控的，刷新页面题目就会变化。如果你希望所有人都能在同一天看到同一道题，就需要一个基于日期字符串的确定性算法。

具体做法是，先用当前日期生成一个类似于2026-05-27的字符串，然后对这个字符串做一次稳定哈希，再用哈希值对题库长度取模，得到当天的题目索引。这个过程的优点是不需要后端。只要题库内容没有变化，任何人在同一天访问，都会得到同一道题。

这里有几个细节。时区会直接影响“今天”的定义。如果使用本地时间生成日期，东八区和 UTC 或者美国西海岸用户看到的“今天”会不同。对于面向全球用户的产品，最好统一使用 UTC 日期或者指定某个目标时区。如果是面向国内用户的小游戏，使用本地日期问题不大，但仍建议在工作区里明确规定，避免以后因为时区产生不同步。

4.3 免登录下的用户状态保存

免注册最大的技术问题是如何记住用户今天是否答过题以及他连续答对了几天。最简单的方案是把状态写入 localStorage。每次答题结束后，把当天的日期、答题结果、累计答题次数和连续天数序列化后保存。

localStorage 能存字符串、结构简单、同步读取，非常适合这类小游戏。但它的边界同样明显：用户清空浏览器数据后记录丢失，换设备后记录不可同步，隐身模式下可能无法持久保存。所以在产品设计上，不应让 localStorage 承担账号系统才应该承担的重任。它适合记录单机状态，不适合做跨端排行榜。

如果想要更轻的跨设备回访，可以使用 URL 参数分享当前日期和题目编号。分享文案里带上日期参数后，朋友打开链接就能直接进入当天的题目，而不必经过首页跳转。这种方式比登录状态更有利于传播。

4.4 分享链路与静态部署

分享是免注册产品的增长来源。实现分享并不复杂，只需要在答题结束后生成一段简短文本，包含日期、题目名称和用户结果。用户点击复制，然后粘贴到社交平台即可。为了让这段文本看起来像“内容卡片”，可以给它一个固定的文本模板。

静态部署是这个模式的收尾。整个应用是 HTML、CSS、JavaScript 和一组图片，没有动态请求，所以可以部署到任何静态资源托管服务上。图片走 CDN，页面走 CDN，用户打开页面的速度就容易得到保证。

5. 从零实现一个“多选地点猜谜”的最小 Demo

在理解了上面的模块后，下面我用一个单文件实现最小可运行的版本。为了便于复制，整个 Demo 只有index.html，题目和逻辑都在文件内部。因为是示例，图片使用了随机占位图服务，不要把占位图当作真实地点图片。正式使用时，每一道题都要配一张有授权或版权合规的地点照片。

5.1 目录结构与运行工具

先准备好目录，可用如下命令。

mkdir atlas-demo cd atlas-demo # 在 atlas-demo 中创建 index.html，内容见 5.2 python3 -m http.server 8000

如果本机没有 Python 3，也可以使用 Node.js 生态的静态服务工具，比如npx serve。启动后浏览器访问http://127.0.0.1:8000即可。

5.2 前端完整代码

<!-- index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Atlas Demo - 每日地点挑战</title> <style> body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: #f5f7fa; color: #1f2329; } .container { max-width: 720px; margin: 32px auto; background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } h1 { font-size: 24px; margin: 0 0 4px; } .subtitle { color: #656d76; font-size: 14px; margin: 0 0 20px; } .hint { background: #fff8c5; border-radius: 8px; padding: 8px 12px; font-size: 14px; margin-bottom: 14px; } .media { margin-bottom: 14px; } .media img { width: 100%; height: auto; border-radius: 12px; display: block; background: #eaeef2; } .fallback { display: flex; align-items: center; justify-content: center; min-height: 160px; background: #eaeef2; border-radius: 12px; color: #57606a; font-size: 14px; } .clue { margin: 0 0 16px; padding: 12px; background: #f6f8fa; border-radius: 8px; line-height: 1.6; } .options { display: grid; gap: 10px; margin-bottom: 16px; } .options label { display: block; padding: 12px 14px; border: 1px solid #d0d7de; border-radius: 10px; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .options label:hover { background: #f6f8fa; } .options input { margin-right: 8px; } button { border: none; border-radius: 10px; padding: 12px 18px; background: #1f883d; color: #ffffff; font-size: 15px; cursor: pointer; } button:hover { background: #1a7f37; } button:disabled { opacity: 0.6; cursor: not-allowed; } button.secondary { background: #0969da; margin-top: 12px; } button.secondary:hover { background: #0b57b5; } .feedback { margin: 16px 0 0; font-weight: 600; line-height: 1.5; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0 0; } .stats div { background: #f6f8fa; border-radius: 8px; padding: 10px; text-align: center; } .stats dt { font-size: 12px; color: #656d76; } .stats dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; } </style> </head> <body> <main class="container"> <h1>每日地点挑战</h1> <p class="subtitle">Atlas Demo：多选题版地点猜谜，无需注册</p> <div id="previewHint" class="hint" style="display: none;"> 预览模式：当前展示的是 URL 参数 date 指定的题目，不会写入统计。 </div> <section id="questionPanel"> <div class="media"> <img id="locationImage" alt="待猜地点图片" onerror="handleImageError()" /> <div id="imageFallback" class="fallback" style="display: none;"> 图片加载失败，请根据下方文字线索作答 </div> </div> <p id="clue" class="clue"></p> <form id="quizForm"> <div id="options" class="options"></div> <button id="submitBtn" type="submit">提交答案</button> </form> <div id="feedback" class="feedback"></div> <button id="copyBtn" class="secondary" style="display: none;" type="button"> 复制挑战结果 </button> </section> <section id="resultPanel" style="display: none;"> <h2>今日已完成</h2> <p id="todayResultText" class="feedback"></p> <div class="stats"> <div> <dt>累计参与</dt> <dd id="statPlayed">0</dd> </div> <div> <dt>累计正确</dt> <dd id="statCorrect">0</dd> </div> <div> <dt>连续打卡</dt> <dd id="statStreak">0</dd> </div> <div> <dt>历史最佳</dt> <dd id="statBestStreak">0</dd> </div> </div> <button id="copyBtnOnResult" class="secondary" type="button"> 复制挑战结果 </button> </section> </main> <script> // 示例题库。正式场景中，image 应替换为真实地点图片。 // 当前使用 picsum.photos 的随机图片，仅用于演示页面机制。 const QUESTIONS = [ { city: "北京天坛", hint: "始建于明永乐年间，是明清两代皇帝祭天祈谷的场所，标志性建筑为祈年殿。", image: "https://picsum.photos/seed/temple-of-heaven/800/450", options: ["故宫", "北京天坛", "曲阜孔庙", "西安鼓楼", "沈阳故宫"], answer: 1 }, { city: "意大利罗马斗兽场", hint: "古罗马时期建造的大型椭圆形竞技场，可容纳数万观众，位于意大利首都。", image: "https://picsum.photos/seed/colosseum/800/450", options: ["西班牙塞维利亚斗牛场", "法国尼姆竞技场", "意大利罗马斗兽场", "希腊雅典卫城", "土耳其以弗所"], answer: 2 }, { city: "日本东京塔", hint: "位于日本东京，是一座红白相间的电波塔，灵感来自埃菲尔铁塔。", image: "https://picsum.photos/seed/tokyo-tower/800/450", options: ["日本东京塔", "日本晴空塔", "中国广州塔", "法国埃菲尔铁塔", "美国西雅图太空针塔"], answer: 0 }, { city: "澳大利亚悉尼歌剧院", hint: "位于悉尼港畔，白色贝壳形屋顶是世界著名的建筑符号之一。", image: "https://picsum.photos/seed/sydney-opera/800/450", options: ["丹麦哥本哈根歌剧院", "澳大利亚悉尼歌剧院", "英国伦敦塔桥", "美国纽约自由女神像", "阿联酋迪拜帆船酒店"], answer: 1 } ]; const STORAGE_KEY = "atlas-demo:v1"; const urlParams = new URLSearchParams(window.location.search); const todayKey = formatDateKey(new Date()); const requestedDate = urlParams.get("date") || ""; const previewDate = /^\\d{4}-\\d{2}-\\d{2}$/.test(requestedDate) ? requestedDate : ""; const isPreview = Boolean(previewDate && previewDate !== todayKey); const currentKey = previewDate || todayKey; const questionPanel = document.getElementById("questionPanel"); const resultPanel = document.getElementById("resultPanel"); const previewHint = document.getElementById("previewHint"); let latestResult = null; if (isPreview) { previewHint.style.display = "block"; } function defaultState() { return { lastPlayedDate: "", lastResult: null, playedCount: 0, correctCount: 0, streak: 0, bestStreak: 0 }; } function loadState() { try { const raw = localStorage.getItem(STORAGE_KEY); if (!raw) return defaultState(); const parsed = JSON.parse(raw); return Object.assign(defaultState(), parsed); } catch (error) { return defaultState(); } } function saveState(state) { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (error) { // localStorage 不可用时不阻塞页面 } } function formatDateKey(date) { const y = date.getFullYear(); const m = String(date.getMonth() + 1).padStart(2, "0"); const d = String(date.getDate()).padStart(2, "0"); return y + "-" + m + "-" + d; } function addDays(dateKey, delta) { const parts = dateKey.split("-").map(Number); const date = new Date(parts[0], parts[1] - 1, parts[2]); date.setDate(date.getDate() + delta); return formatDateKey(date); } function hashSeed(text) { let hash = 0; for (let i = 0; i < text.length; i++) { hash = (hash << 5) - hash + text.charCodeAt(i); hash = hash | 0; } return Math.abs(hash); } function getTodayQuestion() { const seedText = "atlas-demo:" + currentKey; const index = hashSeed(seedText) % QUESTIONS.length; return QUESTIONS[index]; } function handleImageError() { const img = document.getElementById("locationImage"); const fallback = document.getElementById("imageFallback"); img.style.display = "none"; fallback.style.display = "flex"; } function renderQuestion(question) { const img = document.getElementById("locationImage"); img.src = question.image; img.alt = "猜一猜这是哪里"; document.getElementById("clue").textContent = "文字线索：" + question.hint; const optionsDiv = document.getElementById("options"); optionsDiv.innerHTML = ""; question.options.forEach(function (option, index) { const label = document.createElement("label"); const radio = document.createElement("input"); radio.type = "radio"; radio.name = "answer"; radio.value = String(index); label.appendChild(radio); label.appendChild(document.createTextNode(option)); optionsDiv.appendChild(label); }); } function renderStats(state) { document.getElementById("statPlayed").textContent = state.playedCount; document.getElementById("statCorrect").textContent = state.correctCount; document.getElementById("statStreak").textContent = state.streak; document.getElementById("statBestStreak").textContent = state.bestStreak; } function buildResultText(result) { if (!result) return ""; const status = result.correct ? "答对" : "答错"; return [ "Atlas Demo 每日地点挑战", "日期：" + result.date, "地点：" + result.city, "结果：" + status ].join("\\n"); } async function copyText(text) { try { await navigator.clipboard.writeText(text); return true; } catch (error) { const textarea = document.createElement("textarea"); textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand("copy"); textarea.remove(); return true; } } function showResult(result) { latestResult = result; document.getElementById("todayResultText").textContent = "今日地点是：" + result.city + "，你" + (result.correct ? "答对了" : "答错了") + "。"; document.getElementById("copyBtnOnResult").style.display = "inline-block"; } function init() { const state = loadState(); if (!isPreview && state.lastPlayedDate === currentKey && state.lastResult) { questionPanel.style.display =