基于JS实现站点专属随机关卡密码的技术咨询

核心思路 #

要实现每个用户的关卡密码独立随机、无法共享，核心是在用户本地存储唯一的密码映射，或者基于用户本地唯一标识生成密码。下面是几种适合新手的方案：

方案一：使用LocalStorage（比Cookie更简单） #

LocalStorage是浏览器本地持久化存储（除非用户手动清除），操作比Cookie更直观，适合新手快速实现。

步骤： #

1. 关卡生成密码并存储
   在每个关卡的scripts.js中，当用户完成关卡时生成随机密码并存入LocalStorage：

   // level 1/scripts.js 示例：完成关卡时执行
   function onLevelComplete() {
     // 生成4位随机数字密码（可自定义规则，比如字母数字组合）
     const password = Math.floor(1000 + Math.random() * 9000).toString();
     // 用关卡名作为键，存储密码
     localStorage.setItem('level1_password', password);
     // 跳转回首页
     window.location.href = '/game/home';
   }
   

2. 首页验证密码
   在home/scripts.js中读取LocalStorage的密码，与用户输入对比：

   // home/scripts.js 示例：验证关卡1密码
   function checkLevel1Password() {
     const userInput = document.getElementById('level1-input').value;
     const storedPassword = localStorage.getItem('level1_password');
     if (userInput === storedPassword) {
       alert('验证通过！');
       // 这里可添加解锁逻辑，比如标记关卡已解锁或跳转至对应关卡
     } else {
       alert('密码错误！');
     }
   }
   

优点： #

• 无需处理Cookie的过期、路径等复杂配置
• 代码逻辑简单，易上手
• 数据存储在用户本地，每个用户的密码完全独立

方案二：基于浏览器指纹生成密码（无需存储） #

如果不想在本地存储密码，可以利用浏览器的唯一特征（如User-Agent、屏幕分辨率）生成固定密码，每个用户的特征不同，生成的密码也不同。

示例代码： #

// 生成基于浏览器特征的专属密码
function generateUniquePassword(level) {
  // 收集浏览器特征作为指纹
  const fingerprint = navigator.userAgent + window.screen.width + window.screen.height;
  // 简单哈希处理（新手简化版，无需复杂加密）
  let hash = 0;
  for (let i = 0; i < fingerprint.length; i++) {
    hash = ((hash << 5) - hash) + fingerprint.charCodeAt(i);
    hash |= 0; // 转为32位整数
  }
  // 取哈希值后4位，结合关卡标识保证不同关卡密码不同
  return Math.abs(hash + level).toString().slice(-4);
}

// 关卡完成时告知用户密码
// level 1/scripts.js
function onLevelComplete() {
  const password = generateUniquePassword(1);
  alert(`关卡1密码：${password}，请记住后返回首页验证`);
  window.location.href = '/game/home';
}

// 首页验证密码
// home/scripts.js
function checkLevel1Password() {
  const userInput = document.getElementById('level1-input').value;
  const correctPassword = generateUniquePassword(1);
  if (userInput === correctPassword) {
    alert('验证通过！');
  } else {
    alert('密码错误！');
  }
}

优点： #

• 无需本地存储，避免用户清除存储导致密码丢失
• 密码由用户自身浏览器特征决定，无法共享给他人

方案三：Cookie实现（你考虑过的方案） #

Cookie适合需要设置密码过期时间的场景，比如希望用户一段时间后需重新通关获取密码。

步骤： #

1. 设置Cookie
   在关卡完成时设置Cookie，指定路径确保首页可读取：

   // level 1/scripts.js
   function onLevelComplete() {
     const password = Math.floor(1000 + Math.random() * 9000).toString();
     // 设置Cookie：路径为/game（保证整个游戏站点可访问），有效期1天
     document.cookie = `level1_password=${password}; path=/game; max-age=86400`;
     window.location.href = '/game/home';
   }
   

2. 读取Cookie
   在首页编写工具函数读取指定Cookie：

   // home/scripts.js
   // 工具函数：根据键名读取Cookie
   function getCookie(name) {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
     if (parts.length === 2) return parts.pop().split(';').shift();
   }
   
   // 验证关卡1密码
   function checkLevel1Password() {
     const userInput = document.getElementById('level1-input').value;
     const storedPassword = getCookie('level1_password');
     if (userInput === storedPassword) {
       alert('验证通过！');
     } else {
       alert('密码错误！');
     }
   }
   

注意： #

• Cookie有4KB大小限制，存储少量密码完全够用
• 必须设置正确的path，否则首页无法读取关卡设置的Cookie

新手友好建议 #

• 优先选择LocalStorage方案，代码量最少，最容易上手
• 密码生成规则可自定义（比如字母数字混合），只要保证随机性即可
• 可在首页添加“忘记密码？重新通关获取”的提示，避免用户因遗忘密码无法验证

内容的提问来源于stack exchange，提问作者doge58426