From 2aacdcd3f2657fa7ee3d2a4eba402ce79cf96eaf Mon Sep 17 00:00:00 2001 From: dzq Date: Wed, 24 Dec 2025 15:27:55 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=B5=9B=E5=8D=9A?= =?UTF-8?q?=E6=9C=8B=E5=85=8B2078=E7=A5=9E=E7=BB=8F=E7=BD=91=E7=BB=9C?= =?UTF-8?q?=E5=9F=8E=E5=B8=82=E5=8F=AF=E8=A7=86=E5=8C=96=E5=B9=B3=E5=8F=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加完整的单页HTML网站实现，包含3D城市渲染、神经网络可视化、数据卡片和控制面板等功能。使用Three.js、D3.js和GSAP等库实现复杂视觉效果和交互体验。网站采用赛博朋克风格设计，具有霓虹色彩和未来科技感。 docs: 新增星际文明探索者游戏和赛博朋克2078的prompt文档 添加两个markdown文档，分别描述星际文明探索者网页游戏和赛博朋克2078神经网络城市可视化平台的需求规范和技术实现要求。 test: 添加赛博朋克2078网页实现测试文件 包含完整的HTML、CSS和JavaScript代码，实现了一个具有视觉冲击力的赛博朋克风格单页网站，用于测试大语言模型的编程能力。 --- prompts/code/2-赛博朋克2078.md | 95 ++ prompts/code/3-交互网页游戏.md | 91 ++ prompts/meta/2-网页游戏.md | 1 + test/code/2/kimi-k2.html | 1043 ++++++++++++++ test/code/3/3-交互网页游戏.md | 91 ++ test/code/3/deepseek_v3.2.html | 2016 +++++++++++++++++++++++++++ test/code/3/glm-4.7.html | 1248 +++++++++++++++++ test/code/3/mimo-v2-flash.html | 1082 +++++++++++++++ test/code/3/minimax-2.1-cc.html | 1926 +++++++++++++++++++++++++ test/code/3/minimax2.1-web.html | 2313 +++++++++++++++++++++++++++++++ 10 files changed, 9906 insertions(+) create mode 100644 prompts/code/3-交互网页游戏.md create mode 100644 prompts/meta/2-网页游戏.md create mode 100644 test/code/2/kimi-k2.html create mode 100644 test/code/3/3-交互网页游戏.md create mode 100644 test/code/3/deepseek_v3.2.html create mode 100644 test/code/3/glm-4.7.html create mode 100644 test/code/3/mimo-v2-flash.html create mode 100644 test/code/3/minimax-2.1-cc.html create mode 100644 test/code/3/minimax2.1-web.html diff --git a/prompts/code/2-赛博朋克2078.md b/prompts/code/2-赛博朋克2078.md index e69de29..dd0e1e4 100644 --- a/prompts/code/2-赛博朋克2078.md +++ b/prompts/code/2-赛博朋克2078.md @@ -0,0 +1,95 @@ +## 角色定义与任务概述 + +你是一位世界顶级的前端架构师和创意开发者，专注于打造具有视觉冲击力的沉浸式网站体验。你的任务是从零开始设计并实现一个复杂、动态、视觉效果震撼的单页网站。**仅输出完整的代码实现，不进行任何解释或对话。** 代码需要达到生产级质量，可以直接部署运行。 + +## 项目主题：赛博朋克2078 - 神经网络城市可视化平台 + +你将创建一个以"神经网络城市"为核心概念的未来主义网站，融合数据可视化、交互式3D元素、粒子系统和赛博朋克美学风格。网站展示一个虚构的2078年超级都市，包含实时数据流动、神经网络连接、智能系统监控等元素，营造出高度发达的数字文明氛围。 + +## 视觉设计规范 + +**整体风格定位为赛博朋克与未来科技主义的结合**，采用以下视觉特征： + +- **色彩体系**：以霓虹粉（#ff00ff）、电光蓝（#00ffff）、激光紫（#8800ff）为主色调，辅以深空黑（#0a0a0a）和金属灰作为背景。关键UI元素使用高饱和度的渐变色和发光效果。 +- **Typography**：标题使用具有科技感的无衬线字体（如Orbitron或Rajdhani），正文使用清晰易读的系统字体。所有文字应带有轻微的霓虹发光效果或投影。 +- **深度感设计**：通过视差滚动、多层次背景、模糊遮罩等手法营造空间深度。界面元素应有层次分明的悬浮感。 +- **glitch效果**：适当位置添加赛博朋克特色的glitch（故障艺术）效果，如文字抖动、色彩分离、信号干扰等。 +- **边框与容器**：使用锐角切边、发光边框、半透明磨砂玻璃效果构建界面框架。按钮和卡片应具有悬停时的发光反馈。 + +## 功能模块与技术实现要求 + +### 模块一：沉浸式开场动画 + +页面加载时展示一个震撼的视觉引入序列。首先以全黑背景开始，随后一个发光的神经网络节点从屏幕中心向外扩散，节点之间建立连接线，形成完整的神经网络图形。随着动画推进，视角逐渐拉远，最终揭示整个城市俯瞰图。动画时长约3-4秒，包含平滑的缓动效果，最终自动过渡到主界面。 + +### 模块二：三维城市概览视图 + +利用Three.js创建交互式3D城市俯瞰场景。城市由程序化生成的摩天大楼组成，建筑高度错落有致，表面带有LED灯光纹理。城市上空有飞行载具的粒子流，街道上有流动的光带。场景支持鼠标拖拽旋转和滚轮缩放。右上角显示实时时间（2078年格式）和城市状态指标。 + +### 模块三：神经网络数据流可视化 + +页面中央展示一个动态的神经网络可视化区域。使用D3.js或自定义Canvas实现，展示节点之间的数据传输脉冲。脉冲沿着连线流动，节点在接收数据时会产生发光闪烁效果。可视化区域外围环绕着不断变化的数据统计数字，如"神经元活跃度"、"数据吞吐量"、"延迟指标"等。 + +### 模块四：智能系统状态监控面板 + +设计一个专业的监控仪表板区域，包含以下组件： + +- **CPU/内存负载仪表**：使用SVG或Canvas绘制动态仪表盘，指针实时摆动，背景带有网格线 +- **网络流量图表**：采用类似示波器的波形显示，实时更新，带有发光线条 +- **服务器状态网格**：一个微型网格展示多个虚拟服务器的运行状态，正常为绿色，异常为红色 +- **日志滚动窗口**：展示系统日志信息，使用等宽字体，文字带有CRT显示器的扫描线效果 + +### 模块五：交互式时间线导航 + +设计一个横向滚动的年代时间线，从2078年回溯到关键历史节点。每个时间节点是一个可点击的胶囊状按钮，悬停时展开显示该节点的详细信息。点击节点后，3D城市视图平滑过渡到对应的历史时期建筑风格。当前选中的时间节点应有显著的霓虹边框效果。 + +### 模块六：全息投影式数据卡片 + +创建一组悬浮的数据展示卡片，采用全息投影风格的视觉效果。卡片呈45度角倾斜放置，带有透明渐变边缘。当鼠标移动到卡片上方时，卡片会轻微浮起并增强发光效果，同时显示隐藏的详细信息。卡片内容包括：人口统计、能量消耗、网络节点分布、AI意识同步率等。 + +### 模块七：搜索与命令控制台 + +在页面底部固定一个命令输入框，模拟未来的脑机接口。输入框支持自然语言命令（如"显示能源分布"、"切换到东城区视图"、"开始系统诊断"等）。输入时显示霓虹光标跟随，输入完成后按回车执行。命令执行时应有数据传输的视觉反馈，包括：扫描线扫过屏幕、确认音效动画、结果展示弹窗等。 + +## 交互体验设计 + +- **页面滚动**：实现平滑的滚动行为，页面各模块在滚动时触发入场动画。背景中的粒子层应以较慢的速度独立移动，创造视差效果。 +- **悬停交互**：所有可交互元素必须有视觉反馈，包括：颜色变化、发光增强、微小位移、边框高亮等。悬停时可能有短暂的粒子爆发效果。 +- **转场动画**：模块之间的切换应使用平滑的淡入淡出、滑动或缩放效果。避免生硬的跳转。 +- **响应式设计**：确保在桌面端（1920px+）、平板端（768px-1919px）和移动端（<768px）都有良好的展示效果。移动端应自动调整为单列布局，3D场景改为陀螺仪控制。 +- **加载状态**：如果某些资源需要较长时间加载，显示一个科技风格的加载动画（如旋转的圆环或进度条）。 + +## 外部CDN资源引入要求 + +必须通过CDN引入以下库以实现复杂效果（使用稳定版本）： + +- **Three.js**：用于3D城市渲染和粒子系统 +- **GSAP (GreenSock)**：用于高性能动画和时间线控制 +- **D3.js**：用于神经网络连接和复杂数据可视化 +- **Font Awesome**：图标资源 +- **Google Fonts**：引入Orbitron、Rajdhani等科技字体 +- **Particles.js**：背景粒子效果 +- **Tween.js**：平滑过渡动画 + +所有CDN链接应置于HTML文件头部，确保优先加载。 + +## 代码结构与质量标准 + +- **HTML结构**：语义化标签，清晰的模块划分，使用`
`和`
`合理组织内容 +- **CSS架构**：采用现代CSS特性（CSS Variables、Flexbox、Grid、Backdrop Filter等）。样式代码置于` + + + +
+
+
+ + +
+ + +
+ + +
+ +
+
NEURAL CITY v3.0.7
+
2078.01.01 00:00:00
+
USER: NOMAD_2078
+
+ + +

