add: website frontend files
This commit is contained in:
root
parent
6e6bb5cfc7
commit
424923c81e
1082
website/demo.html
Normal file
1082
website/demo.html
Normal file
File diff suppressed because it is too large
Load Diff
181
website/index.html
Normal file
181
website/index.html
Normal 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
150
website/intro.html
Normal 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
118
website/platform.html
Normal 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
130
website/races.html
Normal 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
138
website/world.html
Normal 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>
|
||||||
Loading…
Reference in New Issue
Block a user