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>
|