NEURAL NETWORK CITY

+ + +
+ + +
+
+
POPULATION
+
15.2M
+
+
+
ENERGY CONSUMPTION
+
847 GW
+
+
+
NETWORK NODES
+
45,892
+
+
+
AI SYNC RATE
+
98.7%
+
+
+ + +
+
+
SYSTEM LOAD
+
+
+
+
+
+
NEURAL ACTIVITY
+
+
+
+
+
+
DATA THROUGHPUT
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ + +
+
+
+
+
+
+ + + + diff --git a/test/code/3/3-交互网页游戏.md b/test/code/3/3-交互网页游戏.md new file mode 100644 index 0000000..a601be5 --- /dev/null +++ b/test/code/3/3-交互网页游戏.md @@ -0,0 +1,91 @@ +## 主题设定 + +**「星际文明探索者」** —— 一款以宇宙探索为核心主题的沉浸式交互网页游戏。玩家扮演一名星际探险家，驾驶先进的星际飞船在浩瀚的宇宙中穿梭，探索未知星球、收集星际资源、抵御宇宙威胁，并逐步揭开宇宙文明的神秘面纱。 + +--- + +## 核心功能需求 + +### 游戏机制设计 + +玩家控制一艘具有先进推进系统的星际飞船，在 procedurally generated（程序生成）的宇宙空间中自由移动。游戏应包含以下核心玩法： + +**探索系统**：宇宙空间由数千颗恒星、行星、陨石带和星际尘埃组成，支持无限滚动或动态加载机制。每颗星球拥有独特的外观特征（颜色、大小、环系统、大气层效果），玩家可以操控飞船靠近星球进行扫描和分析，揭示星球的地质构成、是否有水资源、是否适宜居住等科学数据。 + +**资源采集**：玩家在探索过程中可以采集星际资源，包括稀有矿物、能量晶体和古老文明遗迹碎片。资源管理系统需要在界面上清晰展示当前载量和采集进度，同时提供升级飞船引擎、护盾和扫描仪等子系统的功能菜单。 + +**战斗系统**：宇宙中潜伏着各类威胁，包括自动防御无人机、太空海盗和流浪小行星。战斗采用即时制，玩家通过鼠标控制飞船瞄准，键盘控制移动和技能释放。战斗特效应包含激光束、等离子体爆炸、护盾能量波动等视觉反馈。 + +**进化成长**：飞船在战斗和探索中获得经验值，解锁新技能和装备。升级界面采用3D旋转展示飞船模型，玩家可以选择性强化推进系统（影响移动速度和加速度）、能量系统（影响护盾持续时间和武器威力）或扫描系统（影响资源发现概率和星球信息完整度）。 + +### 视觉设计规范 + +**整体美学**：采用深空蓝紫色调为主基调，配合高亮的星光效果和流线型的界面元素。所有UI元素需采用半透明磨砂玻璃效果，边缘带有微弱的发光描边，营造未来科技感。字体选用无衬线字体，部分标题使用带有渐变发光效果的定制字体。 + +**背景层**：使用 WebGL 或 Canvas 渲染动态星空背景，星星具有视差滚动效果，远处的星云采用多层半透明叠加营造景深感。偶尔出现的超新星爆发、脉冲星闪烁和流星雨增添动态氛围。 + +**粒子系统**：飞船引擎喷射的火焰、战斗爆炸效果、能量护盾激活时的涟漪、采集资源时的粒子汇聚效果均需要精心设计。粒子应具有物理运动特性（速度、加速度、生命周期、颜色渐变），总数在保持60fps流畅度的前提下尽可能密集。 + +**动画过渡**：所有界面切换、菜单弹出、按钮悬停均需配备平滑的动画过渡。推荐使用 CSS Transitions 配合 JavaScript 控制的动画曲线，避免生硬的跳变。飞船移动应具有惯性物理特性，加减速过程自然流畅。 + +--- + +## 技术实现要求 + +### 架构规范 + +整个项目必须整合为**单一 HTML 文件**（index.html），内部依次包含 ` + + +
+ + + + + + + +
+ +
+
飞船状态
+
+ 船体完整性 + 100% +
+
+ 护盾能量 + 100% +
+
+ 引擎功率 + 100% +
+
+ 扫描范围 + 5 AU +
+
+ 危险等级 + 低 +
+
+ + +
+
资源库存
+
+
+ +
+
+
稀有矿物
+
0
+
+
+
+
+ +
+
+
能量晶体
+
50
+
+
+
+
+ +
+
+
遗迹碎片
+
0
+
+
+
+
+
+
+ 存储: 10% +
+
+ + +
+
飞船控制
+
+ + +
+
+ + +
+
+

