查看源码 · 地球Online

关于地球Online

本系统是一款基于现代 Web 技术栈构建的玩家行为度量与成就追踪系统，旨在提供高性能、低延迟的数据可视化方案。

核心特色

海量数据动态渲染，支持 999+ 成就卡片无缝无卡顿加载。
全动态主题响应系统，完美适配深色、波浪与浅色视觉环境。
轻量化前端架构，纯原生高效交互，拒绝冗余依赖。

技术栈架构

纯前端架构

零后端依赖，数据存储于浏览器本地

原生 JavaScript

无框架依赖，极致加载性能

LocalStorage

用户数据本地持久化存储

Modern CSS

基于硬件加速的毛玻璃与响应式布局

快速开始

# 克隆开源仓库
git clone https://github.com/L0r3Seeker/Earth-Online.git

# 直接打开
直接在浏览器中打开 index.html 即可使用

# 或使用本地服务器
python -m http.server 8000
# 然后访问 http://localhost:8000

// 地球Online 玩家成就系统 - 纯前端版
// 数据存储于浏览器 localStorage，零后端依赖

const STORAGE_KEY = 'earthol_completed';
const SLOGANS = [
    "你的一生，皆是成就。",
    "把平凡的日子，酿成发光的勋章",
    "每一步都算数，每一刻都值得铭记",
    "你走过的路，终将成为你的徽章",
    "人生这场游戏，成就由你定义",
    "活着，就是不断解锁的过程",
    "世界是地图，你是唯一的玩家",
    "每一刻，都是成就",
    "人生即成就",
    "你的故事，你的勋章",
    "把时光穿成串，每一颗都闪亮",
    "在名为人生的游戏里，收集所有高光时刻"
];

function loadCompleted() {
    try {
        const data = localStorage.getItem(STORAGE_KEY);
        return data ? new Set(JSON.parse(data)) : new Set();
    } catch (e) {
        return new Set();
    }
}

function saveCompleted(ids) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify([...ids]));
}

function toggleAchievement(id) {
    const completed = loadCompleted();
    if (completed.has(id)) {
        completed.delete(id);
    } else {
        completed.add(id);
    }
    saveCompleted(completed);
    return completed.has(id);
}

关键代码解析

1. 本地数据持久化

function loadCompleted() {
    try {
        const data = localStorage.getItem(STORAGE_KEY);
        return data ? new Set(JSON.parse(data)) : new Set();
    } catch (e) {
        return new Set();
    }
}

架构提示

使用 localStorage 存储用户已解锁的成就 ID，数据完全保存在用户本地浏览器中，换设备或清除浏览器数据会丢失。采用 Set 数据结构实现 O(1) 时间复杂度的存在性校验。

2. 成就切换逻辑

function toggleAchievement(id) {
    const completed = loadCompleted();
    if (completed.has(id)) {
        completed.delete(id);
    } else {
        completed.add(id);
    }
    saveCompleted(completed);
    return completed.has(id);
}

架构提示

纯前端切换，无需网络请求，即时响应。切换后立即更新本地存储并同步 UI 状态。

3. 筛选与搜索

function filterAchievements(filter, search, sort) {
    let result = [...allAchievements];
    if (search) {
        const s = search.toLowerCase();
        result = result.filter(a =>
            a.title.toLowerCase().includes(s) ||
            a.description.toLowerCase().includes(s)
        );
    }
    // 按筛选条件过滤...
    return result;
}

架构提示

搜索统一转小写，避免大小写匹配差异；筛选与搜索可叠加使用，实现精准的数据过滤。全部在客户端完成，零服务器开销。

4. SVG 图标生成系统

const SVG_COLORS = {
    gold:   ["#FFD700", "#FFA500", "#B8860B"],
    silver: ["#C0C0C0", "#A9A9A9", "#808080"],
    copper: ["#CD7F32", "#B87333", "#8B4513"],
};

function generateSVG(iconName, rarity = 'silver') {
    const [c1, c2, c3] = SVG_COLORS[rarity] || SVG_COLORS.silver;
    const pattern = SVG_PATTERNS[iconName] || SVG_PATTERNS.star;
    return pattern.replace(/{c1}/g, c1)
                  .replace(/{c2}/g, c2)
                  .replace(/{c3}/g, c3);
}

架构提示

通过模板占位符替换颜色，实现"一套图案 + 多套配色"的灵活组合，确保图标系统与 .exe 版本完全一致。

github-site/
├── index.html              # 主页面：成就殿堂
├── source.html             # 源码页：介绍 / 源码 / 解析
├── cooperation.html        # 技术服务页
└── static/
    ├── css/
    │   └── style.css       # 样式文件（简洁渐变主题）
    ├── js/
    │   ├── app.js          # 前端交互（筛选 / 搜索 / 切换）
    │   ├── svg-icons.js    # SVG 图标系统
    │   └── background.js   # Canvas 粒子背景动画
    └── data/
        ├── achievements.json # 成就数据
        └── slogans.txt       # 标语列表

成就数据结构

单条原始成就数据采用严格的 JSON Schema 规范进行定义，确保向后兼容性。

{
    "id": 1,
    "title": "永恒挚爱",
    "description": "在茫茫人海中，找到了那一束光",
    "rarity": "gold",
    "unlock_rate": 3.2,
    "icon": "love"
}

稀有度评级说明

金色评级稀有度 < 1% 的骨灰级史诗成就
银色评级稀有度 1% - 10% 的高阶进阶成就
铜色评级稀有度 > 10% 的基础探索成就