change
This commit is contained in:
206
demo.html
Normal file
206
demo.html
Normal file
@@ -0,0 +1,206 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user