使用 WASD 控制移动 | 空格 发射武器

+

鼠标瞄准 | ESC 暂停游戏

+
+
+ + +
+
星球扫描结果
+
+
未命名行星
+
类地行星
+
+
+
+ 地质构成 + 硅酸盐/金属 +
+
+ 水资源 + 丰富 +
+
+ 大气层 + 氮氧混合 +
+
+ 可居住性 + 适宜 +
+
+ 资源丰富度 + 中等 +
+
+ +
+ + +
+
飞船升级系统
+
+ 升级点: 5 +
+
+
+ +
+
+
推进系统升级
+
提高移动速度和加速度
+
+ + 消耗: 15 能量晶体 +
+
+
+
+
+ +
+
+
武器系统升级
+
提高武器威力和射速
+
+ + 消耗: 20 能量晶体 +
+
+
+
+
+ +
+
+
护盾系统升级
+
提高护盾容量和恢复速度
+
+ + 消耗: 25 能量晶体 +
+
+
+
+
+ +
+
+
扫描系统升级
+
提高扫描范围和资源发现概率
+
+ + 消耗: 30 能量晶体 +
+
+
+ +
+ + +
+

欢迎来到星际文明探索者！使用WASD控制飞船移动，空格键发射武器。

+
+ + +
+

星际文明探索者

