像素化动态宇宙模拟器｜36结局渐进演化
by BraveDragon92418 lines21.1 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>像素化动态宇宙模拟器｜36结局渐进演化</title>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;font-family: Consolas, "Microsoft Yahei"}
body{background:#000412;color:#e6eeff;padding:18px}
.main-wrap{max-width:1350px;margin:0 auto}
h1{text-align:center;color:#82bfff;margin-bottom:16px;letter-spacing:2px}
.content-grid{display:grid;grid-template-columns:330px 1fr;gap:24px}
/* 左侧操控面板 */
.control-box{background:#080e30;border:2px solid #3b77e8;border-radius:12px;padding:20px}
.panel-title{font-size:18px;color:#a0ccff;border-bottom:1px solid #25448c;padding-bottom:7px;margin-bottom:16px}
.lever-item{margin-bottom:20px}
.lever-name{font-size:14px;margin-bottom:5px}
input[type="range"]{width:110px;accent-color:#428cff}
.lever-text{color:#ffdf75;margin-left:8px}
.btn-group{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
button{padding:10px;border:none;border-radius:7px;font-size:14px;font-weight:bold;cursor:pointer}
#runBtn{background:#23c45d;color:#000}
#resetBtn{background:#ec4343;color:#fff}
#jumpBtn{background:#a754f6;color:#fff}
#voidBtn{background:#f87215;color:#000}
button:active{transform:scale(0.95)}
.tip-text{margin-top:18px;font-size:12px;color:#92a6d6;line-height:1.5}
/* 右侧画布+结局区域 */
.display-box{background:#03071f;border:2px solid #24489b;border-radius:12px;padding:20px}
#spaceCanvas{width:100%;height:340px;border:1px solid #3258b6;border-radius:8px;background:#000}
.progress-bar{margin:12px 0;height:14px;border:1px solid #4466bb;border-radius:7px;overflow:hidden;background:#0a1438}
.progress-inner{height:100%;width:0%;background:linear-gradient(90deg,#4096ff,#78e0ff);transition:0.15s linear}
.result-area{min-height:110px;border:1px solid #2b4787;border-radius:8px;padding:14px;margin:14px 0}
.end-head{font-size:21px;color:#fff982;margin-bottom:8px}
.end-desc{color:#c9ddff;font-size:15px;line-height:1.6}
.log-area{height:180px;border:1px solid #2c4989;border-radius:8px;padding:12px;overflow-y:auto;color:#b2cfff;font-size:13px}
</style>
</head>
<body>
<div class="main-wrap">
<h1>像素化渐进宇宙模拟器（36种结局·平滑演化）</h1>
<div class="content-grid">
<!-- 左侧操控 -->
<div class="control-box">
<div class="panel-title">宇宙参数控制台</div>
<div class="lever-item">
<div class="lever-name">恒星能量 L1</div>
<input type="range" id="starPower" min="1" max="4" value="2">
<span class="lever-text" id="starTxt">中等</span>
</div>
<div class="lever-item">
<div class="lever-name">暗物质浓度 L2</div>
<input type="range" id="darkMatter" min="1" max="4" value="2">
<span class="lever-text" id="darkTxt">正常</span>
</div>
<div class="lever-item">
<div class="lever-name">文明等级 L3</div>
<input type="range" id="civilLv" min="1" max="4" value="2">
<span class="lever-text" id="civTxt">星际初级</span>
</div>
<div class="lever-item">
<div class="lever-name">时空曲率 L4</div>
<input type="range" id="spaceCurve" min="1" max="4" value="2">
<span class="lever-text" id="curveTxt">平稳</span>
</div>
<div class="lever-item">
<div class="lever-name">黑洞活跃度 L5</div>
<input type="range" id="blackHole" min="1" max="4" value="1">
<span class="lever-text" id="bhTxt">休眠</span>
</div>
<div class="lever-item">
<div class="lever-name">虚空辐射 L6</div>
<input type="range" id="voidRad" min="1" max="4" value="1">
<span class="lever-text" id="radTxt">微弱</span>
</div>
<div class="btn-group">
<button id="runBtn">启动宇宙演算</button>
<button id="resetBtn">全局重置</button>
<button id="jumpBtn">时空强制跃迁</button>
<button id="voidBtn">触碰虚空本源</button>
</div>
<p class="tip-text">6拉杆4按键组合，共固定36结局。演算全程画面缓慢变化，支持宇宙逐步归零消散，画布自动像素化。</p>
</div>
<!-- 右侧画面 -->
<div class="display-box">
<canvas id="spaceCanvas"></canvas>
<div class="progress-bar"><div class="progress-inner" id="progress"></div></div>
<div class="result-area" id="resultBox">
<div class="end-head">等待开启宇宙演算</div>
<div class="end-desc">拖动拉杆调整全宇宙参数，点击按键开始渐进演化，星空、星云、黑洞会慢慢变化，最终定格对应结局。</div>
</div>
<div class="log-area" id="logPanel">系统待机，等待操作<br></div>
</div>
</div>
</div>
<script>
// ===== 基础画布初始化 =====
const canvas = document.getElementById("spaceCanvas");
const ctx = canvas.getContext("2d");
function resizeCanvas(){
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
resizeCanvas();
window.addEventListener("resize",resizeCanvas);
// 拉杆文字映射
const leverWord = {
starPower:["枯竭","偏低","中等","狂暴"],
darkMatter:["稀薄","偏少","正常","饱和"],
civilLv:["原始部落","行星文明","星际初级","神级文明"],
spaceCurve:["坍塌倾向","轻微扭曲","平稳","撕裂动荡"],
blackHole:["休眠","低速吸积","剧烈吞噬","黑洞喷发"],
voidRad:["微弱","普通","强辐射","虚空暴走"]
};
// 36完整结局库
const allEndings = [
{id:1,name:"结局1：恒星熄灭，星系冰封",desc:"主恒星能量耗尽，行星全域冰封，所有生命彻底消亡。"},
{id:2,name:"结局2：恒星温和衰老，文明搬迁",desc:"恒星缓缓冷却，星际文明批量移民新恒星，族群顺利延续。"},
{id:3,name:"结局3：恒星稳定永续，星系安乐",desc:"恒星能量永久平衡，环境宜居，文明安稳发展亿万年。"},
{id:4,name:"结局4：恒星耀斑扫荡，地表归零",desc:"狂暴恒星爆发巨型耀斑，大气层粉碎，地表万物焦土化。"},
{id:5,name:"结局5：暗物质拉扯恒星解体",desc:"高密度暗物质撕裂恒星，整个星系化为星际尘埃。"},
{id:6,name:"结局6：暗物质稳定托举恒星",desc:"暗物质形成引力护罩，恒星寿命翻倍，宇宙环境极度安稳。"},
{id:7,name:"结局7：恒星炸裂催生星云生命",desc:"超新星炸开星云，海量宜居星球诞生，生命遍地萌发。"},
{id:8,name:"结局8：神级文明手动稳住恒星",desc:"顶级文明操控引力锁死恒星，实现永恒稳定发光。"},
{id:9,name:"结局9：时空扭曲撕碎恒星内核",desc:"空间剧烈扭曲击碎恒星内核，星系慢慢消散。"},
{id:10,name:"结局10：休眠黑洞安然无事",desc:"黑洞深度休眠，引力微弱，完全不干扰星系运转。"},
{id:11,name:"结局11：黑洞缓慢吞噬小行星带",desc:"黑洞只吸纳太空碎石，行星完好，星际空间变得洁净。"},
{id:12,name:"结局12：黑洞吞掉外围气态巨行星",desc:"气态行星被黑洞吞噬，岩石行星侥幸存活。"},
{id:13,name:"结局13：黑洞喷流击穿整个星系",desc:"黑洞高能喷流横穿星域，绝大多数天体被汽化销毁。"},
{id:14,name:"结局14：暗物质中和黑洞引力",desc:"暗物质抵消黑洞引力，狂暴黑洞被禁锢，无法吞噬天体。"},
{id:15,name:"结局15：文明造出黑洞屏障",desc:"高阶文明搭建引力屏障，隔绝黑洞威胁，母星得以保全。"},
{id:16,name:"结局16：时空裂缝连通黑洞内部",desc:"空间撕裂对接黑洞奇点，星系全部物质坠入高维。"},
{id:17,name:"结局17：黑洞与恒星互相环绕共生",desc:"恒星与黑洞组成双星系统，形成独一无二的稳定宇宙环境。"},
{id:18,name:"结局18：虚空辐射引爆黑洞奇点",desc:"虚空能量灌入奇点引爆黑洞，整片星域彻底湮灭。"},
{id:19,name:"结局19：原始文明随小行星灭绝",desc:"无科技防御，小行星撞击来临，原始生命全部灭绝。"},
{id:20,name:"结局20：行星文明开启太空探索",desc:"行星文明批量发射探测器，正式踏出母星迈入星际。"},
{id:21,name:"结局21：星际文明组建银河联盟",desc:"多文明互通共建银河联盟，星系迎来长期和平。"},
{id:22,name:"结局22：神级文明改造宇宙法则",desc:"顶尖文明改写物理规则，自由定制重力、光线，重塑宇宙。"},
{id:23,name:"结局23：暗物质被文明开采利用",desc:"文明掌控暗物质能源，飞船无限续航，实现跨银河远航。"},
{id:24,name:"结局24：时空科技实现肉身穿梭",desc:"吃透空间曲率，生命体可自由瞬移，抛弃所有交通工具。"},
{id:25,name:"结局25：黑洞能源被文明掌控",desc:"搭建黑洞发电设施，获取近乎无限能量，科技爆炸式上涨。"},
{id:26,name:"结局26：虚空能量让文明进化成灵体",desc:"虚空辐射重塑生命形态，全部生灵化为纯能量灵体。"},
{id:27,name:"结局27：文明自我封锁拒绝宇宙",desc:"高等文明封闭所有星际通道，永久固守母星闭门发展。"},
{id:28,name:"结局28：宇宙整体缓慢坍缩轮回",desc:"引力大于膨胀力，全宇宙缓缓收缩，最终奇点重启轮回。"},
{id:29,name:"结局29：时空小幅波动出现平行宇宙残影",desc:"轻微扭曲映照平行世界，可观测其他宇宙的模糊影像。"},
{id:30,name:"结局30：宇宙平稳匀速永久膨胀",desc:"空间稳定扩张，星系互相远离，宇宙慢慢变冷沉寂。"},
{id:31,name:"结局31：空间全面撕裂多重宇宙重叠",desc:"曲率彻底失控，无数平行宇宙交融，万物秩序混乱。"},
{id:32,name:"结局32：虚空低辐射诞生虚空生物",desc:"温和虚空能量诞生太空浮游巨兽，与本土生命和平共存。"},
{id:33,name:"结局33：强虚空辐射抹杀碳基生命",desc:"高强度虚空射线摧毁细胞结构，血肉生命体尽数灭亡。"},
{id:34,name:"结局34：虚空暴走融化空间边界",desc:"虚空能量泛滥消融维度壁垒，所有物质消解于虚无。"},
{id:35,name:"结局35：时空跳跃抵达创世起点",desc:"强行跃迁回到大爆炸瞬间，亲眼见证宇宙诞生源头。"},
{id:36,name:"结局36：触碰虚空本源，跳出所有宇宙",desc:"触达虚空根源，脱离全部维度规则，抵达无边界绝对虚无。"}
];
// DOM快捷获取
const logPanel = document.getElementById("logPanel");
const resultBox = document.getElementById("resultBox");
const progressBar = document.getElementById("progress");
// 实时更新拉杆文字
function refreshLeverText(){
document.getElementById("starTxt").innerText=leverWord.starPower[+document.getElementById("starPower").value-1];
document.getElementById("darkTxt").innerText=leverWord.darkMatter[+document.getElementById("darkMatter").value-1];
document.getElementById("civTxt").innerText=leverWord.civilLv[+document.getElementById("civilLv").value-1];
document.getElementById("curveTxt").innerText=leverWord.spaceCurve[+document.getElementById("spaceCurve").value-1];
document.getElementById("bhTxt").innerText=leverWord.blackHole[+document.getElementById("blackHole").value-1];
document.getElementById("radTxt").innerText=leverWord.voidRad[+document.getElementById("voidRad").value-1];
}
document.querySelectorAll("input[type=range]").forEach(d=>d.oninput=refreshLeverText);
// 日志打印
function addLog(msg){
const t=new Date();
const time=`${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`;
logPanel.innerHTML+=`[${time}] ${msg}<br>`;
logPanel.scrollTop=logPanel.scrollHeight;
}
// 宇宙渲染全局参数（可动态变化，用来做渐变演化）
let universeState={
baseColor:{r:0,g:8,b:30},
starCount:120,
starBright:1,
nebulaHue:220,
blackHoleSize:0,
warpLevel:0,
voidParticle:0,
fadeAll:1, // 整体透明度，归零用
pixelSize:4 // 像素化尺寸
};
let starList=[];
// 初始化星空点阵
function initStars(){
starList=[];
for(let i=0;i<universeState.starCount;i++){
starList.push({
x:Math.random()*canvas.width,
y:Math.random()*canvas.height,
size:Math.random()*2+1,
twinkle:Math.random()*Math.PI*2
})
}
}
initStars();
// 像素化宇宙绘制主函数
function drawUniverse(){
const w=canvas.width,h=canvas.height;
// 底色
ctx.fillStyle=`rgba(${universeState.baseColor.r},${universeState.baseColor.g},${universeState.baseColor.b},${universeState.fadeAll})`;
ctx.fillRect(0,0,w,h);
// 像素化前置：缩放实现马赛克
ctx.imageSmoothingEnabled=false;
const px=universeState.pixelSize;
// 绘制星云渐变
ctx.globalAlpha=universeState.fadeAll*0.35;
const grad=ctx.createRadialGradient(w/2,h/2,0,w/2,h/2,w/2);
grad.addColorStop(0,`hsla(${universeState.nebulaHue},80%,50%,0.6)`);
grad.addColorStop(1,"transparent");
ctx.fillStyle=grad;
ctx.fillRect(0,0,w,h);
ctx.globalAlpha=1;
// 绘制恒星闪烁
starList.forEach(s=>{
s.twinkle+=0.03;
let br=universeState.starBright*(Math.sin(s.twinkle)*0.4+0.6)*universeState.fadeAll;
ctx.fillStyle=`rgba(255,255,255,${br})`;
ctx.fillRect(Math.floor(s.x/px)*px,Math.floor(s.y/px)*px,s.size*px,s.size*px);
})
// 绘制黑洞
if(universeState.blackHoleSize>0){
const cx=w/2,cy=h/2;
ctx.globalAlpha=universeState.fadeAll;
// 黑洞本体
ctx.fillStyle="#000000";
ctx.beginPath();
ctx.arc(cx,cy,universeState.blackHoleSize,0,Math.PI*2);
ctx.fill();
// 吸积盘
ctx.strokeStyle=`hsla(30,100%,60%,${universeState.fadeAll})`;
ctx.lineWidth=px;
ctx.beginPath();
ctx.arc(cx,cy,universeState.blackHoleSize+px*2,0,Math.PI*2);
ctx.stroke();
ctx.globalAlpha=1;
}
// 空间扭曲波纹
if(universeState.warpLevel>0){
ctx.strokeStyle=`rgba(160,120,255,${universeState.warpLevel*universeState.fadeAll*0.4})`;
ctx.lineWidth=2;
for(let r=30;r<Math.max(w,h);r+=40){
ctx.beginPath();
ctx.arc(w/2,h/2,r,0,Math.PI*2);
ctx.stroke();
}
}
// 虚空粒子
ctx.fillStyle=`rgba(190,80,255,${universeState.voidParticle*universeState.fadeAll})`;
for(let p=0;p<universeState.voidParticle*8;p++){
let x=Math.random()*w;
let y=Math.random()*h;
ctx.fillRect(Math.floor(x/px)*px,Math.floor(y/px)*px,px,px);
}
requestAnimationFrame(drawUniverse);
}
drawUniverse();
// 根据拉杆数值，计算目标宇宙画面参数
function getTargetState(){
let s=+document.getElementById("starPower").value;
let d=+document.getElementById("darkMatter").value;
let c=+document.getElementById("civilLv").value;
let cu=+document.getElementById("spaceCurve").value;
let bh=+document.getElementById("blackHole").value;
let vr=+document.getElementById("voidRad").value;
let target={...universeState};
// 恒星
if(s===1){target.baseColor={r:20,g:15,b:40};target.starBright=0.3;target.nebulaHue=200}
if(s===2){target.baseColor={r:0,g:8,b:30};target.starBright=1;target.nebulaHue=220}
if(s===3){target.baseColor={r:25,g:20,b:50};target.starBright=1.4;target.nebulaHue=240}
if(s===4){target.baseColor={r:60,g:15,b:10};target.starBright=2;target.nebulaHue=20}
// 黑洞
target.blackHoleSize=bh*px*4;
// 时空扭曲
target.warpLevel=(cu-1)/3;
// 虚空粒子
target.voidParticle=vr/4;
// 文明越高画面越干净明亮
target.starCount=120+(c-2)*30;
return target;
}
// 平滑渐变动画：当前状态逐步趋近目标，演算总时长1.8秒，分阶段
function animateEvolve(targetEndId){
let progress=0;
const totalTime=1800;
const stepTime=30;
const startState={...universeState};
const targetDraw=getTargetState();
const anim=setInterval(()=>{
progress+=stepTime;
let rate=Math.min(progress/totalTime,1);
progressBar.style.width=(rate*100)+"%";
// 所有画面参数线性缓动变化
universeState.baseColor.r=lerp(startState.baseColor.r,targetDraw.baseColor.r,rate);
universeState.baseColor.g=lerp(startState.baseColor.g,targetDraw.baseColor.g,rate);
universeState.baseColor.b=lerp(startState.baseColor.b,targetDraw.baseColor.b,rate);
universeState.starBright=lerp(startState.starBright,targetDraw.starBright,rate);
universeState.nebulaHue=lerp(startState.nebulaHue,targetDraw.nebulaHue,rate);
universeState.blackHoleSize=lerp(startState.blackHoleSize,targetDraw.blackHoleSize,rate);
universeState.warpLevel=lerp(startState.warpLevel,targetDraw.warpLevel,rate);
universeState.voidParticle=lerp(startState.voidParticle,targetDraw.voidParticle,rate);
universeState.starCount=lerp(startState.starCount,targetDraw.starCount,rate);
// 结局归零逻辑：毁灭结局整体透明度慢慢降到0
const ending=allEndings.find(e=>e.id===targetEndId);
let fadeGoal=1;
const destroyGroup=[1,4,5,9,13,16,18,19,33,34];
if(destroyGroup.includes(targetEndId)) fadeGoal=Math.max(0,1-rate);
universeState.fadeAll=lerp(startState.fadeAll,fadeGoal,rate);
// 阶段日志
if(rate>0.2&&rate<0.25)addLog("宇宙参数开始扰动，星云色彩变动");
if(rate>0.4&&rate<0.45)addLog("恒星亮度、黑洞形态逐步变化，空间出现扭曲波纹");
if(rate>0.6&&rate<0.65)addLog("虚空粒子、暗物质引力持续改变星域样貌");
if(rate>0.8&&rate<0.85)addLog("宇宙形态定型，结局即将锁定");
if(rate>=1){
clearInterval(anim);
showFinalEnding(targetEndId);
}
},stepTime)
}
// 线性插值函数，用于平滑过渡
function lerp(a,b,t){return a+(b-a)*t}
// 计算结局编号
function calcEndNum(btnTag){
let sum=0;
sum+=+document.getElementById("starPower").value;
sum+=+document.getElementById("darkMatter").value;
sum+=+document.getElementById("civilLv").value;
sum+=+document.getElementById("spaceCurve").value;
sum+=+document.getElementById("blackHole").value;
sum+=+document.getElementById("voidRad").value;
if(btnTag==="jump")sum+=7;
if(btnTag==="void")sum+=13;
if(btnTag==="reset")sum-=2;
return ((sum-1)%36)+1;
}
// 展示最终结局文字
function showFinalEnding(id){
const ed=allEndings.find(x=>x.id===id);
resultBox.innerHTML=`
<div class="end-head">${ed.name}</div>
<div class="end-desc">${ed.desc}</div>
`;
addLog(`演化全部结束，最终锁定【${id}号结局】`);
}
// 按钮绑定
document.getElementById("runBtn").onclick=()=>{
const eid=calcEndNum("start");
addLog("点击常规演算，宇宙启动渐进演化流程");
animateEvolve(eid);
}
document.getElementById("jumpBtn").onclick=()=>{
const eid=calcEndNum("jump");
addLog("时空跃迁启动，空间参数偏移，宇宙缓慢重构");
animateEvolve(eid);
}
document.getElementById("voidBtn").onclick=()=>{
const eid=calcEndNum("void");
addLog("触碰虚空本源，虚空能量扩散，宇宙缓慢异变");
animateEvolve(eid);
}
document.getElementById("resetBtn").onclick=()=>{
// 拉杆复位
document.getElementById("starPower").value=2;
document.getElementById("darkMatter").value=2;
document.getElementById("civilLv").value=2;
document.getElementById("spaceCurve").value=2;
document.getElementById("blackHole").value=1;
document.getElementById("voidRad").value=1;
refreshLeverText();
// 画面重置
universeState={
baseColor:{r:0,g:8,b:30},starCount:120,starBright:1,nebulaHue:220,
blackHoleSize:0,warpLevel:0,voidParticle:0,fadeAll:1,pixelSize:4
};
initStars();
progressBar.style.width="0%";
logPanel.innerHTML="重置完成，所有参数回归初始<br>";
resultBox.innerHTML=`<div class="end-head">重置就绪</div><div class="end-desc">宇宙回归初始稳定状态，重新调整拉杆开始新演化。</div>`;
}
refreshLeverText();
</script>
</body>
</html>
Game Source: 像素化动态宇宙模拟器｜36结局渐进演化
Creator: BraveDragon92
Libraries: none
Complexity: complex (418 lines, 21.1 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: 36-bravedragon92" to link back to the original. Then publish at arcadelab.ai/publish.