1248 lines
54 KiB
HTML
1248 lines
54 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|||
|
|
<title>星际文明探索者 | Interstellar Explorer</title>
|
|||
|
|
<style>
|
|||
|
|
/* --- 基础样式 --- */
|
|||
|
|
:root {
|
|||
|
|
--primary-color: #00f3ff;
|
|||
|
|
--secondary-color: #ff0055;
|
|||
|
|
--bg-glass: rgba(12, 12, 28, 0.75);
|
|||
|
|
--border-glass: 1px solid rgba(255, 255, 255, 0.15);
|
|||
|
|
--text-glow: 0 0 10px rgba(0, 243, 255, 0.5);
|
|||
|
|
--font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
background-color: #050510;
|
|||
|
|
font-family: var(--font-main);
|
|||
|
|
color: white;
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
canvas {
|
|||
|
|
display: block;
|
|||
|
|
width: 100vw;
|
|||
|
|
height: 100vh;
|
|||
|
|
outline: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- UI 通用组件 --- */
|
|||
|
|
.ui-layer {
|
|||
|
|
position: absolute;
|
|||
|
|
pointer-events: none;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hud-panel {
|
|||
|
|
background: var(--bg-glass);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
-webkit-backdrop-filter: blur(10px);
|
|||
|
|
border: var(--border-glass);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 15px;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
background: rgba(0, 243, 255, 0.1);
|
|||
|
|
border: 1px solid var(--primary-color);
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-family: var(--font-main);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn:hover {
|
|||
|
|
background: var(--primary-color);
|
|||
|
|
color: #000;
|
|||
|
|
box-shadow: 0 0 15px var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-danger {
|
|||
|
|
border-color: var(--secondary-color);
|
|||
|
|
color: var(--secondary-color);
|
|||
|
|
background: rgba(255, 0, 85, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-danger:hover {
|
|||
|
|
background: var(--secondary-color);
|
|||
|
|
color: white;
|
|||
|
|
box-shadow: 0 0 15px var(--secondary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- HUD 布局 --- */
|
|||
|
|
#hud-top-left {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
left: 20px;
|
|||
|
|
width: 240px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#hud-top-right {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
text-align: right;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#radar-container {
|
|||
|
|
position: relative;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#hud-center-msg {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 24px;
|
|||
|
|
text-shadow: var(--text-glow);
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.5s;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#hud-bottom-center {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 20px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- 状态条 --- */
|
|||
|
|
.stat-row { margin-bottom: 8px; }
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #aaa;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
.progress-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 6px;
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 3px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
.progress-fill { height: 100%; width: 100%; transition: width 0.3s ease-out; }
|
|||
|
|
.hp-fill { background: var(--secondary-color); box-shadow: 0 0 8px var(--secondary-color); }
|
|||
|
|
.shield-fill { background: var(--primary-color); box-shadow: 0 0 8px var(--primary-color); }
|
|||
|
|
.xp-fill { background: #ffcc00; }
|
|||
|
|
|
|||
|
|
/* --- 模态框 --- */
|
|||
|
|
.modal-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: rgba(0, 0, 0, 0.7);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 100;
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: opacity 0.3s;
|
|||
|
|
backdrop-filter: blur(5px);
|
|||
|
|
}
|
|||
|
|
.modal-overlay.active {
|
|||
|
|
opacity: 1;
|
|||
|
|
pointer-events: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.modal-content {
|
|||
|
|
width: 600px;
|
|||
|
|
max-width: 90%;
|
|||
|
|
background: rgba(16, 20, 35, 0.95);
|
|||
|
|
border: 1px solid var(--primary-color);
|
|||
|
|
padding: 30px;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: 0 0 40px rgba(0, 243, 255, 0.15);
|
|||
|
|
position: relative;
|
|||
|
|
transform: scale(0.9);
|
|||
|
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|||
|
|
}
|
|||
|
|
.modal-overlay.active .modal-content { transform: scale(1); }
|
|||
|
|
|
|||
|
|
h2 { margin-top: 0; color: var(--primary-color); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; letter-spacing: 2px; font-size: 24px;}
|
|||
|
|
|
|||
|
|
.upgrade-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin: 25px 0;
|
|||
|
|
}
|
|||
|
|
.upgrade-card {
|
|||
|
|
background: rgba(255,255,255,0.03);
|
|||
|
|
padding: 15px 10px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border: 1px solid transparent;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
.upgrade-card:hover {
|
|||
|
|
border-color: var(--primary-color);
|
|||
|
|
background: rgba(0, 243, 255, 0.05);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
.upgrade-icon { font-size: 32px; display: block; margin-bottom: 10px; }
|
|||
|
|
.upgrade-name { font-size: 14px; font-weight: bold; color: #eee; }
|
|||
|
|
.upgrade-level { font-size: 12px; color: #666; margin-top: 5px; }
|
|||
|
|
.upgrade-cost { font-size: 12px; color: #ffcc00; margin-top: 5px; display: block;}
|
|||
|
|
|
|||
|
|
/* --- 扫描面板细节 --- */
|
|||
|
|
.scan-details {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: auto 1fr;
|
|||
|
|
gap: 8px 20px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
background: rgba(0,0,0,0.3);
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
.scan-label { color: #aaa; }
|
|||
|
|
.scan-value { color: #fff; text-align: right; font-family: 'Courier New', monospace; }
|
|||
|
|
|
|||
|
|
/* --- 交互提示 --- */
|
|||
|
|
.interaction-key {
|
|||
|
|
display: inline-block;
|
|||
|
|
border: 1px solid rgba(255,255,255,0.4);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 2px 6px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
background: rgba(255,255,255,0.1);
|
|||
|
|
margin-right: 5px;
|
|||
|
|
font-family: monospace;
|
|||
|
|
min-width: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* --- 准星 --- */
|
|||
|
|
#crosshair {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 5;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
#crosshair::before, #crosshair::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
background: rgba(255, 255, 255, 0.6);
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
#crosshair::before { width: 2px; height: 100%; }
|
|||
|
|
#crosshair::after { height: 2px; width: 100%; }
|
|||
|
|
#crosshair.hovering::before, #crosshair.hovering::after { background: var(--primary-color); height: 120%; width: 120%; }
|
|||
|
|
#crosshair-hover-text {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -25px;
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
font-size: 12px;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.2s;
|
|||
|
|
text-shadow: 0 0 5px black;
|
|||
|
|
}
|
|||
|
|
#crosshair.hovering #crosshair-hover-text { opacity: 1; }
|
|||
|
|
|
|||
|
|
/* --- 加载遮罩 --- */
|
|||
|
|
#loader {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #000;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
transition: opacity 1s ease-out;
|
|||
|
|
}
|
|||
|
|
.loader-title { font-size: 32px; letter-spacing: 8px; font-weight: 300; margin-bottom: 20px; text-shadow: 0 0 20px var(--primary-color); }
|
|||
|
|
.loader-bar { width: 200px; height: 2px; background: #333; position: relative; overflow: hidden; }
|
|||
|
|
.loader-progress {
|
|||
|
|
position: absolute; left: 0; top: 0; height: 100%; width: 0%;
|
|||
|
|
background: var(--primary-color);
|
|||
|
|
box-shadow: 0 0 10px var(--primary-color);
|
|||
|
|
animation: load 1.5s ease-in-out forwards;
|
|||
|
|
}
|
|||
|
|
@keyframes load { 100% { width: 100%; } }
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- 引入外部库 (CDN) -->
|
|||
|
|
<!-- Three.js -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
|||
|
|
|
|||
|
|
<!-- 修复：使用经典的 cannon.js (0.6.2) 确保兼容全局变量 CANNON -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script>
|
|||
|
|
|
|||
|
|
<!-- GSAP (动画) -->
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<!-- 加载界面 -->
|
|||
|
|
<div id="loader">
|
|||
|
|
<div class="loader-title">INTERSTELLAR</div>
|
|||
|
|
<div style="font-size: 12px; color: #666; margin-bottom: 20px;">初始化物理引擎...</div>
|
|||
|
|
<div class="loader-bar"><div class="loader-progress"></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 3D 画布 -->
|
|||
|
|
<div id="canvas-container"></div>
|
|||
|
|
|
|||
|
|
<!-- 准星 -->
|
|||
|
|
<div id="crosshair"><div id="crosshair-hover-text">按 F 扫描</div></div>
|
|||
|
|
|
|||
|
|
<!-- UI 层 -->
|
|||
|
|
<div class="ui-layer" id="ui-layer">
|
|||
|
|
|
|||
|
|
<!-- 左上角：状态 -->
|
|||
|
|
<div id="hud-top-left" class="hud-panel">
|
|||
|
|
<div class="stat-row">
|
|||
|
|
<div class="stat-label"><span>结构完整性 (HP)</span> <span id="hp-val">100%</span></div>
|
|||
|
|
<div class="progress-bar"><div id="hp-bar" class="progress-fill hp-fill"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-row">
|
|||
|
|
<div class="stat-label"><span>能量护盾</span> <span id="shield-val">100%</span></div>
|
|||
|
|
<div class="progress-bar"><div id="shield-bar" class="progress-fill shield-fill"></div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-row" style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top:10px;">
|
|||
|
|
<div class="stat-label"><span>资源储备</span></div>
|
|||
|
|
<div style="font-size: 24px; color: #ffcc00; text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);">
|
|||
|
|
<span id="res-count">0</span> <span style="font-size:12px; color:#888;">UNIT</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右上角：雷达 -->
|
|||
|
|
<div id="hud-top-right">
|
|||
|
|
<div id="radar-container" class="hud-panel" style="padding: 5px; display:inline-block;">
|
|||
|
|
<div id="radar-display" style="width: 120px; height: 120px; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; position: relative; background: rgba(0,0,0,0.5); overflow: hidden;">
|
|||
|
|
<!-- 中心玩家 -->
|
|||
|
|
<div style="position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 5px var(--primary-color);"></div>
|
|||
|
|
<!-- 动态雷达点将通过 JS 插入 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: 10px; font-size: 12px; color: #888; font-family: monospace;">POS: <span id="coords">0, 0</span></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 中央消息 -->
|
|||
|
|
<div id="hud-center-msg">
|
|||
|
|
<div id="msg-title" style="font-size: 32px; font-weight: bold; margin-bottom: 10px;">警告</div>
|
|||
|
|
<div id="msg-desc">侦测到敌对信号</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部中央：控制 -->
|
|||
|
|
<div id="hud-bottom-center" class="hud-panel" style="padding: 10px 25px;">
|
|||
|
|
<button class="btn" onclick="Game.openUpgradeMenu()">升级系统 [U]</button>
|
|||
|
|
<div style="font-size: 11px; color: #666; margin-left: 10px;">
|
|||
|
|
W/A/S/D 移动 • 鼠标 瞄准 • 左键 射击 • F 交互
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 扫描结果模态框 -->
|
|||
|
|
<div id="scan-modal" class="modal-overlay">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h2>行星分析报告</h2>
|
|||
|
|
<div class="scan-details">
|
|||
|
|
<span class="scan-label">行星代号:</span>
|
|||
|
|
<span class="scan-value" id="scan-name">Kepler-186f</span>
|
|||
|
|
|
|||
|
|
<span class="scan-label">大气成分:</span>
|
|||
|
|
<span class="scan-value" id="scan-atmo">氮气 78%, 氧气 21%</span>
|
|||
|
|
|
|||
|
|
<span class="scan-label">表面温度:</span>
|
|||
|
|
<span class="scan-value" id="scan-temp">-12°C</span>
|
|||
|
|
|
|||
|
|
<span class="scan-label">宜居指数:</span>
|
|||
|
|
<span class="scan-value" style="color: #0f0;" id="scan-habit">Class A</span>
|
|||
|
|
|
|||
|
|
<span class="scan-label">资源潜力:</span>
|
|||
|
|
<span class="scan-value" style="color: #ffcc00;" id="scan-res">高 (晶体矿)</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="text-align: right; margin-top: 25px;">
|
|||
|
|
<button class="btn btn-danger" onclick="Game.closeScanModal()">忽略</button>
|
|||
|
|
<button class="btn" onclick="Game.collectPlanetResources()">采集样本 [花费时间]</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 升级菜单模态框 -->
|
|||
|
|
<div id="upgrade-modal" class="modal-overlay">
|
|||
|
|
<div class="modal-content">
|
|||
|
|
<h2>飞船改装中心</h2>
|
|||
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|||
|
|
<span style="font-size: 14px; color: #888;">当前资源储备: </span>
|
|||
|
|
<span id="upgrade-res" style="color: #ffcc00; font-size: 18px; font-weight: bold;">0</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="upgrade-grid">
|
|||
|
|
<div class="upgrade-card" onclick="Game.upgradeShip('engine')">
|
|||
|
|
<span class="upgrade-icon">🚀</span>
|
|||
|
|
<div class="upgrade-name">引擎核心</div>
|
|||
|
|
<div class="upgrade-level">Lv <span id="lvl-engine">1</span></div>
|
|||
|
|
<span class="upgrade-cost">100 UNIT</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="upgrade-card" onclick="Game.upgradeShip('shield')">
|
|||
|
|
<span class="upgrade-icon">🛡️</span>
|
|||
|
|
<div class="upgrade-name">偏导护盾</div>
|
|||
|
|
<div class="upgrade-level">Lv <span id="lvl-shield">1</span></div>
|
|||
|
|
<span class="upgrade-cost">80 UNIT</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="upgrade-card" onclick="Game.upgradeShip('weapon')">
|
|||
|
|
<span class="upgrade-icon">⚡</span>
|
|||
|
|
<div class="upgrade-name">相位激光</div>
|
|||
|
|
<div class="upgrade-level">Lv <span id="lvl-weapon">1</span></div>
|
|||
|
|
<span class="upgrade-cost">120 UNIT</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="text-align: center;">
|
|||
|
|
<button class="btn btn-danger" onclick="Game.closeUpgradeMenu()">返回航行</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 游戏结束/开始界面 -->
|
|||
|
|
<div id="start-screen" class="modal-overlay active" style="background: rgba(0,0,0,0.85);">
|
|||
|
|
<div class="modal-content" style="text-align: center; max-width: 500px; border: 1px solid #fff;">
|
|||
|
|
<h1 style="font-size: 40px; margin-bottom: 5px; color: #fff;">星际文明探索者</h1>
|
|||
|
|
<div style="width: 50px; height: 2px; background: var(--primary-color); margin: 15px auto;"></div>
|
|||
|
|
<p style="color: #aaa; line-height: 1.6; font-size: 14px;">
|
|||
|
|
驾驶飞船探索未知宇宙，采集稀有资源，升级战舰。<br>
|
|||
|
|
驾驶物理引擎飞船，体验太空漂移。
|
|||
|
|
</p>
|
|||
|
|
<div style="text-align: left; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 6px; margin: 25px 0; font-size: 13px; display: inline-block;">
|
|||
|
|
<div style="margin-bottom: 5px;"><span class="interaction-key">W</span><span class="interaction-key">A</span><span class="interaction-key">S</span><span class="interaction-key">D</span> 移动引擎 (具有惯性)</div>
|
|||
|
|
<div style="margin-bottom: 5px;"><span class="interaction-key">鼠标</span> 旋转与瞄准</div>
|
|||
|
|
<div style="margin-bottom: 5px;"><span class="interaction-key">左键</span> 射击</div>
|
|||
|
|
<div style="margin-bottom: 5px;"><span class="interaction-key">F</span> 扫描星球 / 采集</div>
|
|||
|
|
<div><span class="interaction-key">U</span> 升级系统</div>
|
|||
|
|
</div>
|
|||
|
|
<br>
|
|||
|
|
<button class="btn" style="font-size: 18px; padding: 12px 50px; width: 100%;" onclick="Game.start()">启动引擎</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// --- 1. 音频管理器 ---
|
|||
|
|
class SoundManager {
|
|||
|
|
constructor() {
|
|||
|
|
this.ctx = new (window.AudioContext || window.webkitAudioContext)();
|
|||
|
|
this.masterGain = this.ctx.createGain();
|
|||
|
|
this.masterGain.gain.value = 0.3;
|
|||
|
|
this.masterGain.connect(this.ctx.destination);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playShoot() {
|
|||
|
|
if(this.ctx.state === 'suspended') this.ctx.resume();
|
|||
|
|
const osc = this.ctx.createOscillator();
|
|||
|
|
const gain = this.ctx.createGain();
|
|||
|
|
osc.type = 'sawtooth';
|
|||
|
|
osc.frequency.setValueAtTime(800, this.ctx.currentTime);
|
|||
|
|
osc.frequency.exponentialRampToValueAtTime(100, this.ctx.currentTime + 0.15);
|
|||
|
|
gain.gain.setValueAtTime(0.3, this.ctx.currentTime);
|
|||
|
|
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.15);
|
|||
|
|
osc.connect(gain);
|
|||
|
|
gain.connect(this.masterGain);
|
|||
|
|
osc.start();
|
|||
|
|
osc.stop(this.ctx.currentTime + 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playExplosion() {
|
|||
|
|
if(this.ctx.state === 'suspended') this.ctx.resume();
|
|||
|
|
const bufferSize = this.ctx.sampleRate * 0.4;
|
|||
|
|
const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
|
|||
|
|
const data = buffer.getChannelData(0);
|
|||
|
|
for (let i = 0; i < bufferSize; i++) {
|
|||
|
|
data[i] = Math.random() * 2 - 1;
|
|||
|
|
}
|
|||
|
|
const noise = this.ctx.createBufferSource();
|
|||
|
|
noise.buffer = buffer;
|
|||
|
|
const filter = this.ctx.createBiquadFilter();
|
|||
|
|
filter.type = 'lowpass';
|
|||
|
|
filter.frequency.value = 800;
|
|||
|
|
filter.frequency.linearRampToValueAtTime(100, this.ctx.currentTime + 0.4);
|
|||
|
|
const gain = this.ctx.createGain();
|
|||
|
|
gain.gain.setValueAtTime(0.5, this.ctx.currentTime);
|
|||
|
|
gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.4);
|
|||
|
|
noise.connect(filter);
|
|||
|
|
filter.connect(gain);
|
|||
|
|
gain.connect(this.masterGain);
|
|||
|
|
noise.start();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playThrust() {
|
|||
|
|
if(this.ctx.state === 'suspended') this.ctx.resume();
|
|||
|
|
const osc = this.ctx.createOscillator();
|
|||
|
|
const gain = this.ctx.createGain();
|
|||
|
|
osc.type = 'triangle'; // 更柔和的引擎声
|
|||
|
|
osc.frequency.setValueAtTime(60, this.ctx.currentTime);
|
|||
|
|
osc.frequency.linearRampToValueAtTime(40, this.ctx.currentTime + 0.1);
|
|||
|
|
gain.gain.setValueAtTime(0.05, this.ctx.currentTime);
|
|||
|
|
gain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.1);
|
|||
|
|
osc.connect(gain);
|
|||
|
|
gain.connect(this.masterGain);
|
|||
|
|
osc.start();
|
|||
|
|
osc.stop(this.ctx.currentTime + 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
playCollect() {
|
|||
|
|
if(this.ctx.state === 'suspended') this.ctx.resume();
|
|||
|
|
const osc = this.ctx.createOscillator();
|
|||
|
|
const gain = this.ctx.createGain();
|
|||
|
|
osc.type = 'sine';
|
|||
|
|
osc.frequency.setValueAtTime(1200, this.ctx.currentTime);
|
|||
|
|
osc.frequency.exponentialRampToValueAtTime(2000, this.ctx.currentTime + 0.1);
|
|||
|
|
gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
|
|||
|
|
gain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.2);
|
|||
|
|
osc.connect(gain);
|
|||
|
|
gain.connect(this.masterGain);
|
|||
|
|
osc.start();
|
|||
|
|
osc.stop(this.ctx.currentTime + 0.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- 2. 全局配置与状态 ---
|
|||
|
|
const Config = {
|
|||
|
|
colors: { ship: 0xffffff, engine: 0x00f3ff, laser: 0xff0055, enemy: 0xff3333, resource: 0xffcc00 },
|
|||
|
|
worldSize: 2000,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const State = {
|
|||
|
|
resources: 0,
|
|||
|
|
hp: 100,
|
|||
|
|
maxHp: 100,
|
|||
|
|
shield: 100,
|
|||
|
|
maxShield: 100,
|
|||
|
|
levels: { engine: 1, shield: 1, weapon: 1 },
|
|||
|
|
isPlaying: false,
|
|||
|
|
isPaused: false,
|
|||
|
|
scannedPlanet: null,
|
|||
|
|
upgradeCosts: { engine: 100, shield: 80, weapon: 120 }
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// --- 3. 游戏引擎核心 ---
|
|||
|
|
class GameEngine {
|
|||
|
|
constructor() {
|
|||
|
|
// 检查 CANNON 是否加载
|
|||
|
|
if (typeof CANNON === 'undefined') {
|
|||
|
|
console.error("CANNON 物理库未能正确加载，请检查网络连接。");
|
|||
|
|
alert("错误：物理引擎库加载失败，请刷新页面。");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Three.js 初始化
|
|||
|
|
this.scene = new THREE.Scene();
|
|||
|
|
this.scene.fog = new THREE.FogExp2(0x050510, 0.0008);
|
|||
|
|
|
|||
|
|
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 5000);
|
|||
|
|
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
|||
|
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
this.renderer.shadowMap.enabled = true;
|
|||
|
|
document.getElementById('canvas-container').appendChild(this.renderer.domElement);
|
|||
|
|
|
|||
|
|
// Cannon.js 物理世界
|
|||
|
|
this.world = new CANNON.World();
|
|||
|
|
this.world.gravity.set(0, 0, 0);
|
|||
|
|
this.physicsMaterial = new CANNON.Material('slippery');
|
|||
|
|
const contactMaterial = new CANNON.ContactMaterial(this.physicsMaterial, this.physicsMaterial, {
|
|||
|
|
friction: 0.1,
|
|||
|
|
restitution: 0.3
|
|||
|
|
});
|
|||
|
|
this.world.addContactMaterial(contactMaterial);
|
|||
|
|
|
|||
|
|
// 灯光
|
|||
|
|
this.scene.add(new THREE.AmbientLight(0x404040, 1.2));
|
|||
|
|
const sunLight = new THREE.DirectionalLight(0xffffff, 1.2);
|
|||
|
|
sunLight.position.set(500, 300, 500);
|
|||
|
|
sunLight.castShadow = true;
|
|||
|
|
this.scene.add(sunLight);
|
|||
|
|
|
|||
|
|
// 实体与队列
|
|||
|
|
this.entities = [];
|
|||
|
|
this.particles = []; // 简单的视觉粒子
|
|||
|
|
this.radarDots = [];
|
|||
|
|
|
|||
|
|
// 输入
|
|||
|
|
this.input = { w: false, a: false, s: false, d: false, mouseX: 0, mouseY: 0, mouseDown: false };
|
|||
|
|
|
|||
|
|
// 工具
|
|||
|
|
this.clock = new THREE.Clock();
|
|||
|
|
this.raycaster = new THREE.Raycaster();
|
|||
|
|
this.plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // 用于鼠标拾取的平面
|
|||
|
|
|
|||
|
|
this.initListeners();
|
|||
|
|
this.createEnvironment();
|
|||
|
|
|
|||
|
|
// 绑定动画循环
|
|||
|
|
this.animate = this.animate.bind(this);
|
|||
|
|
requestAnimationFrame(this.animate);
|
|||
|
|
|
|||
|
|
// 移除加载遮罩
|
|||
|
|
setTimeout(() => {
|
|||
|
|
document.getElementById('loader').style.opacity = 0;
|
|||
|
|
setTimeout(() => document.getElementById('loader').style.display = 'none', 1000);
|
|||
|
|
}, 1500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initListeners() {
|
|||
|
|
window.addEventListener('resize', () => {
|
|||
|
|
this.camera.aspect = window.innerWidth / window.innerHeight;
|
|||
|
|
this.camera.updateProjectionMatrix();
|
|||
|
|
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keydown', e => {
|
|||
|
|
if(e.key.toLowerCase() === 'w') this.input.w = true;
|
|||
|
|
if(e.key.toLowerCase() === 'a') this.input.a = true;
|
|||
|
|
if(e.key.toLowerCase() === 's') this.input.s = true;
|
|||
|
|
if(e.key.toLowerCase() === 'd') this.input.d = true;
|
|||
|
|
});
|
|||
|
|
document.addEventListener('keyup', e => {
|
|||
|
|
if(e.key.toLowerCase() === 'w') this.input.w = false;
|
|||
|
|
if(e.key.toLowerCase() === 'a') this.input.a = false;
|
|||
|
|
if(e.key.toLowerCase() === 's') this.input.s = false;
|
|||
|
|
if(e.key.toLowerCase() === 'd') this.input.d = false;
|
|||
|
|
});
|
|||
|
|
document.addEventListener('mousemove', e => {
|
|||
|
|
this.input.mouseX = (e.clientX / window.innerWidth) * 2 - 1;
|
|||
|
|
this.input.mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
|
|||
|
|
});
|
|||
|
|
document.addEventListener('mousedown', () => {
|
|||
|
|
this.input.mouseDown = true;
|
|||
|
|
if(State.isPlaying && !State.isPaused && this.player) this.shoot(this.player, true);
|
|||
|
|
});
|
|||
|
|
document.addEventListener('mouseup', () => this.input.mouseDown = false);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createEnvironment() {
|
|||
|
|
// 星空
|
|||
|
|
const starGeo = new THREE.BufferGeometry();
|
|||
|
|
const starCount = 3000;
|
|||
|
|
const posArray = new Float32Array(starCount * 3);
|
|||
|
|
for(let i=0; i<starCount*3; i++) posArray[i] = (Math.random()-0.5)*4000;
|
|||
|
|
starGeo.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
|
|||
|
|
this.scene.add(new THREE.Points(starGeo, new THREE.PointsMaterial({size: 1.5, color: 0xffffff, transparent: true})));
|
|||
|
|
|
|||
|
|
// 随机生成星球
|
|||
|
|
for(let i=0; i<6; i++) {
|
|||
|
|
const pos = new THREE.Vector3((Math.random()-0.5)*1500, 0, (Math.random()-0.5)*1500);
|
|||
|
|
if(pos.length() < 400) pos.setLength(600);
|
|||
|
|
this.createPlanet(pos);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createPlanet(pos) {
|
|||
|
|
const r = 80 + Math.random() * 100;
|
|||
|
|
const geo = new THREE.SphereGeometry(r, 32, 32);
|
|||
|
|
const color = new THREE.Color().setHSL(Math.random(), 0.8, 0.4);
|
|||
|
|
const mesh = new THREE.Mesh(geo, new THREE.MeshStandardMaterial({ color: color, roughness: 0.9 }));
|
|||
|
|
mesh.position.copy(pos);
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
// 大气
|
|||
|
|
const atmo = new THREE.Mesh(new THREE.SphereGeometry(r*1.2, 32, 32), new THREE.MeshBasicMaterial({color: color, transparent: true, opacity: 0.15, side: THREE.BackSide}));
|
|||
|
|
mesh.add(atmo);
|
|||
|
|
|
|||
|
|
// 物理体
|
|||
|
|
const body = new CANNON.Body({ mass: 0, shape: new CANNON.Sphere(r) });
|
|||
|
|
body.position.copy(pos);
|
|||
|
|
this.world.addBody(body);
|
|||
|
|
|
|||
|
|
this.entities.push({
|
|||
|
|
type: 'planet',
|
|||
|
|
mesh: mesh,
|
|||
|
|
body: body,
|
|||
|
|
radius: r,
|
|||
|
|
data: {
|
|||
|
|
name: `P-${Math.floor(Math.random()*9000)+1000}`,
|
|||
|
|
temp: Math.floor(Math.random()*200-100) + "°C",
|
|||
|
|
habit: Math.random() > 0.7 ? "S级 (宜居)" : "C级 (恶劣)",
|
|||
|
|
resVal: Math.floor(Math.random()*300) + 100
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createPlayer() {
|
|||
|
|
const group = new THREE.Group();
|
|||
|
|
// 机身
|
|||
|
|
const body = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 4), new THREE.MeshStandardMaterial({ color: Config.colors.ship }));
|
|||
|
|
group.add(body);
|
|||
|
|
// 引擎
|
|||
|
|
const engine = new THREE.Mesh(new THREE.ConeGeometry(0.5, 1, 8), new THREE.MeshBasicMaterial({ color: Config.colors.engine }));
|
|||
|
|
engine.rotation.x = Math.PI/2;
|
|||
|
|
engine.position.set(0, 0, 2.5);
|
|||
|
|
group.add(engine);
|
|||
|
|
|
|||
|
|
this.scene.add(group);
|
|||
|
|
|
|||
|
|
const physBody = new CANNON.Body({
|
|||
|
|
mass: 10,
|
|||
|
|
shape: new CANNON.Box(new CANNON.Vec3(1, 0.5, 2)),
|
|||
|
|
linearDamping: 0.95,
|
|||
|
|
angularDamping: 0.95
|
|||
|
|
});
|
|||
|
|
this.world.addBody(physBody);
|
|||
|
|
|
|||
|
|
this.player = {
|
|||
|
|
type: 'player',
|
|||
|
|
mesh: group,
|
|||
|
|
body: physBody,
|
|||
|
|
engine: this,
|
|||
|
|
lastShot: 0,
|
|||
|
|
throttle: 0
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 碰撞事件监听 (受伤)
|
|||
|
|
physBody.addEventListener('collide', (e) => {
|
|||
|
|
const normal = new CANNON.Vec3();
|
|||
|
|
e.contact.ni.negate(normal); // 碰撞方向
|
|||
|
|
const relativeVelocity = e.contact.getImpactVelocityAlongNormal();
|
|||
|
|
if(Math.abs(relativeVelocity) > 5) {
|
|||
|
|
Game.takeDamage(Math.floor(Math.abs(relativeVelocity) * 2));
|
|||
|
|
this.createExplosion(physBody.position, 0.5);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
spawnEnemy() {
|
|||
|
|
if(this.entities.filter(e => e.type === 'enemy').length > 5) return;
|
|||
|
|
|
|||
|
|
const pos = this.player.mesh.position.clone().add(new THREE.Vector3((Math.random()-0.5)*300, 0, (Math.random()-0.5)*300));
|
|||
|
|
const mesh = new THREE.Mesh(new THREE.ConeGeometry(3, 8, 4), new THREE.MeshStandardMaterial({ color: Config.colors.enemy }));
|
|||
|
|
mesh.rotation.x = Math.PI/2;
|
|||
|
|
mesh.position.copy(pos);
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
const body = new CANNON.Body({ mass: 5, linearDamping: 0.5 });
|
|||
|
|
// 使用球体作为碰撞体
|
|||
|
|
body.addShape(new CANNON.Sphere(3));
|
|||
|
|
body.position.copy(pos);
|
|||
|
|
this.world.addBody(body);
|
|||
|
|
|
|||
|
|
const enemy = { type: 'enemy', mesh: mesh, body: body, hp: 30, lastShot: 0, engine: this };
|
|||
|
|
this.entities.push(enemy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
shoot(source, isPlayer) {
|
|||
|
|
const now = Date.now();
|
|||
|
|
const cd = isPlayer ? 200 - State.levels.weapon * 15 : 2000;
|
|||
|
|
if (now - source.lastShot < cd) return;
|
|||
|
|
source.lastShot = now;
|
|||
|
|
|
|||
|
|
new SoundManager().playShoot();
|
|||
|
|
|
|||
|
|
const direction = new THREE.Vector3();
|
|||
|
|
if(isPlayer) {
|
|||
|
|
direction.set(0, 0, 1).applyQuaternion(source.mesh.quaternion);
|
|||
|
|
} else {
|
|||
|
|
direction.subVectors(this.player.mesh.position, source.mesh.position).normalize();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const mesh = new THREE.Mesh(new THREE.SphereGeometry(0.5), new THREE.MeshBasicMaterial({ color: Config.colors.laser }));
|
|||
|
|
mesh.position.copy(source.mesh.position).add(direction.clone().multiplyScalar(3));
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
const body = new CANNON.Body({ mass: 0.5, shape: new CANNON.Sphere(0.5), linearDamping: 0 });
|
|||
|
|
body.position.copy(mesh.position);
|
|||
|
|
body.velocity.copy(direction.multiplyScalar(isPlayer ? 300 : 100));
|
|||
|
|
|
|||
|
|
// 子弹碰撞逻辑：这里使用一个简单的 owner 标记
|
|||
|
|
body.isBullet = true;
|
|||
|
|
body.owner = isPlayer ? 'player' : 'enemy';
|
|||
|
|
|
|||
|
|
// 为子弹绑定碰撞事件
|
|||
|
|
body.addEventListener('collide', (e) => {
|
|||
|
|
// 【关键修复】使用 setTimeout 延迟移除，避免物理引擎崩溃
|
|||
|
|
setTimeout(() => this.removeEntity(mesh, body), 0);
|
|||
|
|
|
|||
|
|
this.createExplosion(body.position, 0.3);
|
|||
|
|
|
|||
|
|
if (isPlayer) {
|
|||
|
|
// 玩家子弹击中某物
|
|||
|
|
const enemy = this.entities.find(ent => ent.body === e.body && ent.type === 'enemy');
|
|||
|
|
if (enemy) {
|
|||
|
|
enemy.hp -= (10 + State.levels.weapon * 5);
|
|||
|
|
if (enemy.hp <= 0) {
|
|||
|
|
Game.addResource(20);
|
|||
|
|
// 延迟移除敌人
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.removeEntity(enemy.mesh, enemy.body);
|
|||
|
|
this.entities = this.entities.filter(ent => ent !== enemy);
|
|||
|
|
}, 0);
|
|||
|
|
this.createExplosion(enemy.body.position, 2);
|
|||
|
|
new SoundManager().playExplosion();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 敌人子弹击中玩家
|
|||
|
|
Game.takeDamage(10 + State.levels.weapon * 2);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.world.addBody(body);
|
|||
|
|
|
|||
|
|
// 管理子弹生命周期 (临时实体)
|
|||
|
|
const bullet = { type: 'bullet', mesh: mesh, body: body, life: 2000 };
|
|||
|
|
this.entities.push(bullet);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createExplosion(pos, scale = 1) {
|
|||
|
|
new SoundManager().playExplosion();
|
|||
|
|
const particleCount = 8 * scale;
|
|||
|
|
const geo = new THREE.BoxGeometry(scale, scale, scale);
|
|||
|
|
const mat = new THREE.MeshBasicMaterial({ color: 0xffaa00 });
|
|||
|
|
|
|||
|
|
for(let i=0; i<particleCount; i++) {
|
|||
|
|
const mesh = new THREE.Mesh(geo, mat);
|
|||
|
|
mesh.position.copy(pos);
|
|||
|
|
mesh.rotation.set(Math.random()*Math.PI, Math.random()*Math.PI, 0);
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
this.particles.push({
|
|||
|
|
mesh: mesh,
|
|||
|
|
vel: new THREE.Vector3((Math.random()-0.5)*10, (Math.random()-0.5)*10, (Math.random()-0.5)*10).multiplyScalar(scale),
|
|||
|
|
life: 1.0
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
createResource(pos) {
|
|||
|
|
const mesh = new THREE.Mesh(new THREE.OctahedronGeometry(2), new THREE.MeshStandardMaterial({
|
|||
|
|
color: Config.colors.resource, emissive: Config.colors.resource, emissiveIntensity: 0.5
|
|||
|
|
}));
|
|||
|
|
mesh.position.copy(pos);
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
const body = new CANNON.Body({ mass: 1, shape: new CANNON.Sphere(2), isTrigger: true }); // Trigger: 不产生物理碰撞反弹
|
|||
|
|
body.position.copy(pos);
|
|||
|
|
|
|||
|
|
// 【关键修复】资源碰撞监听
|
|||
|
|
body.addEventListener('collide', (e) => {
|
|||
|
|
if (e.body === this.player.body) {
|
|||
|
|
Game.addResource(50);
|
|||
|
|
// 延迟移除
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.removeEntity(mesh, body);
|
|||
|
|
this.entities = this.entities.filter(ent => ent !== res);
|
|||
|
|
}, 0);
|
|||
|
|
new SoundManager().playCollect();
|
|||
|
|
this.createExplosion(pos, 0.5);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.world.addBody(body);
|
|||
|
|
const res = { type: 'resource', mesh: mesh, body: body };
|
|||
|
|
this.entities.push(res);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
removeEntity(mesh, body) {
|
|||
|
|
if(mesh && this.scene.children.includes(mesh)) this.scene.remove(mesh);
|
|||
|
|
if(body && body.world === this.world) this.world.removeBody(body);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
update(delta) {
|
|||
|
|
if (!State.isPlaying || State.isPaused) return;
|
|||
|
|
|
|||
|
|
// 1. 物理步进
|
|||
|
|
this.world.step(1/60, delta, 3);
|
|||
|
|
|
|||
|
|
// 2. 玩家控制
|
|||
|
|
if(this.player) {
|
|||
|
|
const speed = 30 * (1 + State.levels.engine * 0.1);
|
|||
|
|
const rotSpeed = 2.5;
|
|||
|
|
|
|||
|
|
// 移动力
|
|||
|
|
if(this.input.w) {
|
|||
|
|
this.player.body.applyLocalForce(new CANNON.Vec3(0, 0, -speed), this.player.body.position);
|
|||
|
|
if (Math.random() > 0.8) new SoundManager().playThrust();
|
|||
|
|
}
|
|||
|
|
if(this.input.s) this.player.body.applyLocalForce(new CANNON.Vec3(0, 0, speed), this.player.body.position);
|
|||
|
|
if(this.input.a) this.player.body.angularVelocity.y += rotSpeed * delta;
|
|||
|
|
if(this.input.d) this.player.body.angularVelocity.y -= rotSpeed * delta;
|
|||
|
|
|
|||
|
|
// 同步位置
|
|||
|
|
this.player.mesh.position.copy(this.player.body.position);
|
|||
|
|
this.player.mesh.quaternion.copy(this.player.body.quaternion);
|
|||
|
|
|
|||
|
|
// 鼠标朝向 (绕Y轴)
|
|||
|
|
// 计算鼠标在3D空间的方向
|
|||
|
|
this.raycaster.setFromCamera({x: this.input.mouseX, y: this.input.mouseY}, this.camera);
|
|||
|
|
const target = new THREE.Vector3();
|
|||
|
|
this.raycaster.ray.intersectPlane(this.plane, target);
|
|||
|
|
|
|||
|
|
if(target) {
|
|||
|
|
const lookDir = new THREE.Vector3().subVectors(target, this.player.mesh.position).normalize();
|
|||
|
|
// 我们只关心水平面旋转
|
|||
|
|
lookDir.y = 0;
|
|||
|
|
lookDir.normalize();
|
|||
|
|
|
|||
|
|
// 使用 quaternion slerp 平滑旋转
|
|||
|
|
const targetQuat = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0,0,1), lookDir);
|
|||
|
|
this.player.mesh.quaternion.slerp(targetQuat, delta * 5);
|
|||
|
|
this.player.body.quaternion.copy(this.player.mesh.quaternion);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 相机跟随
|
|||
|
|
const camOffset = new THREE.Vector3(0, 30, -40).applyQuaternion(this.player.mesh.quaternion).add(this.player.mesh.position);
|
|||
|
|
this.camera.position.lerp(camOffset, delta * 2);
|
|||
|
|
this.camera.lookAt(this.player.mesh.position);
|
|||
|
|
|
|||
|
|
// 更新坐标显示
|
|||
|
|
document.getElementById('coords').innerText = `${Math.floor(this.player.mesh.position.x)}, ${Math.floor(this.player.mesh.position.z)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 3. 实体更新
|
|||
|
|
for (let i = this.entities.length - 1; i >= 0; i--) {
|
|||
|
|
const ent = this.entities[i];
|
|||
|
|
|
|||
|
|
// 【关键修复】如果物理体已被移除（world === null），则从实体列表中删除，避免后续同步错误
|
|||
|
|
if (ent.body.world === null) {
|
|||
|
|
this.entities.splice(i, 1);
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(ent.type === 'bullet') {
|
|||
|
|
ent.life -= delta * 1000;
|
|||
|
|
if(ent.life <= 0) {
|
|||
|
|
this.removeEntity(ent.mesh, ent.body);
|
|||
|
|
this.entities.splice(i, 1);
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if(ent.type === 'enemy') {
|
|||
|
|
// AI 简单的追踪
|
|||
|
|
const dir = new THREE.Vector3().subVectors(this.player.mesh.position, ent.mesh.position).normalize();
|
|||
|
|
ent.body.velocity.copy(dir.multiplyScalar(15));
|
|||
|
|
ent.mesh.position.copy(ent.body.position);
|
|||
|
|
ent.mesh.lookAt(this.player.mesh.position);
|
|||
|
|
|
|||
|
|
// 射击
|
|||
|
|
const dist = ent.mesh.position.distanceTo(this.player.mesh.position);
|
|||
|
|
if (dist < 200 && Math.random() < 0.01) this.shoot(ent, false);
|
|||
|
|
}
|
|||
|
|
if(ent.type === 'resource' || ent.type === 'asteroid') {
|
|||
|
|
ent.mesh.position.copy(ent.body.position);
|
|||
|
|
ent.mesh.rotation.x += delta;
|
|||
|
|
ent.mesh.rotation.y += delta;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 4. 粒子更新
|
|||
|
|
for (let i = this.particles.length - 1; i >= 0; i--) {
|
|||
|
|
const p = this.particles[i];
|
|||
|
|
p.life -= delta;
|
|||
|
|
p.mesh.position.add(p.vel.clone().multiplyScalar(delta));
|
|||
|
|
p.mesh.scale.setScalar(p.life);
|
|||
|
|
p.mesh.material.opacity = p.life;
|
|||
|
|
if(p.life <= 0) {
|
|||
|
|
this.scene.remove(p.mesh);
|
|||
|
|
this.particles.splice(i, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 5. 鼠标悬停检测 (UI提示)
|
|||
|
|
this.raycaster.setFromCamera({x: this.input.mouseX, y: this.input.mouseY}, this.camera);
|
|||
|
|
const intersects = this.raycaster.intersectObjects(this.entities.filter(e => e.type === 'planet').map(e => e.mesh));
|
|||
|
|
const crosshair = document.getElementById('crosshair');
|
|||
|
|
if(intersects.length > 0 && intersects[0].distance < 500) {
|
|||
|
|
crosshair.classList.add('hovering');
|
|||
|
|
// 记录当前悬停的星球用于F键交互
|
|||
|
|
this.hoveredPlanet = this.entities.find(e => e.mesh === intersects[0].object);
|
|||
|
|
} else {
|
|||
|
|
crosshair.classList.remove('hovering');
|
|||
|
|
this.hoveredPlanet = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 6. 雷达更新
|
|||
|
|
this.updateRadar();
|
|||
|
|
|
|||
|
|
// 7. 生成逻辑 (简单的随机)
|
|||
|
|
if(Math.random() < 0.005) this.spawnAsteroid();
|
|||
|
|
if(Math.random() < 0.002) this.spawnEnemy(); // 敌人生成率 - 现在这个方法名是对的了
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
spawnAsteroid() {
|
|||
|
|
const pos = this.player.mesh.position.clone().add(new THREE.Vector3((Math.random()-0.5)*600, (Math.random()-0.5)*200, (Math.random()-0.5)*600));
|
|||
|
|
const r = 2 + Math.random()*3;
|
|||
|
|
const geo = new THREE.DodecahedronGeometry(r, 0);
|
|||
|
|
const mat = new THREE.MeshStandardMaterial({ color: 0x888888, flatShading: true });
|
|||
|
|
const mesh = new THREE.Mesh(geo, mat);
|
|||
|
|
mesh.position.copy(pos);
|
|||
|
|
this.scene.add(mesh);
|
|||
|
|
|
|||
|
|
const body = new CANNON.Body({ mass: r*2, shape: new CANNON.Sphere(r), linearDamping: 0.1 });
|
|||
|
|
body.position.copy(pos);
|
|||
|
|
body.velocity.set(Math.random(), Math.random(), Math.random());
|
|||
|
|
|
|||
|
|
// 碰撞
|
|||
|
|
body.addEventListener('collide', (e) => {
|
|||
|
|
if(e.body === this.player.body) {
|
|||
|
|
Game.takeDamage(10);
|
|||
|
|
// 【关键修复】延迟移除
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.removeEntity(mesh, body);
|
|||
|
|
this.entities = this.entities.filter(ent => ent !== ast);
|
|||
|
|
}, 0);
|
|||
|
|
this.createExplosion(body.position, 1);
|
|||
|
|
}
|
|||
|
|
// 子弹碰撞
|
|||
|
|
const bullet = this.entities.find(ent => ent.body === e.body && ent.type === 'bullet');
|
|||
|
|
if(bullet) {
|
|||
|
|
// 【关键修复】延迟移除
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.removeEntity(mesh, body);
|
|||
|
|
this.entities = this.entities.filter(ent => ent !== ast);
|
|||
|
|
}, 0);
|
|||
|
|
// 掉落资源几率
|
|||
|
|
if(Math.random() > 0.5) this.createResource(body.position);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.world.addBody(body);
|
|||
|
|
const ast = { type: 'asteroid', mesh: mesh, body: body };
|
|||
|
|
this.entities.push(ast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateRadar() {
|
|||
|
|
const radar = document.getElementById('radar-display');
|
|||
|
|
// 清理旧的点
|
|||
|
|
this.radarDots.forEach(d => d.remove());
|
|||
|
|
this.radarDots = [];
|
|||
|
|
|
|||
|
|
if(!this.player) return;
|
|||
|
|
|
|||
|
|
this.entities.forEach(ent => {
|
|||
|
|
if(ent.type === 'player') return;
|
|||
|
|
// 计算相对位置
|
|||
|
|
const dx = ent.mesh.position.x - this.player.mesh.position.x;
|
|||
|
|
const dz = ent.mesh.position.z - this.player.mesh.position.z;
|
|||
|
|
const dist = Math.sqrt(dx*dx + dz*dz);
|
|||
|
|
|
|||
|
|
if(dist < 400) { // 雷达范围
|
|||
|
|
const dot = document.createElement('div');
|
|||
|
|
dot.style.position = 'absolute';
|
|||
|
|
// 映射到雷达像素: 半径60px
|
|||
|
|
const rx = (dx / 400) * 60;
|
|||
|
|
const ry = (dz / 400) * 60;
|
|||
|
|
dot.style.left = (60 + rx) + 'px';
|
|||
|
|
dot.style.top = (60 + ry) + 'px';
|
|||
|
|
dot.style.width = '4px';
|
|||
|
|
dot.style.height = '4px';
|
|||
|
|
dot.style.borderRadius = '50%';
|
|||
|
|
|
|||
|
|
if(ent.type === 'enemy') dot.style.background = '#ff0055';
|
|||
|
|
else if(ent.type === 'planet') dot.style.background = '#00f3ff';
|
|||
|
|
else if(ent.type === 'resource') dot.style.background = '#ffcc00';
|
|||
|
|
|
|||
|
|
radar.appendChild(dot);
|
|||
|
|
this.radarDots.push(dot);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
animate() {
|
|||
|
|
requestAnimationFrame(this.animate);
|
|||
|
|
const delta = this.clock.getDelta();
|
|||
|
|
this.update(delta);
|
|||
|
|
this.renderer.render(this.scene, this.camera);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- 4. 游戏逻辑控制器 ---
|
|||
|
|
const Game = {
|
|||
|
|
engine: null,
|
|||
|
|
|
|||
|
|
init: function() {
|
|||
|
|
this.engine = new GameEngine();
|
|||
|
|
this.updateUI();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
start: function() {
|
|||
|
|
document.getElementById('start-screen').classList.remove('active');
|
|||
|
|
State.isPlaying = true;
|
|||
|
|
this.engine.createPlayer();
|
|||
|
|
new SoundManager().playThrust(); // 启动音效
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
takeDamage: function(amount) {
|
|||
|
|
// 护盾抵扣
|
|||
|
|
if(State.shield > 0) {
|
|||
|
|
State.shield -= amount;
|
|||
|
|
if(State.shield < 0) {
|
|||
|
|
const rem = Math.abs(State.shield);
|
|||
|
|
State.shield = 0;
|
|||
|
|
State.hp -= rem;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
State.hp -= amount;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.updateUI();
|
|||
|
|
|
|||
|
|
if(State.hp <= 0) {
|
|||
|
|
alert("飞船损毁! 任务失败。");
|
|||
|
|
location.reload();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
addResource: function(amount) {
|
|||
|
|
State.resources += amount;
|
|||
|
|
this.updateUI();
|
|||
|
|
this.showFloatingText(`+${amount} RESOURCE`, '#ffcc00');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
updateUI: function() {
|
|||
|
|
document.getElementById('hp-val').innerText = Math.floor(State.hp) + '%';
|
|||
|
|
document.getElementById('hp-bar').style.width = (State.hp / State.maxHp * 100) + '%';
|
|||
|
|
|
|||
|
|
document.getElementById('shield-val').innerText = Math.floor(State.shield) + '%';
|
|||
|
|
document.getElementById('shield-bar').style.width = (State.shield / State.maxShield * 100) + '%';
|
|||
|
|
|
|||
|
|
document.getElementById('res-count').innerText = State.resources;
|
|||
|
|
|
|||
|
|
// 更新升级菜单中的资源
|
|||
|
|
document.getElementById('upgrade-res').innerText = State.resources;
|
|||
|
|
|
|||
|
|
// 更新等级显示
|
|||
|
|
document.getElementById('lvl-engine').innerText = State.levels.engine;
|
|||
|
|
document.getElementById('lvl-shield').innerText = State.levels.shield;
|
|||
|
|
document.getElementById('lvl-weapon').innerText = State.levels.weapon;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
showFloatingText: function(text, color) {
|
|||
|
|
const el = document.createElement('div');
|
|||
|
|
el.innerText = text;
|
|||
|
|
el.style.position = 'absolute';
|
|||
|
|
el.style.left = '50%';
|
|||
|
|
el.style.top = '40%';
|
|||
|
|
el.style.transform = 'translate(-50%, -50%)';
|
|||
|
|
el.style.color = color;
|
|||
|
|
el.style.fontSize = '20px';
|
|||
|
|
el.style.fontWeight = 'bold';
|
|||
|
|
el.style.textShadow = '0 0 5px black';
|
|||
|
|
el.style.pointerEvents = 'none';
|
|||
|
|
el.style.transition = 'all 1s';
|
|||
|
|
document.body.appendChild(el);
|
|||
|
|
|
|||
|
|
// 动画
|
|||
|
|
setTimeout(() => {
|
|||
|
|
el.style.top = '30%';
|
|||
|
|
el.style.opacity = 0;
|
|||
|
|
}, 50);
|
|||
|
|
setTimeout(() => el.remove(), 1000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
tryInteract: function() {
|
|||
|
|
if(this.engine.hoveredPlanet && this.engine.hoveredPlanet.type === 'planet') {
|
|||
|
|
State.isPaused = true;
|
|||
|
|
State.scannedPlanet = this.engine.hoveredPlanet;
|
|||
|
|
|
|||
|
|
// 填充数据
|
|||
|
|
const p = State.scannedPlanet.data;
|
|||
|
|
document.getElementById('scan-name').innerText = p.name;
|
|||
|
|
document.getElementById('scan-atmo').innerText = "N2 78%, O2 21%";
|
|||
|
|
document.getElementById('scan-temp').innerText = p.temp;
|
|||
|
|
document.getElementById('scan-habit').innerText = p.habit;
|
|||
|
|
document.getElementById('scan-res').innerText = "价值: " + p.resVal;
|
|||
|
|
|
|||
|
|
document.getElementById('scan-modal').classList.add('active');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
closeScanModal: function() {
|
|||
|
|
document.getElementById('scan-modal').classList.remove('active');
|
|||
|
|
State.isPaused = false;
|
|||
|
|
State.scannedPlanet = null;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
collectPlanetResources: function() {
|
|||
|
|
if(State.scannedPlanet) {
|
|||
|
|
const val = State.scannedPlanet.data.resVal;
|
|||
|
|
this.addResource(val);
|
|||
|
|
this.closeScanModal();
|
|||
|
|
this.showFloatingText("采集成功!", "#00f3ff");
|
|||
|
|
new SoundManager().playCollect();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openUpgradeMenu: function() {
|
|||
|
|
State.isPaused = true;
|
|||
|
|
document.getElementById('upgrade-modal').classList.add('active');
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
closeUpgradeMenu: function() {
|
|||
|
|
document.getElementById('upgrade-modal').classList.remove('active');
|
|||
|
|
State.isPaused = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
upgradeShip: function(type) {
|
|||
|
|
const cost = State.upgradeCosts[type] * State.levels[type];
|
|||
|
|
if(State.resources >= cost) {
|
|||
|
|
State.resources -= cost;
|
|||
|
|
State.levels[type]++;
|
|||
|
|
|
|||
|
|
// 应用即时效果
|
|||
|
|
if(type === 'shield') {
|
|||
|
|
State.maxShield += 50;
|
|||
|
|
State.shield = State.maxShield;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.updateUI();
|
|||
|
|
new SoundManager().playCollect(); // 使用收集音效作为确认音
|
|||
|
|
} else {
|
|||
|
|
const btn = event.currentTarget;
|
|||
|
|
btn.style.borderColor = 'red';
|
|||
|
|
setTimeout(() => btn.style.borderColor = 'transparent', 500);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 启动初始化
|
|||
|
|
window.onload = () => Game.init();
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|