+

+ 作为一名星际探险家，你将驾驶先进的星际飞船在浩瀚宇宙中穿梭，探索未知星球，收集稀有资源，抵御宇宙威胁，并逐步揭开宇宙文明的神秘面纱。 +

+ +
+

游戏控制说明

+
+
+ W A S D + 飞船移动 +
+
+ 鼠标 + 瞄准方向 +
+
+ 空格 + 发射武器 +
+
+ E + 交互/采集 +
+
+ ESC + 暂停游戏 +
+
+
+
+ + +
+

任务结束

+
+

任务统计

+
+
探索的星球: 0
+
采集的资源: 0
+
击败的敌人: 0
+
航行的距离: 0 AU
+
获得的经验: 0
+
游戏时间: 00:00
+
+
+

+ 你的飞船在探索过程中受损严重，任务结束。 +

+ +
+
+
+ + + + \ No newline at end of file diff --git a/test/code/3/glm-4.7.html b/test/code/3/glm-4.7.html new file mode 100644 index 0000000..e2560a6 --- /dev/null +++ b/test/code/3/glm-4.7.html @@ -0,0 +1,1248 @@ + + + + + + 星际文明探索者 | Interstellar Explorer + + + + + + + + + + + + + + + + +
+
INTERSTELLAR
+
初始化物理引擎...
+
+
+ + +
+ + +
按 F 扫描
+ + +
+ + +
+
+
结构完整性 (HP) 100%
+
+
+
+
能量护盾 100%
+
+
+
+
资源储备
+
+ 0 UNIT +
+
+
+ + +
+
+
+ +
+ +
+
+
POS: 0, 0
+
+ + +
+
警告
+
侦测到敌对信号
+
+ + +
+ +
+ W/A/S/D 移动 • 鼠标 瞄准 • 左键 射击 • F 交互 +
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/test/code/3/mimo-v2-flash.html b/test/code/3/mimo-v2-flash.html new file mode 100644 index 0000000..c4a9af1 --- /dev/null +++ b/test/code/3/mimo-v2-flash.html @@ -0,0 +1,1082 @@ + + + + + + 星际文明探索者 | Star Civilization Explorer + + + + + + + + + + + + + + +
+ + +
+
+
+ Shields + 100% +
+
+
+
+
+ Hull + 100% +
+
+
+
+ + +
+
+
WARNING: HOSTILES
+
+ + +
+
+
+ Resources + 0 +
+
+ Crystals + 0 +
+
+ +
+
ENGINEERING
+ + + +
+
+ + +
+
+ Speed + 0 +
+
+ Status + Drifting +
+
+ + +
+
+ ZOOM: SCROLL + AIM: MOUSE +
+
+
+ + +
+
STAR EXPLORER
+
INTERSTELLAR CIVILIZATION LOG
+ +
+ +
+ +
+

