696 lines
23 KiB
HTML
696 lines
23 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>天选打工人 - 系统对战Demo</title>
|
||
<style>
|
||
:root {
|
||
--primary: #00ff9d; /* 赛博绿 */
|
||
--danger: #ff0055; /* 故障红 */
|
||
--bg: #0a0a0a;
|
||
--card-bg: #1a1a1a;
|
||
--text: #e0e0e0;
|
||
}
|
||
|
||
body {
|
||
font-family: "Consolas", "Courier New", monospace;
|
||
background-color: var(--bg);
|
||
color: var(--text);
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* --- 顶部：敌人区域 --- */
|
||
#enemy-area {
|
||
flex: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom: 1px solid #333;
|
||
position: relative;
|
||
}
|
||
|
||
.avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
background: #333;
|
||
border: 2px solid var(--danger);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
margin-bottom: 10px;
|
||
transition: transform 0.1s;
|
||
}
|
||
|
||
.hp-bar-container {
|
||
width: 200px;
|
||
height: 20px;
|
||
background: #333;
|
||
border: 1px solid #555;
|
||
position: relative;
|
||
}
|
||
|
||
.hp-bar-fill {
|
||
height: 100%;
|
||
background: var(--danger);
|
||
width: 100%;
|
||
transition: width 0.3s ease-out;
|
||
}
|
||
|
||
.intent-bubble {
|
||
margin-top: 10px;
|
||
background: #222;
|
||
padding: 5px 10px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--danger);
|
||
color: var(--danger);
|
||
font-size: 12px;
|
||
}
|
||
|
||
/* --- 中间：战斗日志 (LLM文字流) --- */
|
||
#battle-log {
|
||
flex: 3;
|
||
overflow-y: auto;
|
||
padding: 20px;
|
||
background: rgba(0, 20, 10, 0.5);
|
||
border-bottom: 1px solid #333;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.log-entry {
|
||
margin-bottom: 8px;
|
||
opacity: 0.8;
|
||
}
|
||
.log-system {
|
||
color: var(--primary);
|
||
font-weight: bold;
|
||
}
|
||
.log-player {
|
||
color: #fff;
|
||
}
|
||
.log-enemy {
|
||
color: var(--danger);
|
||
}
|
||
.log-desc {
|
||
color: #888;
|
||
font-style: italic;
|
||
font-size: 0.9em;
|
||
margin-left: 10px;
|
||
display: block;
|
||
}
|
||
|
||
/* --- 底部：玩家区域 --- */
|
||
#player-area {
|
||
flex: 3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #111;
|
||
padding: 10px;
|
||
}
|
||
|
||
#stats-bar {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px;
|
||
background: #000;
|
||
border: 1px solid #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
.icon {
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
/* --- 卡牌区域 --- */
|
||
#hand-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
flex-grow: 1;
|
||
align-items: center;
|
||
}
|
||
|
||
.card {
|
||
width: 120px;
|
||
height: 160px;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--primary);
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
user-select: none;
|
||
position: relative;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-20px) scale(1.05);
|
||
box-shadow: 0 0 15px rgba(0, 255, 157, 0.3);
|
||
z-index: 10;
|
||
}
|
||
|
||
.card-cost {
|
||
background: var(--primary);
|
||
color: #000;
|
||
width: 25px;
|
||
height: 25px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card-name {
|
||
font-weight: bold;
|
||
color: var(--primary);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
text-align: center;
|
||
}
|
||
|
||
.card-type-attack {
|
||
border-color: #ff4444;
|
||
}
|
||
.card-type-skill {
|
||
border-color: #4488ff;
|
||
}
|
||
.card-type-money {
|
||
border-color: #ffd700;
|
||
box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
|
||
}
|
||
|
||
/* 按钮 */
|
||
#end-turn-btn {
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 100px;
|
||
padding: 15px 30px;
|
||
background: #333;
|
||
color: white;
|
||
border: 1px solid #666;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-weight: bold;
|
||
}
|
||
#end-turn-btn:hover {
|
||
background: #444;
|
||
}
|
||
|
||
/* 动画特效 */
|
||
@keyframes shake {
|
||
0% {
|
||
transform: translate(1px, 1px) rotate(0deg);
|
||
}
|
||
10% {
|
||
transform: translate(-1px, -2px) rotate(-1deg);
|
||
}
|
||
20% {
|
||
transform: translate(-3px, 0px) rotate(1deg);
|
||
}
|
||
30% {
|
||
transform: translate(3px, 2px) rotate(0deg);
|
||
}
|
||
40% {
|
||
transform: translate(1px, -1px) rotate(1deg);
|
||
}
|
||
50% {
|
||
transform: translate(-1px, 2px) rotate(-1deg);
|
||
}
|
||
60% {
|
||
transform: translate(-3px, 1px) rotate(0deg);
|
||
}
|
||
70% {
|
||
transform: translate(3px, 1px) rotate(-1deg);
|
||
}
|
||
80% {
|
||
transform: translate(-1px, -1px) rotate(1deg);
|
||
}
|
||
90% {
|
||
transform: translate(1px, 2px) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translate(1px, -2px) rotate(-1deg);
|
||
}
|
||
}
|
||
|
||
.shake-anim {
|
||
animation: shake 0.5s;
|
||
}
|
||
|
||
.damage-text {
|
||
position: absolute;
|
||
color: red;
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
animation: floatUp 1s forwards;
|
||
}
|
||
|
||
@keyframes floatUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateY(-50px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
/* 状态提示 */
|
||
#game-over {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.9);
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 100;
|
||
}
|
||
#game-over h1 {
|
||
color: var(--primary);
|
||
font-size: 40px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="enemy-area">
|
||
<div class="avatar" id="enemy-avatar">🤡</div>
|
||
<h3 id="enemy-name">势利眼班长</h3>
|
||
<div class="hp-bar-container">
|
||
<div class="hp-bar-fill" id="enemy-hp-bar"></div>
|
||
</div>
|
||
<div style="margin-top: 5px; font-size: 12px">
|
||
面子 (HP): <span id="enemy-hp-text">80</span>/80
|
||
</div>
|
||
|
||
<div class="intent-bubble" id="enemy-intent">
|
||
💬 正在酝酿一句很难听的话 (10点伤害)
|
||
</div>
|
||
</div>
|
||
|
||
<div id="battle-log">
|
||
<div class="log-entry log-system">> 系统初始化完成...</div>
|
||
<div class="log-entry log-system">> 目标锁定：[势利眼班长]</div>
|
||
<div class="log-entry log-system">> 任务：让他当众出丑。</div>
|
||
</div>
|
||
|
||
<div id="player-area">
|
||
<div id="stats-bar">
|
||
<div class="stat-item" style="color: #ff4444">
|
||
<span class="icon">❤️</span> 面子:
|
||
<span id="player-hp">100</span>
|
||
</div>
|
||
<div class="stat-item" style="color: #4488ff">
|
||
<span class="icon">🛡️</span> 厚脸皮:
|
||
<span id="player-block">0</span>
|
||
</div>
|
||
<div class="stat-item" style="color: #00ff9d">
|
||
<span class="icon">⚡</span> 精力:
|
||
<span id="player-energy">3</span>/3
|
||
</div>
|
||
<div class="stat-item" style="color: #ffd700">
|
||
<span class="icon">💰</span> 余额: ¥<span id="player-money"
|
||
>5000</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="hand-container"></div>
|
||
</div>
|
||
|
||
<button id="end-turn-btn" onclick="endTurn()">结束回合</button>
|
||
|
||
<div id="game-over">
|
||
<h1 id="game-result">任务完成</h1>
|
||
<button
|
||
onclick="location.reload()"
|
||
style="padding: 10px 20px; cursor: pointer"
|
||
>
|
||
重新开始
|
||
</button>
|
||
</div>
|
||
|
||
<script>
|
||
/* --- 1. 游戏数据设定 (配置表) --- */
|
||
|
||
const GAME_STATE = {
|
||
player: {
|
||
hp: 100,
|
||
maxHp: 100,
|
||
block: 0,
|
||
energy: 3,
|
||
maxEnergy: 3,
|
||
money: 5000,
|
||
},
|
||
enemy: {
|
||
name: "势利眼班长",
|
||
hp: 80,
|
||
maxHp: 80,
|
||
nextDmg: 10,
|
||
avatar: "🤡",
|
||
},
|
||
hand: [],
|
||
deck: [],
|
||
turn: 1,
|
||
isGameOver: false,
|
||
};
|
||
|
||
// 模拟 LLM 的文案库 (实际开发中这里接 API)
|
||
const LLM_TEXTS = {
|
||
start: [
|
||
"班长看了看你的衣服，露出了鄙夷的眼神。",
|
||
"系统检测到装逼场力波动，请宿主做好准备。",
|
||
],
|
||
atk_normal: [
|
||
"你冷冷一笑：'这就是你的实力？'",
|
||
"你指出了他话里的逻辑漏洞，全场鸦雀无声。",
|
||
"你说：'去年你借我的五百块还没还呢。'",
|
||
],
|
||
atk_money: [
|
||
"你打开手机银行，语音播报：'到账一百万元'。",
|
||
"你随手掏出一把车钥匙扔在桌上：'挪下车。'",
|
||
"你用钱扇了扇风：'这屋里穷酸气太重。'",
|
||
],
|
||
defend: [
|
||
"你假装在回消息，完全无视了他的废话。",
|
||
"你使用了【左耳进右耳出】，他的嘲讽无效。",
|
||
"你微笑着看着他，就像看着一只猴子。",
|
||
],
|
||
enemy_atk: [
|
||
"班长嘲笑道：'听说你还在租房住？'",
|
||
"班长向大家展示他的劳力士绿水鬼。",
|
||
"班长说：'服务员，给这位加把椅子，别让他站着。'",
|
||
],
|
||
};
|
||
|
||
// 卡牌数据库 (原型)
|
||
const CARD_DATABASE = [
|
||
{
|
||
id: "atk_1",
|
||
name: "阴阳怪气",
|
||
type: "attack",
|
||
cost: 1,
|
||
val: 8,
|
||
desc: "造成 8 点面子伤害",
|
||
flavorType: "atk_normal",
|
||
},
|
||
{
|
||
id: "atk_2",
|
||
name: "揭露黑历史",
|
||
type: "attack",
|
||
cost: 2,
|
||
val: 18,
|
||
desc: "造成 18 点面子伤害",
|
||
flavorType: "atk_normal",
|
||
},
|
||
{
|
||
id: "def_1",
|
||
name: "装聋作哑",
|
||
type: "skill",
|
||
cost: 1,
|
||
val: 8,
|
||
desc: "获得 8 点厚脸皮(护盾)",
|
||
flavorType: "defend",
|
||
},
|
||
{
|
||
id: "money_1",
|
||
name: "钞能力打击",
|
||
type: "money",
|
||
cost: 1,
|
||
val: 25,
|
||
moneyCost: 500,
|
||
desc: "消耗¥500，造成 25 点伤害",
|
||
flavorType: "atk_money",
|
||
},
|
||
{
|
||
id: "def_2",
|
||
name: "战术喝水",
|
||
type: "skill",
|
||
cost: 0,
|
||
val: 4,
|
||
desc: "获得 4 点厚脸皮(0费)",
|
||
flavorType: "defend",
|
||
},
|
||
];
|
||
|
||
/* --- 2. 核心逻辑函数 --- */
|
||
|
||
function initGame() {
|
||
updateUI();
|
||
startPlayerTurn();
|
||
log(getRandomText(LLM_TEXTS.start), "system");
|
||
}
|
||
|
||
function startPlayerTurn() {
|
||
GAME_STATE.player.energy = GAME_STATE.player.maxEnergy;
|
||
GAME_STATE.player.block = 0; // 回合开始护盾清零(简化规则)
|
||
|
||
// 简单的抽牌逻辑：随机抽 4 张
|
||
GAME_STATE.hand = [];
|
||
for (let i = 0; i < 4; i++) {
|
||
const randomCard =
|
||
CARD_DATABASE[
|
||
Math.floor(Math.random() * CARD_DATABASE.length)
|
||
];
|
||
// 深拷贝以防止修改原数据
|
||
GAME_STATE.hand.push({
|
||
...randomCard,
|
||
uid: Date.now() + i,
|
||
});
|
||
}
|
||
|
||
updateUI();
|
||
log(`=== 第 ${GAME_STATE.turn} 回合 ===`, "system");
|
||
}
|
||
|
||
function playCard(index) {
|
||
if (GAME_STATE.isGameOver) return;
|
||
|
||
const card = GAME_STATE.hand[index];
|
||
const player = GAME_STATE.player;
|
||
|
||
// 1. 检查资源
|
||
if (player.energy < card.cost) {
|
||
log("精力不足！", "system");
|
||
shakeScreen("stats-bar");
|
||
return;
|
||
}
|
||
if (card.type === "money" && player.money < card.moneyCost) {
|
||
log("余额不足！无法使用钞能力！", "system");
|
||
return;
|
||
}
|
||
|
||
// 2. 扣除资源
|
||
player.energy -= card.cost;
|
||
if (card.type === "money") player.money -= card.moneyCost;
|
||
|
||
// 3. 执行效果
|
||
let logMsg = "";
|
||
if (card.type === "attack" || card.type === "money") {
|
||
dealDamage(card.val);
|
||
logMsg = getRandomText(LLM_TEXTS[card.flavorType]);
|
||
} else if (card.type === "skill") {
|
||
player.block += card.val;
|
||
logMsg = getRandomText(LLM_TEXTS[card.flavorType]);
|
||
}
|
||
|
||
// 4. 移除手牌 & 更新UI
|
||
GAME_STATE.hand.splice(index, 1);
|
||
log(`你使用了【${card.name}】`, "player");
|
||
log(logMsg, "desc");
|
||
|
||
updateUI();
|
||
checkWin();
|
||
}
|
||
|
||
function dealDamage(amount) {
|
||
GAME_STATE.enemy.hp -= amount;
|
||
if (GAME_STATE.enemy.hp < 0) GAME_STATE.enemy.hp = 0;
|
||
|
||
// 视觉特效
|
||
const enemyEl = document.getElementById("enemy-avatar");
|
||
enemyEl.classList.add("shake-anim");
|
||
setTimeout(() => enemyEl.classList.remove("shake-anim"), 500);
|
||
|
||
// 飘字
|
||
showFloatingText(`-${amount}`);
|
||
}
|
||
|
||
function endTurn() {
|
||
if (GAME_STATE.isGameOver) return;
|
||
|
||
// 敌人行动
|
||
setTimeout(() => {
|
||
enemyAction();
|
||
}, 500);
|
||
}
|
||
|
||
function enemyAction() {
|
||
const dmg = GAME_STATE.enemy.nextDmg;
|
||
const player = GAME_STATE.player;
|
||
|
||
// 扣除护盾逻辑
|
||
let actualDmg = dmg;
|
||
if (player.block >= actualDmg) {
|
||
player.block -= actualDmg;
|
||
actualDmg = 0;
|
||
} else {
|
||
actualDmg -= player.block;
|
||
player.block = 0;
|
||
}
|
||
|
||
player.hp -= actualDmg;
|
||
|
||
log(getRandomText(LLM_TEXTS.enemy_atk), "enemy");
|
||
if (actualDmg > 0) {
|
||
log(`> 受到 ${actualDmg} 点精神伤害！`, "enemy");
|
||
document.body.classList.add("shake-anim"); // 全屏震动
|
||
setTimeout(
|
||
() => document.body.classList.remove("shake-anim"),
|
||
500
|
||
);
|
||
} else {
|
||
log(`> 你的厚脸皮完全抵挡了伤害！`, "system");
|
||
}
|
||
|
||
// 随机生成下回合意图
|
||
GAME_STATE.enemy.nextDmg = Math.floor(Math.random() * 10) + 5;
|
||
|
||
GAME_STATE.turn++;
|
||
updateUI();
|
||
checkLoss();
|
||
|
||
if (!GAME_STATE.isGameOver) {
|
||
setTimeout(startPlayerTurn, 1000);
|
||
}
|
||
}
|
||
|
||
/* --- 3. 辅助函数 --- */
|
||
|
||
function checkWin() {
|
||
if (GAME_STATE.enemy.hp <= 0) {
|
||
GAME_STATE.isGameOver = true;
|
||
document.getElementById("game-result").innerText =
|
||
"打脸成功！奖励 ¥10000";
|
||
document.getElementById("game-result").style.color =
|
||
"#00ff9d";
|
||
document.getElementById("game-over").style.display = "flex";
|
||
}
|
||
}
|
||
|
||
function checkLoss() {
|
||
if (GAME_STATE.player.hp <= 0) {
|
||
GAME_STATE.isGameOver = true;
|
||
document.getElementById("game-result").innerText =
|
||
"任务失败：你社死了";
|
||
document.getElementById("game-result").style.color =
|
||
"#ff0055";
|
||
document.getElementById("game-over").style.display = "flex";
|
||
}
|
||
}
|
||
|
||
function updateUI() {
|
||
// 敌人 UI
|
||
const hpPercent =
|
||
(GAME_STATE.enemy.hp / GAME_STATE.enemy.maxHp) * 100;
|
||
document.getElementById(
|
||
"enemy-hp-bar"
|
||
).style.width = `${hpPercent}%`;
|
||
document.getElementById("enemy-hp-text").innerText =
|
||
GAME_STATE.enemy.hp;
|
||
document.getElementById(
|
||
"enemy-intent"
|
||
).innerText = `💬 准备造成 ${GAME_STATE.enemy.nextDmg} 点伤害`;
|
||
|
||
// 玩家 UI
|
||
document.getElementById("player-hp").innerText =
|
||
GAME_STATE.player.hp;
|
||
document.getElementById("player-block").innerText =
|
||
GAME_STATE.player.block;
|
||
document.getElementById("player-energy").innerText =
|
||
GAME_STATE.player.energy;
|
||
document.getElementById("player-money").innerText =
|
||
GAME_STATE.player.money;
|
||
|
||
// 渲染手牌
|
||
const handContainer = document.getElementById("hand-container");
|
||
handContainer.innerHTML = "";
|
||
GAME_STATE.hand.forEach((card, index) => {
|
||
const cardEl = document.createElement("div");
|
||
cardEl.className = `card card-type-${card.type}`;
|
||
cardEl.onclick = () => playCard(index);
|
||
|
||
cardEl.innerHTML = `
|
||
<div class="card-cost">${card.cost}</div>
|
||
<div class="card-name">${card.name}</div>
|
||
<div class="card-desc">${card.desc}</div>
|
||
`;
|
||
handContainer.appendChild(cardEl);
|
||
});
|
||
}
|
||
|
||
function log(text, type) {
|
||
const logArea = document.getElementById("battle-log");
|
||
const entry = document.createElement("div");
|
||
entry.className = `log-entry log-${type}`;
|
||
entry.innerText = text;
|
||
logArea.appendChild(entry);
|
||
logArea.scrollTop = logArea.scrollHeight;
|
||
}
|
||
|
||
function getRandomText(array) {
|
||
return array[Math.floor(Math.random() * array.length)];
|
||
}
|
||
|
||
function showFloatingText(text) {
|
||
const enemyArea = document.getElementById("enemy-area");
|
||
const el = document.createElement("div");
|
||
el.className = "damage-text";
|
||
el.innerText = text;
|
||
el.style.left = "50%";
|
||
el.style.top = "50%";
|
||
enemyArea.appendChild(el);
|
||
setTimeout(() => el.remove(), 1000);
|
||
}
|
||
|
||
function shakeScreen(elementId) {
|
||
const el = document.getElementById(elementId);
|
||
el.classList.add("shake-anim");
|
||
setTimeout(() => el.classList.remove("shake-anim"), 500);
|
||
}
|
||
|
||
// 启动游戏
|
||
initGame();
|
||
</script>
|
||
</body>
|
||
</html>
|