155 lines
6.6 KiB
HTML
155 lines
6.6 KiB
HTML
<!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>
|
||
<link rel="stylesheet" href="auth.css">
|
||
</head>
|
||
<body>
|
||
|
||
<canvas id="particles"></canvas>
|
||
|
||
<nav>
|
||
<a href="index.html" class="logo">宇森</a>
|
||
<div id="auth-area"></div>
|
||
<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>
|
||
<script src="auth.js"></script>
|
||
<script>YuSenAuth.init();</script>
|
||
</body>
|
||
</html>
|