富豪要胆大 - 像素投资
by TurboRanger58828 lines33.3 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>富豪要胆大 - 像素投资</title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
/* ===== 全局像素重置 & 蓝色主调 ===== */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #060b1f;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Press Start 2P', monospace;
image-rendering: pixelated;
padding: 16px;
margin: 0;
}
.game-container {
background: #0a1a3a;
border: 6px solid #1e4a7a;
box-shadow: 8px 8px 0 #030814, inset 0 0 0 2px #2a6a9a;
max-width: 800px;
width: 100%;
padding: 24px 20px 30px;
color: #b0d0f0;
position: relative;
transition: box-shadow 0.3s;
}
.game-container:hover {
box-shadow: 8px 8px 0 #030814, inset 0 0 0 2px #4a8aba;
}
/* ===== 标题动效 ===== */
.pixel-title {
font-size: 28px;
text-align: center;
color: #5a9eff;
text-shadow: 4px 4px 0 #0a2a5a;
letter-spacing: 2px;
margin-bottom: 16px;
word-break: break-word;
animation: titleGlow 2s infinite alternate;
}
@keyframes titleGlow {
0% { text-shadow: 4px 4px 0 #0a2a5a, 0 0 10px #1a6aff; }
100% { text-shadow: 4px 4px 0 #0a2a5a, 0 0 20px #4a9eff; }
}
.pixel-title span {
color: #7fc9ff;
text-shadow: 4px 4px 0 #0a3a6a;
animation: spanPulse 1.5s infinite alternate;
}
@keyframes spanPulse {
0% { color: #7fc9ff; }
100% { color: #ffd966; }
}
/* ===== 状态栏 ===== */
.status-bar {
background: #07122a;
border: 3px solid #1e4a7a;
padding: 12px 16px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
font-size: 14px;
box-shadow: inset 0 0 0 2px #0e2a4a;
}
.status-item {
background: #060f20;
padding: 6px 12px;
border: 2px solid #1e4a7a;
flex: 1 0 auto;
}
.status-item .label {
color: #6a8aaa;
font-size: 10px;
}
.status-item .value {
color: #7fc9ff;
font-size: 16px;
margin-top: 4px;
transition: all 0.2s;
}
.value.gold {
color: #f5c842;
animation: moneyPop 0.3s ease;
}
@keyframes moneyPop {
0% { transform: scale(1); }
50% { transform: scale(1.2); color: #ffdd55; }
100% { transform: scale(1); }
}
/* ===== 面板卡片 ===== */
.panel {
background: #07122a;
border: 4px solid #1e4a7a;
padding: 18px 16px;
margin-bottom: 18px;
box-shadow: inset 0 0 0 2px #0e2a4a;
transition: border-color 0.3s;
}
.panel:hover {
border-color: #3a7aaa;
}
.panel h3 {
font-size: 16px;
color: #7fc9ff;
margin-bottom: 12px;
border-bottom: 2px dashed #1e4a7a;
padding-bottom: 8px;
letter-spacing: 1px;
}
.panel p, .panel li {
font-size: 12px;
line-height: 1.8;
color: #b0d0f0;
margin-bottom: 6px;
}
.panel .highlight { color: #ffd966; }
.panel .danger { color: #ff7b7b; }
.panel .success { color: #6bffb8; }
.panel .info { color: #7fc9ff; }
.event-tag {
display: inline-block;
background: #0e2a4a;
padding: 2px 8px;
margin-right: 4px;
border: 2px solid #1e4a7a;
font-size: 10px;
}
/* ===== 输入与按钮 ===== */
.input-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 12px 0 8px;
}
.input-group label {
font-size: 12px;
color: #8ab0d0;
}
.pixel-input {
background: #060f20;
border: 4px solid #1e4a7a;
padding: 10px 12px;
font-family: 'Press Start 2P', monospace;
font-size: 16px;
color: #7fc9ff;
width: 160px;
outline: none;
box-shadow: inset 0 0 0 2px #07122a;
transition: border-color 0.3s;
}
.pixel-input:focus {
border-color: #5a9eff;
}
.pixel-btn {
background: #1a4a7a;
border: 4px solid #2a6a9a;
color: #ffffff;
font-family: 'Press Start 2P', monospace;
font-size: 14px;
padding: 10px 20px;
cursor: pointer;
box-shadow: 4px 4px 0 #07122a;
transition: all 0.1s ease;
text-shadow: 2px 2px 0 #07122a;
position: relative;
}
.pixel-btn:hover {
background: #2a5a8a;
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 #07122a;
border-color: #4a8aba;
}
.pixel-btn:active {
transform: translate(4px, 4px);
box-shadow: 0px 0px 0 #07122a;
}
.pixel-btn:disabled {
opacity: 0.5;
transform: none;
box-shadow: 4px 4px 0 #07122a;
cursor: not-allowed;
}
.pixel-btn.gold {
background: #7a5a1a;
border-color: #f5c842;
box-shadow: 4px 4px 0 #3a2a0a;
animation: btnPulse 2s infinite alternate;
}
@keyframes btnPulse {
0% { box-shadow: 4px 4px 0 #3a2a0a, 0 0 5px #f5c842; }
100% { box-shadow: 4px 4px 0 #3a2a0a, 0 0 20px #ffdd55; }
}
.pixel-btn.gold:hover {
background: #9a7a2a;
border-color: #ffdd55;
}
/* ===== 结果框 ===== */
.result-box {
background: #060f20;
border: 4px solid #1e4a7a;
padding: 14px;
margin: 16px 0 12px;
min-height: 80px;
font-size: 12px;
line-height: 2;
box-shadow: inset 0 0 0 2px #07122a;
animation: fadeSlide 0.4s ease;
}
@keyframes fadeSlide {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
.result-box .line {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-bottom: 1px dotted #0e2a4a;
padding: 2px 0;
}
.result-box .line:last-child {
border-bottom: none;
}
.result-box .sub-line {
padding-left: 20px;
font-size: 11px;
color: #a0c0e0;
}
/* ===== 历史记录 ===== */
.history-log {
background: #060f20;
border: 3px solid #0e2a4a;
padding: 10px 14px;
max-height: 140px;
overflow-y: auto;
font-size: 11px;
line-height: 2.2;
margin-top: 10px;
box-shadow: inset 0 0 0 2px #07122a;
}
.history-log .entry {
border-bottom: 1px dashed #0e2a4a;
padding: 4px 0;
}
.history-log .entry:last-child {
border-bottom: none;
}
.history-log::-webkit-scrollbar {
width: 12px;
background: #060f20;
}
.history-log::-webkit-scrollbar-thumb {
background: #1e4a7a;
border: 2px solid #060f20;
}
/* ===== 隐藏 ===== */
.hidden { display: none !important; }
/* ===== 响应式 ===== */
@media (max-width: 600px) {
.game-container { padding: 16px 12px; }
.pixel-title { font-size: 20px; }
.status-bar { font-size: 10px; }
.pixel-input { width: 120px; font-size: 14px; }
.pixel-btn { font-size: 12px; padding: 8px 14px; }
.result-box .sub-line { padding-left: 10px; }
}
/* 额外动效 */
.money-flash {
animation: moneyPop 0.3s ease;
}
</style>
</head>
<body>
<div class="game-container" id="app">
<!-- 标题 -->
<div class="pixel-title">
🏦 富豪要<span>胆大</span> ???
</div>
<!-- 状态栏 -->
<div class="status-bar" id="statusBar">
<div class="status-item">
<div class="label">💰 当前资金</div>
<div class="value gold" id="currentMoney">1000</div>
</div>
<div class="status-item">
<div class="label">🎯 当前轮次</div>
<div class="value" id="currentRound">0 / 3</div>
</div>
<div class="status-item">
<div class="label">📈 总盈利</div>
<div class="value" id="totalProfit">+0</div>
</div>
</div>
<!-- 开始界面 -->
<div id="startScreen" class="panel" style="text-align: center; padding: 30px 20px;">
<p style="font-size: 14px; color: #7fc9ff;">📡 小明 · 通信公司老总</p>
<p style="font-size: 12px; margin: 20px 0; line-height: 2;">
跨国业务风云变幻<br>
是保守求生，还是大胆豪赌？<br>
<span class="highlight">三轮投资，每轮 2 机遇 + 3 风险</span>
</p>
<button class="pixel-btn gold" id="startGameBtn">▶ 进入战场</button>
</div>
<!-- 游戏主界面 -->
<div id="gameScreen" class="hidden">
<!-- 轮次说明 -->
<div class="panel" id="roundInfoPanel">
<h3 id="roundTitle">📋 第 X 轮：业务情境</h3>
<div id="roundDescription">
<p>基础盈利：<span class="highlight" id="baseRateDisplay">+0%</span>（始终触发）</p>
<div style="margin-top: 10px; border-top: 2px dashed #0e2a4a; padding-top: 10px;">
<div style="margin-bottom: 6px; color: #6bffb8;">⚡ 机遇（独立触发）</div>
<div id="opportunityList"></div>
<div style="margin: 10px 0 6px; color: #ff7b7b;">⚠️ 风险（独立触发）</div>
<div id="riskList"></div>
</div>
<p style="margin-top: 8px; font-size: 10px; color: #6a8aaa;">* 每个事件独立判定，组合出多种结局！</p>
</div>
</div>
<!-- 投资输入 -->
<div class="panel" id="investPanel">
<h3>💼 投入资金</h3>
<div class="input-group">
<label>可投金额 (0 ~ <span id="maxInvestDisplay">1000</span>)</label>
<input type="number" class="pixel-input" id="investInput" min="0" step="1" value="0">
<button class="pixel-btn" id="investBtn">🚀 投资！</button>
</div>
<div style="font-size: 10px; color: #6a8aaa; margin-top: 4px;">⬆ 输入后点击按钮，或按回车</div>
</div>
<!-- 结果 -->
<div id="resultPanel" class="panel hidden">
<h3>📊 本轮结果</h3>
<div class="result-box" id="resultBox">
<div class="line"><span>⚙️ 基础收益</span> <span id="resBase">+0</span></div>
<div id="resOpportunities"></div>
<div id="resRisks"></div>
<div class="line" style="font-weight: bold; border-top: 2px solid #1e4a7a; margin-top: 4px; padding-top: 6px;">
<span>🏆 本轮净收益</span>
<span id="resNet" style="font-size: 16px;">+0</span>
</div>
</div>
<button class="pixel-btn gold" id="nextRoundBtn">▶ 下一轮</button>
</div>
<!-- 历史 -->
<div class="panel" style="margin-bottom: 0;">
<h3>📜 投资历史</h3>
<div class="history-log" id="historyLog">
<div style="color: #6a8aaa; text-align: center; padding: 10px 0;">暂无记录</div>
</div>
</div>
</div>
<!-- 结束界面 -->
<div id="gameOverScreen" class="panel hidden" style="text-align: center; padding: 24px;">
<h3 style="color: #ff7b7b; font-size: 20px;">💀 游戏结束</h3>
<p id="gameOverMsg" style="margin: 16px 0; font-size: 14px;">资金归零，小明破产了...</p>
<p style="font-size: 12px;">最终资产：<span class="highlight" id="finalMoney">0</span> 元</p>
<button class="pixel-btn gold" id="restartBtn" style="margin-top: 16px;">🔄 重新开局</button>
</div>
</div>
<script>
(function() {
// ============================================================
// 游戏数据 —— 每轮 2个机遇 + 3个风险，独立触发
// ============================================================
const ROUNDS = [{
name: '第一轮 · 国内设备升级',
desc: '小明主营国内通信设备，市场稳定但竞争激烈。',
baseRate: 0.08,
opportunities: [
{ name: '中标智慧城市项目', prob: 0.25, impact: 0.20 },
{ name: '政府补贴到账', prob: 0.20, impact: 0.10 }
],
risks: [
{ name: '核心芯片短缺', prob: 0.20, impact: -0.15 },
{ name: '汇率波动加剧', prob: 0.15, impact: -0.08 },
{ name: '竞争对手降价抢单', prob: 0.10, impact: -0.12 }
]
}, {
name: '第二轮 · 跨国海缆铺设',
desc: '东南亚海底光缆项目，地缘政治与海事风险并存。',
baseRate: 0.12,
opportunities: [
{ name: '获准接入欧洲枢纽', prob: 0.35, impact: 0.45 },
{ name: '多国合作分摊成本', prob: 0.25, impact: 0.20 }
],
risks: [
{ name: '海事限制影响施工', prob: 0.30, impact: -0.30 },
{ name: '海底地震损坏线路', prob: 0.15, impact: -0.25 },
{ name: '政治制裁风险', prob: 0.10, impact: -0.40 }
]
}, {
name: '第三轮 · 海外5G频谱竞标',
desc: '全球性5G频谱拍卖，利润巨大但政策风险极高。',
baseRate: 0.18,
opportunities: [
{ name: '独家中标 5G 频谱', prob: 0.40, impact: 1.20 },
{ name: '联合运营权', prob: 0.30, impact: 0.50 }
],
risks: [
{ name: '资产遭冻结', prob: 0.35, impact: -0.80 },
{ name: '竞标对手联合压价', prob: 0.20, impact: -0.50 },
{ name: '频谱回收政策', prob: 0.15, impact: -0.30 }
]
}];
// ============================================================
// 游戏状态
// ============================================================
let state = {
money: 1000,
roundIndex: 0,
isGameOver: false,
history: [],
isInvesting: false,
resultShown: false,
currentInvest: 0,
};
// ============================================================
// DOM 引用
// ============================================================
const $ = id => document.getElementById(id);
const startScreen = $('startScreen');
const gameScreen = $('gameScreen');
const gameOverScreen = $('gameOverScreen');
const startBtn = $('startGameBtn');
const restartBtn = $('restartBtn');
const currentMoney = $('currentMoney');
const currentRound = $('currentRound');
const totalProfit = $('totalProfit');
const roundTitle = $('roundTitle');
const baseRateDisplay = $('baseRateDisplay');
const opportunityList = $('opportunityList');
const riskList = $('riskList');
const maxInvestDisplay = $('maxInvestDisplay');
const investInput = $('investInput');
const investBtn = $('investBtn');
const resultPanel = $('resultPanel');
const resBase = $('resBase');
const resOpportunities = $('resOpportunities');
const resRisks = $('resRisks');
const resNet = $('resNet');
const nextRoundBtn = $('nextRoundBtn');
const historyLog = $('historyLog');
const finalMoney = $('finalMoney');
const gameOverMsg = $('gameOverMsg');
// ============================================================
// 辅助函数
// ============================================================
function formatMoney(val) { return Math.round(val); }
function formatPercent(val) { return (val * 100).toFixed(0) + '%'; }
function formatSigned(val) {
if (val > 0) return '+' + val;
if (val < 0) return '' + val;
return '±0';
}
function flashMoney() {
currentMoney.classList.remove('money-flash');
void currentMoney.offsetWidth;
currentMoney.classList.add('money-flash');
}
function updateStatusBar() {
currentMoney.textContent = formatMoney(state.money);
currentRound.textContent = state.roundIndex + ' / 3';
const profit = state.money - 1000;
totalProfit.textContent = (profit >= 0 ? '+' : '') + formatMoney(profit);
totalProfit.style.color = profit >= 0 ? '#6bffb8' : '#ff7b7b';
flashMoney();
}
function renderHistory() {
if (state.history.length === 0) {
historyLog.innerHTML = `<div style="color:#6a8aaa;text-align:center;padding:10px 0;">暂无记录</div>`;
return;
}
let html = '';
for (let i = 0; i < state.history.length; i++) {
const h = state.history[i];
const netColor = h.net >= 0 ? '#6bffb8' : '#ff7b7b';
// 简单显示触发了哪些事件
let events = '';
if (h.triggeredOps && h.triggeredOps.length) events += ' ⚡' + h.triggeredOps.length;
if (h.triggeredRisks && h.triggeredRisks.length) events += ' ⚠️' + h.triggeredRisks.length;
html += `<div class="entry">
<span style="color:#7fc9ff;">第${h.round}轮</span>
投入 <span class="highlight">${formatMoney(h.invest)}</span>
净收益 <span style="color:${netColor};">${formatSigned(Math.round(h.net))}</span>
→ 余额 <span class="highlight">${formatMoney(h.newMoney)}</span>
${events}
</div>`;
}
historyLog.innerHTML = html;
historyLog.scrollTop = historyLog.scrollHeight;
}
function showGameOver(msg) {
state.isGameOver = true;
gameScreen.classList.add('hidden');
gameOverScreen.classList.remove('hidden');
finalMoney.textContent = formatMoney(state.money);
gameOverMsg.textContent = msg || '资金归零，小明破产了...';
}
function resetGame() {
state.money = 1000;
state.roundIndex = 0;
state.isGameOver = false;
state.history = [];
state.isInvesting = false;
state.resultShown = false;
state.currentInvest = 0;
gameOverScreen.classList.add('hidden');
startScreen.classList.remove('hidden');
gameScreen.classList.add('hidden');
resultPanel.classList.add('hidden');
investInput.value = 0;
updateStatusBar();
renderHistory();
}
// ============================================================
// 渲染轮次信息（动态生成机遇/风险列表）
// ============================================================
function renderRoundInfo(round) {
// 基础
baseRateDisplay.textContent = formatPercent(round.baseRate);
// 机遇
let opHtml = '';
round.opportunities.forEach((op, idx) => {
opHtml += `<div style="font-size:11px; padding:2px 0; border-bottom:1px dotted #0e2a4a;">
<span class="success">✦ ${op.name}</span>
— 概率 <span class="success">${formatPercent(op.prob)}</span>，
额外 <span class="highlight">${formatPercent(op.impact)}</span>
</div>`;
});
opportunityList.innerHTML = opHtml;
// 风险
let riskHtml = '';
round.risks.forEach((rk, idx) => {
riskHtml += `<div style="font-size:11px; padding:2px 0; border-bottom:1px dotted #0e2a4a;">
<span class="danger">✧ ${rk.name}</span>
— 概率 <span class="danger">${formatPercent(rk.prob)}</span>，
额外 <span class="danger">${formatPercent(rk.impact)}</span>
</div>`;
});
riskList.innerHTML = riskHtml;
}
// ============================================================
// 加载轮次
// ============================================================
function loadRound(index) {
if (index >= 3) {
// 三轮结束
state.isGameOver = true;
gameScreen.classList.add('hidden');
gameOverScreen.classList.remove('hidden');
finalMoney.textContent = formatMoney(state.money);
const profit = state.money - 1000;
const msg = profit >= 0 ?
`🎉 三轮结束！小明的通信帝国盈利 ${formatMoney(profit)} 元！` :
`😟 三轮结束，小明亏损了 ${Math.abs(formatMoney(profit))} 元。`;
gameOverMsg.textContent = msg;
return;
}
const round = ROUNDS[index];
roundTitle.textContent = `📋 ${round.name}`;
renderRoundInfo(round);
const maxInvest = state.money;
maxInvestDisplay.textContent = formatMoney(maxInvest);
investInput.max = maxInvest;
investInput.value = Math.min(0, maxInvest);
investInput.disabled = false;
investBtn.disabled = false;
resultPanel.classList.add('hidden');
state.resultShown = false;
investInput.focus();
updateStatusBar();
}
// ============================================================
// 执行投资（遍历所有机遇和风险）
// ============================================================
function executeInvest() {
if (state.isInvesting || state.resultShown || state.isGameOver) return;
if (state.roundIndex >= 3) return;
const maxInvest = state.money;
let investAmount = parseFloat(investInput.value);
if (isNaN(investAmount) || investAmount < 0) investAmount = 0;
if (investAmount > maxInvest) investAmount = maxInvest;
investAmount = Math.floor(investAmount);
if (investAmount === 0 && maxInvest > 0) {
alert('💰 好歹投一点吧！或者输入 0 也可以，但就没收益了。');
return;
}
if (maxInvest <= 0) {
showGameOver('资金不足，无法继续投资。');
return;
}
state.currentInvest = investAmount;
state.isInvesting = true;
investBtn.disabled = true;
investInput.disabled = true;
const round = ROUNDS[state.roundIndex];
// 基础收益
const baseProfit = investAmount * round.baseRate;
// 遍历机遇
const opResults = round.opportunities.map(op => {
const triggered = Math.random() < op.prob;
const profit = triggered ? investAmount * op.impact : 0;
return { name: op.name, triggered, profit, impact: op.impact };
});
// 遍历风险
const riskResults = round.risks.map(rk => {
const triggered = Math.random() < rk.prob;
const profit = triggered ? investAmount * rk.impact : 0;
return { name: rk.name, triggered, profit, impact: rk.impact };
});
// 汇总
const totalOpProfit = opResults.reduce((sum, r) => sum + r.profit, 0);
const totalRiskProfit = riskResults.reduce((sum, r) => sum + r.profit, 0);
const netProfit = baseProfit + totalOpProfit + totalRiskProfit;
const newMoney = state.money + netProfit;
// ---- 显示结果 ----
// 基础
resBase.textContent = (baseProfit >= 0 ? '+' : '') + formatMoney(baseProfit);
// 机遇
let opHtml = '';
opResults.forEach((r, idx) => {
const color = r.triggered ? '#6bffb8' : '#6a8aaa';
const sign = r.profit >= 0 ? '+' : '';
opHtml += `<div class="line sub-line">
<span>⚡ ${r.name}</span>
<span style="color:${color};">${r.triggered ? '触发 ' + sign + formatMoney(r.profit) : '未触发'}</span>
</div>`;
});
resOpportunities.innerHTML = opHtml;
// 风险
let riskHtml = '';
riskResults.forEach((r, idx) => {
const color = r.triggered ? '#ff7b7b' : '#6a8aaa';
const sign = r.profit >= 0 ? '+' : '';
riskHtml += `<div class="line sub-line">
<span>⚠️ ${r.name}</span>
<span style="color:${color};">${r.triggered ? '触发 ' + sign + formatMoney(r.profit) : '未触发'}</span>
</div>`;
});
resRisks.innerHTML = riskHtml;
// 净收益
const netColor = netProfit >= 0 ? '#6bffb8' : '#ff7b7b';
resNet.textContent = (netProfit >= 0 ? '+' : '') + formatMoney(netProfit);
resNet.style.color = netColor;
// 更新资金
state.money = Math.max(0, newMoney);
// 记录历史（包含触发个数）
const triggeredOps = opResults.filter(r => r.triggered);
const triggeredRisks = riskResults.filter(r => r.triggered);
state.history.push({
round: state.roundIndex + 1,
invest: investAmount,
net: netProfit,
newMoney: state.money,
triggeredOps: triggeredOps,
triggeredRisks: triggeredRisks
});
updateStatusBar();
renderHistory();
// 显示结果面板
resultPanel.classList.remove('hidden');
state.resultShown = true;
state.isInvesting = false;
if (state.money <= 0) {
nextRoundBtn.textContent = '💀 查看结局';
} else {
nextRoundBtn.textContent = (state.roundIndex + 1 >= 3) ? '🏁 查看结局' : '▶ 下一轮';
}
investBtn.disabled = true;
investInput.disabled = true;
}
// ============================================================
// 下一轮 / 结束
// ============================================================
function goToNextRound() {
if (!state.resultShown) return;
if (state.isGameOver) return;
if (state.money <= 0) {
showGameOver('资金归零，小明没能挺过去...');
return;
}
state.roundIndex++;
if (state.roundIndex >= 3) {
state.isGameOver = true;
gameScreen.classList.add('hidden');
gameOverScreen.classList.remove('hidden');
finalMoney.textContent = formatMoney(state.money);
const profit = state.money - 1000;
const msg = profit >= 0 ?
`🎉 三轮完美收官！小明赚了 ${formatMoney(profit)} 元！胆大果然有回报！` :
`😔 三轮结束，小明亏损 ${Math.abs(formatMoney(profit))} 元。下次再大胆一点？`;
gameOverMsg.textContent = msg;
return;
}
loadRound(state.roundIndex);
investInput.disabled = false;
investBtn.disabled = false;
investInput.value = 0;
investInput.focus();
}
// ============================================================
// 事件绑定
// ============================================================
startBtn.addEventListener('click', function() {
startScreen.classList.add('hidden');
gameScreen.classList.remove('hidden');
state.roundIndex = 0;
loadRound(0);
updateStatusBar();
renderHistory();
});
restartBtn.addEventListener('click', resetGame);
investBtn.addEventListener('click', executeInvest);
investInput.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
executeInvest();
}
});
nextRoundBtn.addEventListener('click', goToNextRound);
investInput.addEventListener('blur', function() {
let val = parseFloat(this.value);
const max = state.money;
if (isNaN(val) || val < 0) this.value = 0;
else if (val > max) this.value = Math.floor(max);
else this.value = Math.floor(val);
});
// 键盘快捷下一轮（结果展示时按回车）
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter' && !resultPanel.classList.contains('hidden') && !state.isGameOver) {
if (!nextRoundBtn.disabled) {
goToNextRound();
}
}
});
// 初始化
resetGame();
})();
</script>
</body>
</html>Game Source: 富豪要胆大 - 像素投资
Creator: TurboRanger58
Libraries: none
Complexity: complex (828 lines, 33.3 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: game-turboranger58" to link back to the original. Then publish at arcadelab.ai/publish.