207 lines
6.8 KiB
HTML
207 lines
6.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>系统流 卡牌对战 Demo</title>
|
||
<style>
|
||
body {
|
||
background: #111;
|
||
color: #eee;
|
||
font-family: sans-serif;
|
||
padding: 20px;
|
||
}
|
||
#log {
|
||
background: #222;
|
||
padding: 10px;
|
||
height: 250px;
|
||
overflow-y: auto;
|
||
border: 1px solid #444;
|
||
margin-bottom: 10px;
|
||
white-space: pre-line;
|
||
}
|
||
.card {
|
||
display: inline-block;
|
||
background: #333;
|
||
border: 1px solid #666;
|
||
padding: 10px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
width: 160px;
|
||
}
|
||
.card:hover {
|
||
background: #444;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h2>《系统流：校园日常攻略》卡牌演示 Demo</h2>
|
||
|
||
<div id="stats"></div>
|
||
<div id="log"></div>
|
||
<h3>我的手牌</h3>
|
||
<div id="cards"></div>
|
||
<button onclick="nextTurn()" style="margin-top: 10px">重新抽卡</button>
|
||
|
||
<script>
|
||
/////////////////////////////////////////////////////
|
||
// 游戏初始配置
|
||
/////////////////////////////////////////////////////
|
||
|
||
let player = {
|
||
favor: 0, // 女生对玩家好感
|
||
energy: 100,
|
||
};
|
||
|
||
let npc = {
|
||
favor: 30, // 初始好感
|
||
};
|
||
|
||
let systemTask = {
|
||
desc: "让对方情绪波动 +10",
|
||
target: 10,
|
||
progress: 0,
|
||
};
|
||
|
||
// 卡牌池 —— 演示可後续扩展
|
||
const cardPool = [
|
||
{
|
||
name: "夸赞（行动卡）",
|
||
type: "action",
|
||
effect: () => changeFavor(3),
|
||
desc: "+3 好感",
|
||
},
|
||
{
|
||
name: "冷幽默（行动卡）",
|
||
type: "action",
|
||
effect: () => changeFavor(5),
|
||
desc: "+5 好感",
|
||
},
|
||
{
|
||
name: "装酷（行动卡）",
|
||
type: "action",
|
||
effect: () => changeFavor(1),
|
||
desc: "+1 好感",
|
||
},
|
||
{
|
||
name: "系统加持（系统卡）",
|
||
type: "system",
|
||
effect: () =>
|
||
changeFavor(Math.floor(Math.random() * 6) + 2),
|
||
desc: "随机 +2~7 好感",
|
||
},
|
||
{
|
||
name: "语言暴击（系统卡）",
|
||
type: "system",
|
||
effect: () => changeFavor(8),
|
||
desc: "+8 好感",
|
||
},
|
||
{
|
||
name: "冷场（情绪负面）",
|
||
type: "bad",
|
||
effect: () => changeFavor(-4),
|
||
desc: "-4 好感",
|
||
},
|
||
];
|
||
|
||
// 当前手牌
|
||
let hand = [];
|
||
|
||
/////////////////////////////////////////////////////
|
||
// 功能函数
|
||
/////////////////////////////////////////////////////
|
||
|
||
// 抽牌
|
||
function drawCards(num = 3) {
|
||
hand = [];
|
||
for (let i = 0; i < num; i++) {
|
||
let c =
|
||
cardPool[Math.floor(Math.random() * cardPool.length)];
|
||
hand.push(c);
|
||
}
|
||
render();
|
||
}
|
||
|
||
// 使用卡牌
|
||
function playCard(index) {
|
||
let card = hand[index];
|
||
writeLog(`你使用了【${card.name}】 → ${card.desc}`);
|
||
card.effect();
|
||
systemCheck();
|
||
npcAction();
|
||
drawCards();
|
||
}
|
||
|
||
// 修改好感 / 数值
|
||
function changeFavor(v) {
|
||
npc.favor += v;
|
||
systemTask.progress += v;
|
||
if (npc.favor < 0) npc.favor = 0;
|
||
render();
|
||
}
|
||
|
||
// 系统任务检测
|
||
function systemCheck() {
|
||
if (systemTask.progress >= systemTask.target) {
|
||
writeLog(`📢 系统任务达成：${systemTask.desc}`);
|
||
writeLog(`奖励：获得 500万软妹币（精神上的）`);
|
||
systemTask = {
|
||
desc: "让女生惊讶一次（好感一次增长≥6）",
|
||
target: 6,
|
||
progress: 0,
|
||
};
|
||
}
|
||
}
|
||
|
||
// NPC 回合逻辑（简单演示）
|
||
function npcAction() {
|
||
let r = Math.random();
|
||
if (r < 0.5) {
|
||
writeLog("女生回应：嗯……还不错。");
|
||
} else if (r < 0.8) {
|
||
writeLog("女生：你怎么突然这样？（情绪波动+3）");
|
||
changeFavor(3);
|
||
} else {
|
||
writeLog("女生：无语……你是系统选中的人吗？（好感-2）");
|
||
changeFavor(-2);
|
||
}
|
||
}
|
||
|
||
// 日志输出
|
||
function writeLog(t) {
|
||
let log = document.getElementById("log");
|
||
log.innerHTML += t + "\n";
|
||
log.scrollTop = log.scrollHeight;
|
||
}
|
||
|
||
// UI 渲染
|
||
function render() {
|
||
document.getElementById("stats").innerHTML =
|
||
`女生好感：${npc.favor} ` +
|
||
`任务：${systemTask.desc}（当前进度 ${systemTask.progress}/${systemTask.target}）`;
|
||
|
||
let cardDiv = document.getElementById("cards");
|
||
cardDiv.innerHTML = "";
|
||
hand.forEach((c, i) => {
|
||
let div = document.createElement("div");
|
||
div.className = "card";
|
||
div.innerHTML = `<b>${c.name}</b><br>${c.desc}`;
|
||
div.onclick = () => playCard(i);
|
||
cardDiv.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// 下一回合（抽新卡）
|
||
function nextTurn() {
|
||
drawCards();
|
||
}
|
||
|
||
/////////////////////////////////////////////////////
|
||
// 开始
|
||
/////////////////////////////////////////////////////
|
||
writeLog("系统启动：新手引导中……");
|
||
writeLog("任务：让对方情绪波动 +10");
|
||
drawCards();
|
||
</script>
|
||
</body>
|
||
</html>
|