pengyuthon/game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: website frontend files

Browse Source
This commit is contained in:
root 2026-07-07 17:02:07 +08:00
parent 6e6bb5cfc7
commit 424923c81e
6 changed files with 1799 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1082
website/demo.html Normal file
View File

File diff suppressed because it is too large Load Diff

181
website/index.html Normal file
View File

@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宇森</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
background:#06090f; color:#c8d6e5; overflow:hidden;
height:100vh; display:flex; flex-direction:column;
}
/* 粒子背景 */
#particles {
position:fixed; top:0; left:0; width:100%; height:100%;
z-index:0; pointer-events:none;
}
/* 导航 */
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,9,15,0.8); backdrop-filter:blur(16px);
border-bottom:1px solid rgba(100,200,255,0.08);
padding:0 40px; height:60px;
display:flex; align-items:center; justify-content:space-between;
}
nav .logo {
font-size:18px; font-weight:bold; letter-spacing:2px;
background:linear-gradient(135deg, #4af, #a8e6cf);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
nav .links { display:flex; gap:32px; list-style:none; }
nav .links a {
color:#667788; text-decoration:none; font-size:14px;
transition:color 0.3s; letter-spacing:1px;
}
nav .links a:hover { color:#4af; }
/* 主区域 - 居中 */
.main {
flex:1; display:flex; flex-direction:column;
align-items:center; justify-content:center;
position:relative; z-index:1; text-align:center;
padding:0 32px;
}
.main h1 {
font-size:80px; font-weight:bold; letter-spacing:20px;
background:linear-gradient(135deg, #4af 0%, #a8e6cf 50%, #ffd700 100%);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
margin-bottom:12px;
}
.main .sub {
font-size:16px; color:#445566; letter-spacing:6px;
margin-bottom:48px;
}
/* 快捷卡片 */
.quick-cards {
display:flex; gap:16px; flex-wrap:wrap;
justify-content:center; max-width:700px;
}
.quick-card {
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.1);
border-radius:10px; padding:20px 28px; text-decoration:none;
color:#c8d6e5; transition:all 0.3s;
min-width:140px; text-align:center;
}
.quick-card:hover {
border-color:rgba(100,200,255,0.35);
transform:translateY(-3px);
background:rgba(10,25,50,0.7);
}
.quick-card .qc-icon { font-size:28px; margin-bottom:8px; }
.quick-card .qc-label { font-size:13px; color:#99aabb; }
.quick-card .qc-name { font-size:15px; color:#e0e0e0; margin-top:2px; }
@media (max-width:768px) {
.main h1 { font-size:44px; letter-spacing:10px; }
nav .links { display:none; }
.quick-cards { gap:10px; }
.quick-card { padding:14px 18px; min-width:110px; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<nav>
<span class="logo">宇森</span>
<ul class="links">
<li><a href="intro.html">游戏介绍</a></li>
<li><a href="platform.html">平台架构</a></li>
<li><a href="world.html">世界结构</a></li>
<li><a href="races.html">种族</a></li>
<li><a href="demo.html">演示</a></li>
</ul>
</nav>
<div class="main">
<h1>宇 森</h1>
<p class="sub">寰 宇 · 森 罗</p>
<div class="quick-cards">
<a href="intro.html" class="quick-card">
<div class="qc-icon">🎮</div>
<div class="qc-name">游戏介绍</div>
<div class="qc-label">背景与特色</div>
</a>
<a href="platform.html" class="quick-card">
<div class="qc-icon">🏗️</div>
<div class="qc-name">三层架构</div>
<div class="qc-label">游戏·教育·企业</div>
</a>
<a href="world.html" class="quick-card">
<div class="qc-icon">🌍</div>
<div class="qc-name">五层世界</div>
<div class="qc-label">垂直切面互通</div>
</a>
<a href="races.html" class="quick-card">
<div class="qc-icon">🧬</div>
<div class="qc-name">七大种族</div>
<div class="qc-label">选择你的文明</div>
</a>
<a href="demo.html" class="quick-card">
<div class="qc-icon">🖱️</div>
<div class="qc-name">交互演示</div>
<div class="qc-label">点击体验</div>
</a>
</div>
</div>
<script>
/* 粒子背景 */
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
let particles = [];
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);
class Particle {
constructor() {
this.reset();
this.y = Math.random() * canvas.height;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = -10;
this.size = Math.random() * 1.5 + 0.5;
this.speed = Math.random() * 0.3 + 0.1;
this.opacity = Math.random() * 0.5 + 0.1;
}
update() {
this.y += this.speed;
if (this.y > canvas.height + 10) this.reset();
}
draw() {
ctx.fillStyle = `rgba(100,200,255,${this.opacity})`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
for (let i = 0; i < 80; i++) particles.push(new Particle());
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => { p.update(); p.draw(); });
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

150
website/intro.html Normal file
View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>游戏介绍 — 宇森</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
background:#06090f; color:#c8d6e5;
line-height:1.7;
}
#particles {
position:fixed; top:0; left:0; width:100%; height:100%;
z-index:0; pointer-events:none;
}
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,9,15,0.85); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(100,200,255,0.1);
padding:0 40px; height:56px;
display:flex; align-items:center; justify-content:space-between;
}
nav .logo { font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:2px; background:linear-gradient(135deg, #4af, #a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav .links { display:flex; gap:28px; list-style:none; }
nav .links a { color:#667788; text-decoration:none; font-size:14px; transition:color 0.3s; }
nav .links a:hover, nav .links a.active { color:#4af; }
.page {
position:relative; z-index:1; padding:90px 32px 60px; max-width:900px; margin:0 auto;
}
h1 {
font-size:32px; font-weight:bold; margin-bottom:8px;
background:linear-gradient(135deg, #4af, #a8e6cf);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.page-sub { color:#556677; font-size:15px; margin-bottom:48px; }
h2 {
font-size:24px; color:#e0e0e0; margin:48px 0 16px; padding-left:12px;
border-left:3px solid #4af;
}
p { color:#99aabb; font-size:15px; margin-bottom:16px; line-height:1.9; }
.features { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:24px; }
.feature-card {
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.1);
border-radius:12px; padding:28px 22px;
transition:transform 0.3s, border-color 0.3s;
}
.feature-card:hover { transform:translateY(-3px); border-color:rgba(100,200,255,0.3); }
.feature-card .icon { font-size:32px; margin-bottom:12px; }
.feature-card h3 { font-size:16px; color:#e0e0e0; margin-bottom:8px; }
.feature-card p { font-size:13px; color:#8899aa; line-height:1.6; margin:0; }
@media (max-width:768px) {
.features { grid-template-columns:1fr; }
h1 { font-size:24px; } nav .links { display:none; }
.page { padding:80px 20px 40px; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<nav>
<a href="index.html" class="logo">宇森</a>
<ul class="links">
<li><a href="intro.html" class="active">游戏介绍</a></li>
<li><a href="platform.html">平台架构</a></li>
<li><a href="world.html">世界结构</a></li>
<li><a href="races.html">种族</a></li>
<li><a href="demo.html">演示</a></li>
</ul>
</nav>
<div class="page">
<h1>游戏介绍</h1>
<p class="page-sub">这个世界不是静止的布景，它有地质、气候、生态和文明演化逻辑</p>
<div style="background:rgba(10,20,40,0.4); border-radius:12px; padding:32px 28px; margin-bottom:32px;">
<p style="font-size:15px; color:#b0c0d0;">
你的角色不是操控者，而是<strong style="color:#4af;">「园丁」</strong>——播种、引导、在关键时刻施加影响，然后看着文明顺着自己的逻辑生长。
</p>
<p style="font-size:15px; color:#b0c0d0; margin-top:12px;">
每个世界由五层垂直空间组成：从地心的熔岩脉搏，到地表上繁衍的城镇，再到星空中的未知信号。层与层之间不是割裂的维度，而是同一世界的不同切面——地下的矿脉供养地表的炉火，天空的季风影响作物的丰歉，星空的异常预示着文明的转折。
</p>
<p style="font-size:15px; color:#b0c0d0; margin-top:12px;">
文明中的个体（NPC）有自己的性格、记忆和成长轨迹。他们会在火灾后学会预防，在交易中积累智慧，在危机中推举领袖。
<br><strong style="color:#a8e6cf;">这是一个活的文明系统。</strong>
</p>
</div>
<h2>核心特色</h2>
<div class="features">
<div class="feature-card">
<div class="icon">🧬</div>
<h3>活的文明</h3>
<p>NPC 有性格、记忆和自主决策能力，不是站桩的静态单位。日常靠规则引擎生存，周期性通过智能体反思进化。</p>
</div>
<div class="feature-card">
<div class="icon">🏔️</div>
<h3>五层垂直世界</h3>
<p>地心 / 地下 / 本地 / 天空 / 星空，五层是同一世界的不同切面，层间有资源和事件互动。</p>
</div>
<div class="feature-card">
<div class="icon">🔭</div>
<h3>镜头语言</h3>
<p>点击格子 → 由远及近飞入 → 进入微观场景。建筑动画、人物走动、资源飘字，沉浸式体验。</p>
</div>
<div class="feature-card">
<div class="icon">🌐</div>
<h3>独立世界 + 异步互动</h3>
<p>每人一个世界，通过贸易 / 战争 / 联盟产生连接。独立的世界平面，异步策略博弈。</p>
</div>
<div class="feature-card">
<div class="icon">🗺️</div>
<h3>渐进式地图</h3>
<p>从 127 格起步，随文明发展扩展至千格、万格。正六边形密铺，无缝缩放。</p>
</div>
<div class="feature-card">
<div class="icon">⚔️</div>
<h3>深度系统</h3>
<p>种族 / 性格 / 天赋 / 职业 / 建造 / 交易 / 战争 / 势力 / 装备 / 神器 / 传奇 — 十五大系统。</p>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
let particles = [];
function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
resize(); window.addEventListener('resize', resize);
class Particle {
constructor() { this.reset(); this.y = Math.random() * canvas.height; }
reset() { this.x = Math.random() * canvas.width; this.y = -10; this.size = Math.random()*1.5+0.5; this.speed = Math.random()*0.3+0.1; this.opacity = Math.random()*0.5+0.1; }
update() { this.y += this.speed; if (this.y > canvas.height+10) this.reset(); }
draw() { ctx.fillStyle = `rgba(100,200,255,${this.opacity})`; ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2); ctx.fill(); }
}
for (let i=0;i<80;i++) particles.push(new Particle());
function animate() { ctx.clearRect(0,0,canvas.width,canvas.height); particles.forEach(p=>{p.update();p.draw();}); requestAnimationFrame(animate); }
animate();
</script>
</body>
</html>

118
website/platform.html Normal file
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>平台架构 — 宇森</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
background:#06090f; color:#c8d6e5; line-height:1.7;
}
#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,9,15,0.85); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(100,200,255,0.1);
padding:0 40px; height:56px; display:flex; align-items:center; justify-content:space-between;
}
nav .logo { font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:2px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav .links { display:flex; gap:28px; list-style:none; }
nav .links a { color:#667788; text-decoration:none; font-size:14px; transition:color 0.3s; }
nav .links a:hover, nav .links a.active { color:#4af; }
.page { position:relative; z-index:1; padding:90px 32px 60px; max-width:800px; margin:0 auto; }
h1 { font-size:32px; font-weight:bold; margin-bottom:8px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-sub { color:#556677; font-size:15px; margin-bottom:48px; }
.platform-layer {
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.12);
border-radius:14px; padding:36px 32px; margin-bottom:16px;
position:relative; overflow:hidden; transition:border-color 0.3s;
}
.platform-layer:hover { border-color:rgba(100,200,255,0.3); }
.platform-layer::before {
content:''; position:absolute; top:0; left:0; right:0; height:3px;
}
.platform-layer:nth-child(1)::before { background:linear-gradient(90deg,#4af,#a8e6cf); }
.platform-layer:nth-child(2)::before { background:linear-gradient(90deg,#a8e6cf,#ffd700); }
.platform-layer:nth-child(3)::before { background:linear-gradient(90deg,#ffd700,#ff6b6b); }
.layer-num { font-size:12px; color:#8af; letter-spacing:2px; margin-bottom:8px; }
.platform-layer h3 { font-size:20px; color:#e8e8e8; margin-bottom:10px; }
.platform-layer p { font-size:14.5px; color:#99aabb; line-height:1.8; }
.arrow-down { text-align:center; padding:6px 0; color:#4af; font-size:18px; opacity:0.5; }
.summary-box {
background:rgba(10,25,50,0.5); border:1px solid rgba(100,200,255,0.12);
border-radius:12px; padding:28px; margin-top:40px;
}
.summary-box h2 { font-size:18px; color:#e0e0e0; margin-bottom:12px; }
.summary-box p { font-size:14px; color:#8899aa; margin:0; line-height:1.8; }
@media (max-width:768px) {
h1 { font-size:24px; } nav .links { display:none; } .page { padding:80px 20px 40px; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<nav>
<a href="index.html" class="logo">宇森</a>
<ul class="links">
<li><a href="intro.html">游戏介绍</a></li>
<li><a href="platform.html" class="active">平台架构</a></li>
<li><a href="world.html">世界结构</a></li>
<li><a href="races.html">种族</a></li>
<li><a href="demo.html">演示</a></li>
</ul>
</nav>
<div class="page">
<h1>三层平台</h1>
<p class="page-sub">游戏为壳，能力为本，价值为出口</p>
<div class="platform-layer">
<div class="layer-num">第 一 层 — 入口</div>
<h3>🎮 游戏世界区</h3>
<p>玩家被兴趣驱动进来，经营属于自己的文明。上帝视角文明建设 + 随机事件演化 + 多人异步互动。这是整个平台的流量入口——先用好玩的东西把人留住。</p>
</div>
<div class="arrow-down">↓</div>
<div class="platform-layer">
<div class="layer-num">第 二 层 — 嵌入</div>
<h3>📚 教育区</h3>
<p>知识藏在游戏挑战和任务里，通过「学院」建筑衔接。玩家在解决问题的过程中培育综合能力——批判思维、系统分析、资源整合、方案设计。省内大部分高校可衔接，学分/实践/就业推荐。</p>
</div>
<div class="arrow-down">↓</div>
<div class="platform-layer">
<div class="layer-num">第 三 层 — 出口</div>
<h3>🏢 企业区</h3>
<p>文明发展到一定阶段解锁。游戏中获得的能力和资源可兑换成实际价值。玩有所学，学有所用，用有所得。</p>
</div>
<div class="summary-box">
<h2>💡 设计逻辑</h2>
<p>
大多数教育产品的问题在于：用户没有动力主动来学。宇森的解法是<strong style="color:#4af;">反过来</strong>——用户先因为游戏好玩进来，在游戏过程中不知不觉习得能力，能力积累到一定程度后自然产生价值出口。
游戏是诱饵，不是目的。
</p>
</div>
</div>
<script>
const c=document.getElementById('particles'),x=c.getContext('2d');let P=[];
function R(){c.width=innerWidth;c.height=innerHeight}R();addEventListener('resize',R);
class Particle{constructor(){this.r();this.y=Math.random()*c.height}r(){this.x=Math.random()*c.width;this.y=-10;this.s=Math.random()*1.5+0.5;this.v=Math.random()*0.3+0.1;this.o=Math.random()*0.5+0.1}u(){this.y+=this.v;if(this.y>c.height+10)this.r()}d(){x.fillStyle=`rgba(100,200,255,${this.o})`;x.beginPath();x.arc(this.x,this.y,this.s,0,Math.PI*2);x.fill()}}
for(let i=0;i<80;i++)P.push(new Particle());
(function A(){x.clearRect(0,0,c.width,c.height);P.forEach(p=>{p.u();p.d()});requestAnimationFrame(A)})();
</script>
</body>
</html>

130
website/races.html Normal file
View File

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>种族 — 宇森</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
background:#06090f; color:#c8d6e5; line-height:1.7;
}
#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,9,15,0.85); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(100,200,255,0.1);
padding:0 40px; height:56px; display:flex; align-items:center; justify-content:space-between;
}
nav .logo { font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:2px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav .links { display:flex; gap:28px; list-style:none; }
nav .links a { color:#667788; text-decoration:none; font-size:14px; transition:color 0.3s; }
nav .links a:hover, nav .links a.active { color:#4af; }
.page { position:relative; z-index:1; padding:90px 32px 60px; max-width:860px; margin:0 auto; }
h1 { font-size:32px; font-weight:bold; margin-bottom:8px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-sub { color:#556677; font-size:15px; margin-bottom:40px; }
.races { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.race-card {
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.12);
border-radius:14px; padding:26px 22px; text-align:center;
transition:transform 0.3s, border-color 0.3s;
}
.race-card:hover { transform:translateY(-4px); border-color:rgba(100,200,255,0.3); }
.race-icon { font-size:42px; margin-bottom:10px; }
.race-card h3 { font-size:17px; color:#e8e8e8; margin-bottom:6px; }
.race-trait { font-size:12px; color:#a8e6cf; margin-bottom:10px; letter-spacing:1px; }
.race-detail { font-size:13px; color:#8899aa; line-height:1.65; }
.note-box {
background:rgba(10,25,50,0.45); border:1px solid rgba(100,200,255,0.1);
border-radius:12px; padding:22px 26px; margin-top:36px; text-align:center;
}
.note-box p { font-size:13.5px; color:#778899; margin:0; line-height:1.7; }
@media (max-width:768px) {
h1 { font-size:24px; } nav .links { display:none; } .page { padding:80px 20px 40px; }
.races { grid-template-columns:1fr; } .race-card { padding:22px 18px; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<nav>
<a href="index.html" class="logo">宇森</a>
<ul class="links">
<li><a href="intro.html">游戏介绍</a></li>
<li><a href="platform.html">平台架构</a></li>
<li><a href="world.html">世界结构</a></li>
<li><a href="races.html" class="active">种族</a></li>
<li><a href="demo.html">演示</a></li>
</ul>
</nav>
<div class="page">
<h1>七大种族</h1>
<p class="page-sub">创建文明时选择种族，不可更改，决定 NPC 性格分布和文明初始偏向</p>
<div class="races">
<div class="race-card">
<div class="race-icon">👤</div>
<h3>人类</h3>
<div class="race-trait">均衡型</div>
<div class="race-detail">全属性 +5%。没有短板，也没有极端优势。最适合新手的种族。</div>
</div>
<div class="race-card">
<div class="race-icon">🧝</div>
<h3>森精灵</h3>
<div class="race-trait">高智慧 · 低生育</div>
<div class="race-detail">研究 +20%，森林建造双倍。人口增长 -15%，战斗力 -10%。</div>
</div>
<div class="race-card">
<div class="race-icon">⛏️</div>
<h3>山矮人</h3>
<div class="race-trait">高生产力 · 低移动</div>
<div class="race-detail">建造 +25%，矿脉产出 +30%。移动范围 -2 格，粮食消耗 +10%。</div>
</div>
<div class="race-card">
<div class="race-icon">🐉</div>
<h3>龙裔</h3>
<div class="race-trait">高战斗 · 低社交</div>
<div class="race-detail">战斗力 +30%，火焰耐性。交易收益 -15%，外交好感 -10%。</div>
</div>
<div class="race-card">
<div class="race-icon">❄️</div>
<h3>冰灵族</h3>
<div class="race-trait">高魔法 · 低体力</div>
<div class="race-detail">信仰产出 +25%，雪地生存。沙漠/火山不可进入，人口上限 -10%。</div>
</div>
<div class="race-card">
<div class="race-icon">🦍</div>
<h3>兽人</h3>
<div class="race-trait">高体力 · 低智慧</div>
<div class="race-detail">人口增长 +20%，夜战加成。研究速度 -20%，建筑上限 -2。</div>
</div>
<div class="race-card">
<div class="race-icon">🌑</div>
<h3>暗影族</h3>
<div class="race-trait">高隐秘 · 低道德</div>
<div class="race-detail">侦查 +30%，偷窃成功率 +25%。外交永久 -1 级，神庙无效。</div>
</div>
</div>
<div class="note-box">
<p>每个种族的数值都是<strong style="color:#4af;">初始偏向</strong>，不是永久锁死。<br>通过游戏进程中的事件、建筑和神器，任何种族都可以发展出独特的能力路径。</p>
</div>
</div>
<script>
const c=document.getElementById('particles'),x=c.getContext('2d');let P=[];
function R(){c.width=innerWidth;c.height=innerHeight}R();addEventListener('resize',R);
class Particle{constructor(){this.r();this.y=Math.random()*c.height}r(){this.x=Math.random()*c.width;this.y=-10;this.s=Math.random()*1.5+0.5;this.v=Math.random()*0.3+0.1;this.o=Math.random()*0.5+0.1}u(){this.y+=this.v;if(this.y>c.height+10)this.r()}d(){x.fillStyle=`rgba(100,200,255,${this.o})`;x.beginPath();x.arc(this.x,this.y,this.s,0,Math.PI*2);x.fill()}}
for(let i=0;i<80;i++)P.push(new Particle());
(function A(){x.clearRect(0,0,c.width,c.height);P.forEach(p=>{p.u();p.d()});requestAnimationFrame(A)})();
</script>
</body>
</html>

138
website/world.html Normal file
View File

@ -0,0 +1,138 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>世界结构 — 宇森</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Microsoft YaHei', 'PingFang SC', sans-serif;
background:#06090f; color:#c8d6e5; line-height:1.7;
}
#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
nav {
position:fixed; top:0; left:0; right:0; z-index:1000;
background:rgba(6,9,15,0.85); backdrop-filter:blur(12px);
border-bottom:1px solid rgba(100,200,255,0.1);
padding:0 40px; height:56px; display:flex; align-items:center; justify-content:space-between;
}
nav .logo { font-size:18px; font-weight:bold; text-decoration:none; letter-spacing:2px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
nav .links { display:flex; gap:28px; list-style:none; }
nav .links a { color:#667788; text-decoration:none; font-size:14px; transition:color 0.3s; }
nav .links a:hover, nav .links a.active { color:#4af; }
.page { position:relative; z-index:1; padding:90px 32px 60px; max-width:780px; margin:0 auto; }
h1 { font-size:32px; font-weight:bold; margin-bottom:8px; background:linear-gradient(135deg,#4af,#a8e6cf); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.page-sub { color:#556677; font-size:15px; margin-bottom:40px; }
.layer-card {
background:rgba(10,20,40,0.5); border:1px solid rgba(100,200,255,0.12);
border-radius:14px; padding:24px 28px; margin-bottom:14px;
display:flex; gap:20px; align-items:flex-start;
transition:transform 0.3s, border-color 0.3s;
}
.layer-card:hover { transform:translateX(6px); border-color:rgba(100,200,255,0.3); }
.layer-card.primary { border-color:rgba(100,200,255,0.28); background:rgba(10,30,60,0.55); }
.layer-icon { font-size:36px; min-width:52px; text-align:center; padding-top:2px; }
.layer-info h3 { font-size:17px; color:#e8e8e8; margin-bottom:3px; }
.layer-en { font-size:11px; color:#556; margin-bottom:8px; }
.layer-info p { font-size:13.5px; color:#99aabb; line-height:1.7; margin:0; }
.interface-tag {
text-align:center; padding:6px 0; color:#5af; font-size:13px;
opacity:0.6; letter-spacing:1px;
}
@media (max-width:768px) {
h1 { font-size:24px; } nav .links { display:none; } .page { padding:80px 20px 40px; }
.layer-card { flex-direction:column; text-align:center; }
.layer-icon { padding-top:0; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<nav>
<a href="index.html" class="logo">宇森</a>
<ul class="links">
<li><a href="intro.html">游戏介绍</a></li>
<li><a href="platform.html">平台架构</a></li>
<li><a href="world.html" class="active">世界结构</a></li>
<li><a href="races.html">种族</a></li>
<li><a href="demo.html">演示</a></li>
</ul>
</nav>
<div class="page">
<h1>五层世界</h1>
<p class="page-sub">垂直切面，层间互通 — 本地层是主舞台</p>
<!-- 星空 -->
<div style="text-align:center;font-size:22px;margin-bottom:8px;">🌌</div>
<div class="layer-card">
<div class="layer-icon">🛰️</div>
<div class="layer-info">
<h3>第五层 · 星空层</h3>
<div class="layer-en">Stellar Layer</div>
<p>卫星、轨道设施、星际信号。文明的最终出口。陨石事件、黑洞信号、星际接触。轨道设施可对本地层施加全球影响。</p>
</div>
</div>
<div class="interface-tag">↕ 接口：陨石 / 信号 / 星际事件</div>
<!-- 天空 -->
<div class="layer-card">
<div class="layer-icon">☁️</div>
<div class="layer-info">
<h3>第四层 · 天空层</h3>
<div class="layer-en">Sky Layer</div>
<p>云层流动、飞行单位、天气系统。气候决定农业产出，飞艇可跨越地块移动。流星、风暴、迁徙鸟群事件。</p>
</div>
</div>
<div class="interface-tag">↕ 接口：气候 / 飞艇 / 飞行单位</div>
<!-- 本地（主世界） -->
<div class="layer-card primary">
<div class="layer-icon">🌍</div>
<div class="layer-info">
<h3>第三层 · 本地层 ★ 主世界</h3>
<div class="layer-en">Surface Layer — Primary</div>
<p>玩家 90% 的操作在这里。正六边形密铺，七种地形，三重视角缩放，支持从宏观地图飞入微观场景。建筑 / 人口 / 战争 / 贸易的核心舞台。</p>
</div>
</div>
<div class="interface-tag">↕ 接口：矿脉透视 / 地下入侵</div>
<!-- 地下 -->
<div class="layer-card">
<div class="layer-icon">⛏️</div>
<div class="layer-info">
<h3>第二层 · 地下层</h3>
<div class="layer-en">Underground Layer</div>
<p>矿脉网络、地下河、洞穴生态系统。资源供给层——金属/宝石/稀有矿藏。洞穴蜘蛛、暗影文明威胁。</p>
</div>
</div>
<div class="interface-tag">↕ 接口：地热 / 岩浆事件 / 核心共振</div>
<!-- 地心 -->
<div class="layer-card">
<div class="layer-icon">🔥</div>
<div class="layer-info">
<h3>第一层 · 地心层</h3>
<div class="layer-en">Core Layer</div>
<p>世界的能量源头。岩浆脉动、远古遗迹、终极挑战。后期解锁——藏有最早的文明遗迹叙事碎片，神器碎片合成之地。</p>
</div>
</div>
</div>
<script>
const c=document.getElementById('particles'),x=c.getContext('2d');let P=[];
function R(){c.width=innerWidth;c.height=innerHeight}R();addEventListener('resize',R);
class Particle{constructor(){this.r();this.y=Math.random()*c.height}r(){this.x=Math.random()*c.width;this.y=-10;this.s=Math.random()*1.5+0.5;this.v=Math.random()*0.3+0.1;this.o=Math.random()*0.5+0.1}u(){this.y+=this.v;if(this.y>c.height+10)this.r()}d(){x.fillStyle=`rgba(100,200,255,${this.o})`;x.beginPath();x.arc(this.x,this.y,this.s,0,Math.PI*2);x.fill()}}
for(let i=0;i<80;i++)P.push(new Particle());
(function A(){x.clearRect(0,0,c.width,c.height);P.forEach(p=>{p.u();p.d()});requestAnimationFrame(A)})();
</script>
</body>
</html>