197 lines
7.8 KiB
HTML
197 lines
7.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Conway Life Lab</title>
|
||
|
|
<link rel="stylesheet" href="./styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page-shell">
|
||
|
|
<header class="hero">
|
||
|
|
<div class="hero-copy">
|
||
|
|
<p class="eyebrow">CELLULAR AUTOMATA / CONWAY LIFE LAB</p>
|
||
|
|
<h1>观察八个邻居，如何让一张静止网格自己长出秩序。</h1>
|
||
|
|
<p class="hero-intro">
|
||
|
|
这是一个可以直接打开的康威生命游戏演示页：先看规则，再改格子、切预设、调速度，
|
||
|
|
用最经典的元胞自动机感受局部规则如何生成整体行为。
|
||
|
|
</p>
|
||
|
|
<div class="hero-actions">
|
||
|
|
<a class="primary-link" href="#lab">进入实验台</a>
|
||
|
|
<button class="secondary-link" id="load-default-hero" type="button">重新载入默认图案</button>
|
||
|
|
</div>
|
||
|
|
<ul class="hero-pills">
|
||
|
|
<li>默认载入 <strong>脉冲星</strong> 并暂停</li>
|
||
|
|
<li>支持点击与拖拽绘制</li>
|
||
|
|
<li>可切换滑翔机、脉冲星、滑翔机枪</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="hero-visual" aria-hidden="true">
|
||
|
|
<div class="signal-board">
|
||
|
|
<div class="signal-layer layer-a"></div>
|
||
|
|
<div class="signal-layer layer-b"></div>
|
||
|
|
<div class="signal-core">
|
||
|
|
<span class="signal-dot live"></span>
|
||
|
|
<span class="signal-dot"></span>
|
||
|
|
<span class="signal-dot live"></span>
|
||
|
|
<span class="signal-dot"></span>
|
||
|
|
<span class="signal-dot live accent"></span>
|
||
|
|
<span class="signal-dot"></span>
|
||
|
|
<span class="signal-dot live"></span>
|
||
|
|
<span class="signal-dot"></span>
|
||
|
|
<span class="signal-dot live"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hero-metrics card-surface">
|
||
|
|
<div class="metric-row">
|
||
|
|
<span class="label">Preset</span>
|
||
|
|
<strong id="hero-pattern">Pulsar</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row">
|
||
|
|
<span class="label">Generation</span>
|
||
|
|
<strong id="hero-generation">0</strong>
|
||
|
|
</div>
|
||
|
|
<div class="metric-row">
|
||
|
|
<span class="label">Live Cells</span>
|
||
|
|
<strong id="hero-live">0</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<section class="lab-section" id="lab">
|
||
|
|
<div class="section-heading">
|
||
|
|
<p class="eyebrow">Interactive Lab</p>
|
||
|
|
<h2>在画布里编辑生命，控制它的下一代。</h2>
|
||
|
|
<p>
|
||
|
|
每个细胞只看周围 8 个邻居。存活、诞生、死亡这三条规则，会在一代代迭代里形成移动、
|
||
|
|
呼吸、振荡甚至复制的图案。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="lab-layout">
|
||
|
|
<div class="canvas-panel card-surface">
|
||
|
|
<div class="canvas-toolbar">
|
||
|
|
<div>
|
||
|
|
<p class="label">Simulation Surface</p>
|
||
|
|
<h3>Conway Field</h3>
|
||
|
|
</div>
|
||
|
|
<div class="status-cluster">
|
||
|
|
<span class="status-pill" id="status-text">Paused</span>
|
||
|
|
<span class="speed-pill" id="speed-label">Drift</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="canvas-shell">
|
||
|
|
<canvas id="life-canvas" aria-label="Conway life simulation canvas"></canvas>
|
||
|
|
<div class="canvas-caption">
|
||
|
|
<span id="canvas-hint">点击或拖拽即可绘制细胞</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="canvas-footer">
|
||
|
|
<div class="mini-stat">
|
||
|
|
<span class="label">Generation</span>
|
||
|
|
<strong id="generation-value">0</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mini-stat">
|
||
|
|
<span class="label">Live</span>
|
||
|
|
<strong id="live-value">0</strong>
|
||
|
|
</div>
|
||
|
|
<div class="mini-stat">
|
||
|
|
<span class="label">Preset</span>
|
||
|
|
<strong id="preset-value">Pulsar</strong>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<aside class="control-panel card-surface">
|
||
|
|
<div class="panel-block">
|
||
|
|
<p class="label">Playback</p>
|
||
|
|
<div class="button-grid">
|
||
|
|
<button class="primary-button" id="play-toggle" type="button">开始演化</button>
|
||
|
|
<button id="step-button" type="button">单步</button>
|
||
|
|
<button id="clear-button" type="button">清空</button>
|
||
|
|
<button id="random-button" type="button">随机</button>
|
||
|
|
<button id="reset-button" type="button">重置预设</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="panel-block">
|
||
|
|
<div class="panel-row">
|
||
|
|
<p class="label">Speed</p>
|
||
|
|
<strong id="speed-readout">1 / 6</strong>
|
||
|
|
</div>
|
||
|
|
<input id="speed-slider" type="range" min="1" max="6" step="1" value="1">
|
||
|
|
<p class="support-copy">从缓慢观察到高速演化，速度越高，图案越容易呈现整体节奏。</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="panel-block">
|
||
|
|
<p class="label">How To Read</p>
|
||
|
|
<ul class="info-list">
|
||
|
|
<li>活细胞周围邻居过少会死亡</li>
|
||
|
|
<li>有 2 或 3 个邻居时会继续存活</li>
|
||
|
|
<li>空白位置恰好有 3 个邻居时会诞生新细胞</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="rules-section">
|
||
|
|
<div class="section-heading">
|
||
|
|
<p class="eyebrow">Rule Snapshot</p>
|
||
|
|
<h2>三条规则，就足够让图案产生复杂行为。</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="rules-grid">
|
||
|
|
<article class="rule-card card-surface">
|
||
|
|
<span class="rule-index">01</span>
|
||
|
|
<h3>存活</h3>
|
||
|
|
<p>一个活细胞如果有 2 或 3 个邻居，就继续存在到下一代。</p>
|
||
|
|
</article>
|
||
|
|
<article class="rule-card card-surface">
|
||
|
|
<span class="rule-index">02</span>
|
||
|
|
<h3>诞生</h3>
|
||
|
|
<p>一个空白位置如果恰好有 3 个邻居，就会在下一代长出新的活细胞。</p>
|
||
|
|
</article>
|
||
|
|
<article class="rule-card card-surface">
|
||
|
|
<span class="rule-index">03</span>
|
||
|
|
<h3>死亡</h3>
|
||
|
|
<p>活细胞邻居少于 2 个会孤独死亡，多于 3 个则会因为拥挤而死亡。</p>
|
||
|
|
</article>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="presets-section">
|
||
|
|
<div class="section-heading">
|
||
|
|
<p class="eyebrow">Preset Patterns</p>
|
||
|
|
<h2>一键加载经典结构，观察它们如何移动、振荡与扩散。</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="preset-grid">
|
||
|
|
<button class="preset-card card-surface active" data-pattern="pulsar" type="button">
|
||
|
|
<span class="preset-tag">Default</span>
|
||
|
|
<h3>脉冲星</h3>
|
||
|
|
<p>经典振荡图案，适合观察规则如何形成节律。</p>
|
||
|
|
</button>
|
||
|
|
<button class="preset-card card-surface" data-pattern="glider" type="button">
|
||
|
|
<span class="preset-tag">Mover</span>
|
||
|
|
<h3>滑翔机</h3>
|
||
|
|
<p>最著名的移动结构，会沿对角线不断前进。</p>
|
||
|
|
</button>
|
||
|
|
<button class="preset-card card-surface" data-pattern="gosperGliderGun" type="button">
|
||
|
|
<span class="preset-tag">Emitter</span>
|
||
|
|
<h3>滑翔机枪</h3>
|
||
|
|
<p>持续喷射滑翔机的结构，展示局部规则如何形成长期模式。</p>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="./app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|