W A S D 或 方向键 : 推进 / 移动

+

MOUSE : 瞄准

+

LEFT CLICK : 发射激光

+

SCROLL : 调整视角

+

靠近星球进行扫描，收集资源。避开红色敌对目标，或摧毁它们。

+
+
+ + + + diff --git a/test/code/3/minimax-2.1-cc.html b/test/code/3/minimax-2.1-cc.html new file mode 100644 index 0000000..bdd5015 --- /dev/null +++ b/test/code/3/minimax-2.1-cc.html @@ -0,0 +1,1926 @@ + + + + + + 星际文明探索者 + + + + +
+ +
正在初始化星际引擎...
+
+ + +
+

星际文明探索者

+

STELLAR CIVILIZATION EXPLORER

+ +
+

WASD - 移动飞船 | 鼠标 - 瞄准 | 左键 - 射击

+

空格 - 护盾 | E - 扫描星球 | Q - 特殊技能 | ESC - 暂停

+
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + +
⚠ 战斗进行中
+ + +
+
扫描数据
+
+
+ + +
+
系统升级
+
+
推进系统
+
提升移动速度和加速度
+
当前等级: 1
+
+
+
能量护盾
+
增加护盾容量和恢复速度
+
当前等级: 1
+
+
+
武器系统
+
提升武器威力和射速
+
当前等级: 1
+
+
+
扫描仪
+
增加资源发现概率和信息完整度
+
当前等级: 1
+
+
+ + +
+ + +
+
+
暂停
+ + + + + +
+
+ + +
+
操作说明
+
+
+ WASD + 移动飞船 +
+
+ 鼠标 + 瞄准方向 +
+
+ 左键 + 发射武器 +
+
+ 空格 + 激活护盾 +
+
+ E + 扫描附近星球 +
+
+ Q + 释放特殊技能 +
+
+ ESC + 暂停菜单 +
+
+ +
+ + +
+
LEVEL UP!
+
+ + + + + + + + + + diff --git a/test/code/3/minimax2.1-web.html b/test/code/3/minimax2.1-web.html new file mode 100644 index 0000000..bd63ce5 --- /dev/null +++ b/test/code/3/minimax2.1-web.html @@ -0,0 +1,2313 @@ + + + + + + 星际文明探索者 - Star Civilization Explorer + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

星际文明探索者

+

Star Civilization Explorer

+ +
+
WASD 移动飞船
+
鼠标 瞄准方向
+
左键 发射激光
+
E 采集资源
+
空格 释放技能
+
U 升级面板
+
ESC 暂停游戏
+
+
+ + + + + + + + + + + +
+ 按 E 采集资源 +
+ + +
+ + + + + + + + +
+

🚀 飞船升级

+
+
+
🔥
+
推进系统
+
等级 1
+
消耗: 10 晶体
+
+
+
🛡️
+
能量护盾
+
等级 1
+
消耗: 10 晶体
+
+
+
🔫
+
激光武器
+
等级 1
+
消耗: 10 晶体
+
+
+
📡
+
扫描系统
+
等级 1
+
消耗: 10 晶体
+
+
+
📦
+
货舱容量
+
等级 1
+
消耗: 10 晶体
+
+
+
⚡
+
特殊技能
+
等级 1
+
消耗: 10 晶体
+
+
+ +
+ + +
+

⏸️ 暂停

+ + + +
+ + + + + + + + +
+
+ + + +