Spaces:
Running
Running
Add 1 files
Browse files- index.html +374 -851
index.html
CHANGED
|
@@ -3,955 +3,478 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
| 10 |
-
@import url('https://fonts.googleapis.com/css2?family=
|
| 11 |
-
|
| 12 |
-
:root {
|
| 13 |
-
--gold: #D4AF37;
|
| 14 |
-
--dark-purple: #1A102B;
|
| 15 |
-
--light-purple: #3E2A5C;
|
| 16 |
-
--blood-red: #8B0000;
|
| 17 |
-
--emerald: #50C878;
|
| 18 |
-
}
|
| 19 |
|
| 20 |
body {
|
| 21 |
-
font-family: '
|
| 22 |
-
background-color:
|
| 23 |
-
color:
|
| 24 |
-
|
| 25 |
-
radial-gradient(circle at 10% 20%, rgba(62, 42, 92, 0.6) 0%, transparent 20%),
|
| 26 |
-
radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.3) 0%, transparent 20%);
|
| 27 |
}
|
| 28 |
|
| 29 |
-
.
|
| 30 |
-
font-family: '
|
| 31 |
}
|
| 32 |
|
| 33 |
-
.
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
.prophecy-card {
|
| 39 |
-
background: linear-gradient(135deg, rgba(62, 42, 92, 0.8) 0%, rgba(26, 16, 43, 0.9) 100%);
|
| 40 |
-
border: 1px solid var(--gold);
|
| 41 |
-
position: relative;
|
| 42 |
transition: all 0.3s ease;
|
| 43 |
}
|
| 44 |
|
| 45 |
-
.
|
|
|
|
| 46 |
transform: translateY(-5px);
|
| 47 |
-
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
|
| 48 |
}
|
| 49 |
|
| 50 |
-
.
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
}
|
| 60 |
|
| 61 |
-
.
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
background-color: var(--gold);
|
| 65 |
-
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
| 66 |
-
display: inline-flex;
|
| 67 |
-
align-items: center;
|
| 68 |
-
justify-content: center;
|
| 69 |
-
color: black;
|
| 70 |
-
font-weight: bold;
|
| 71 |
}
|
| 72 |
|
| 73 |
-
.
|
| 74 |
-
|
| 75 |
-
background-color: rgba(139, 0, 0, 0.3);
|
| 76 |
}
|
| 77 |
|
| 78 |
-
.
|
| 79 |
-
|
| 80 |
-
background: linear-gradient(90deg, var(--blood-red), #FF4500);
|
| 81 |
-
transition: width 0.5s ease;
|
| 82 |
}
|
| 83 |
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
|
|
|
|
|
|
|
|
|
| 88 |
}
|
| 89 |
|
| 90 |
-
.
|
| 91 |
-
|
| 92 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 93 |
}
|
| 94 |
|
| 95 |
-
.
|
| 96 |
-
background: rgba(
|
| 97 |
-
|
| 98 |
}
|
| 99 |
|
| 100 |
-
.
|
| 101 |
-
|
| 102 |
-
|
|
|
|
| 103 |
}
|
| 104 |
|
| 105 |
-
.
|
| 106 |
-
|
| 107 |
-
border: 2px
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
|
|
|
| 112 |
}
|
| 113 |
|
| 114 |
-
.
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
top: 5px;
|
| 118 |
-
left: 5px;
|
| 119 |
-
right: 5px;
|
| 120 |
-
bottom: 5px;
|
| 121 |
-
border: 1px solid rgba(212, 175, 55, 0.3);
|
| 122 |
}
|
| 123 |
|
| 124 |
-
.
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
background-color: rgba(26, 16, 43, 0.95);
|
| 128 |
-
color: white;
|
| 129 |
-
text-align: center;
|
| 130 |
-
border: 1px solid var(--gold);
|
| 131 |
-
padding: 10px;
|
| 132 |
-
position: absolute;
|
| 133 |
-
z-index: 1;
|
| 134 |
-
bottom: 125%;
|
| 135 |
-
left: 50%;
|
| 136 |
-
transform: translateX(-50%);
|
| 137 |
-
opacity: 0;
|
| 138 |
-
transition: opacity 0.3s;
|
| 139 |
}
|
| 140 |
|
| 141 |
-
.
|
| 142 |
-
|
| 143 |
-
|
| 144 |
}
|
| 145 |
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
|
|
|
| 150 |
}
|
| 151 |
|
| 152 |
-
.
|
| 153 |
-
|
|
|
|
|
|
|
| 154 |
}
|
| 155 |
|
| 156 |
-
.
|
| 157 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 158 |
}
|
| 159 |
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
top: -2px;
|
| 164 |
-
left: -2px;
|
| 165 |
-
right: -2px;
|
| 166 |
-
bottom: -2px;
|
| 167 |
-
border: 1px solid transparent;
|
| 168 |
-
background: linear-gradient(90deg, var(--gold), var(--emerald), var(--gold)) border-box;
|
| 169 |
-
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
| 170 |
-
-webkit-mask-composite: destination-out;
|
| 171 |
-
mask-composite: exclude;
|
| 172 |
-
pointer-events: none;
|
| 173 |
}
|
| 174 |
</style>
|
| 175 |
</head>
|
| 176 |
-
<body class="min-h-screen
|
| 177 |
-
<div class="
|
| 178 |
<!-- 游戏标题 -->
|
| 179 |
-
<header class="text-center mb-
|
| 180 |
-
<h1 class="
|
| 181 |
-
<p class="text-xl
|
| 182 |
</header>
|
| 183 |
|
| 184 |
<!-- 游戏主界面 -->
|
| 185 |
-
<div class="grid grid-cols-1 lg:grid-cols-3 gap-
|
| 186 |
-
<!-- 左侧
|
| 187 |
-
<div class="
|
| 188 |
-
<div class="
|
| 189 |
-
<h2 class="
|
| 190 |
-
<div class="
|
| 191 |
-
<
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
<
|
| 199 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 200 |
</div>
|
| 201 |
-
|
| 202 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 203 |
</div>
|
| 204 |
</div>
|
| 205 |
|
| 206 |
-
<div class="
|
| 207 |
-
<
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
<!-- 预言卡牌将通过JS动态添加 -->
|
| 224 |
-
<div class="text-center py-4 text-gray-500">暂无激活的预言</div>
|
| 225 |
-
</div>
|
| 226 |
-
</div>
|
| 227 |
-
|
| 228 |
-
<!-- 中间:战斗日志 -->
|
| 229 |
-
<div class="bg-black bg-opacity-30 p-4 rounded-lg">
|
| 230 |
-
<h2 class="title-font text-2xl gold-text mb-4 text-center">战斗日志</h2>
|
| 231 |
-
<div id="battle-log" class="h-96 overflow-y-auto space-y-2 text-sm">
|
| 232 |
-
<div class="text-center py-16 text-gray-500">
|
| 233 |
-
<p>命运即将展开...</p>
|
| 234 |
-
<p class="mt-4">使用预言能力来改变战斗走向</p>
|
| 235 |
</div>
|
| 236 |
-
</div>
|
| 237 |
-
|
| 238 |
-
<div class="mt-4 flex justify-between">
|
| 239 |
-
<span id="turn-counter" class="text-gray-300">回合: 1</span>
|
| 240 |
-
<button id="end-turn-btn" class="action-button py-2 px-6 rounded">
|
| 241 |
-
结束回合 <i class="fas fa-hourglass-end ml-2"></i>
|
| 242 |
-
</button>
|
| 243 |
</div>
|
| 244 |
</div>
|
| 245 |
|
| 246 |
-
<!--
|
| 247 |
-
<div class="
|
| 248 |
-
<div class="
|
| 249 |
-
<h2 class="
|
| 250 |
-
|
| 251 |
-
|
| 252 |
-
<
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
<div class="mb-4">
|
| 257 |
-
<div class="flex justify-between text-sm mb-1">
|
| 258 |
-
<span>命运之力</span>
|
| 259 |
-
<span id="enemy-health">100/100</span>
|
| 260 |
</div>
|
| 261 |
-
|
| 262 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
</div>
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 269 |
</div>
|
| 270 |
-
<p class="text-sm text-gray-300">命运正注视着你的一举一动</p>
|
| 271 |
</div>
|
| 272 |
|
| 273 |
-
<
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
<div
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
|
| 288 |
-
|
| 289 |
-
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
|
| 296 |
-
<i class="fas fa-hand-sparkles mr-2"></i>自我实现
|
| 297 |
-
</button>
|
| 298 |
-
<button data-type="future-loan" class="action-button py-2 divine-border active:bg-gray-800">
|
| 299 |
-
<i class="fas fa-hand-holding-usd mr-2"></i>未来贷款
|
| 300 |
-
</button>
|
| 301 |
-
<button data-type="alter-prophecy" class="action-button py-2 divine-border active:bg-gray-800">
|
| 302 |
-
<i class="fas fa-edit mr-2"></i>篡改预言
|
| 303 |
-
</button>
|
| 304 |
-
</div>
|
| 305 |
-
|
| 306 |
-
<div id="prophecy-options" class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 307 |
-
<!-- 预言选项将通过JS动态添加 -->
|
| 308 |
-
</div>
|
| 309 |
-
</div>
|
| 310 |
-
|
| 311 |
-
<div class="mt-6">
|
| 312 |
-
<div class="bg-gray-900 bg-opacity-50 p-4 rounded">
|
| 313 |
-
<h4 class="title-font text-lg gold-text mb-2">当前选择的预言:</h4>
|
| 314 |
-
<div id="selected-prophecy" class="text-gray-300 italic">
|
| 315 |
-
暂无选择的预言
|
| 316 |
-
</div>
|
| 317 |
-
<div class="mt-4">
|
| 318 |
-
<div class="flex items-center mb-2">
|
| 319 |
-
<span class="w-24">消耗FP:</span>
|
| 320 |
-
<span id="prophecy-cost" class="font-bold">0</span>
|
| 321 |
</div>
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 325 |
</div>
|
| 326 |
</div>
|
| 327 |
</div>
|
| 328 |
-
|
| 329 |
-
<div class="mt-4 flex justify-end space-x-3">
|
| 330 |
-
<button id="cancel-prophecy-btn" class="action-button py-2 px-4">
|
| 331 |
-
取消
|
| 332 |
-
</button>
|
| 333 |
-
<button id="confirm-prophecy-btn" class="action-button py-2 px-4 bg-gradient-to-r from-green-700 to-emerald-700">
|
| 334 |
-
确认预言
|
| 335 |
-
</button>
|
| 336 |
-
</div>
|
| 337 |
</div>
|
| 338 |
</div>
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
<
|
| 348 |
-
|
| 349 |
-
</
|
|
|
|
| 350 |
</div>
|
| 351 |
</div>
|
| 352 |
</div>
|
| 353 |
-
|
| 354 |
<script>
|
| 355 |
-
document.addEventListener('DOMContentLoaded', ()
|
| 356 |
-
//
|
| 357 |
-
const
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
},
|
| 365 |
-
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
},
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 374 |
|
| 375 |
-
|
| 376 |
-
|
| 377 |
-
'
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
|
| 381 |
-
|
| 382 |
-
|
| 383 |
-
|
| 384 |
-
|
| 385 |
-
|
| 386 |
-
currentTurn: 0,
|
| 387 |
-
fulfilled: false
|
| 388 |
-
},
|
| 389 |
-
{
|
| 390 |
-
condition: '在2回合内不使用药水',
|
| 391 |
-
reward: '下一次药水效果翻倍',
|
| 392 |
-
cost: 2,
|
| 393 |
-
turnsToFulfill: 2,
|
| 394 |
-
currentTurn: 0,
|
| 395 |
-
fulfilled: false
|
| 396 |
-
},
|
| 397 |
-
{
|
| 398 |
-
condition: '连续3回合使用防御',
|
| 399 |
-
reward: '永久+10最大生命值',
|
| 400 |
-
cost: 3,
|
| 401 |
-
turnsToFulfill: 3,
|
| 402 |
-
currentTurn: 0,
|
| 403 |
-
fulfilled: false
|
| 404 |
-
}
|
| 405 |
-
]
|
| 406 |
-
},
|
| 407 |
-
'future-loan': {
|
| 408 |
-
name: '未来贷款',
|
| 409 |
-
description: '立即获得奖励,但如果未来无法偿还,将受到惩罚',
|
| 410 |
-
examples: [
|
| 411 |
-
{
|
| 412 |
-
reward: '立即恢复30生命值',
|
| 413 |
-
repayment: '3回合内失去15生命值',
|
| 414 |
-
cost: 2,
|
| 415 |
-
turnsToRepay: 3,
|
| 416 |
-
currentTurn: 0,
|
| 417 |
-
repaid: false
|
| 418 |
-
},
|
| 419 |
-
{
|
| 420 |
-
reward: '下一次攻击造成双倍伤害',
|
| 421 |
-
repayment: '下回合无法攻击',
|
| 422 |
-
cost: 2,
|
| 423 |
-
turnsToRepay: 1,
|
| 424 |
-
currentTurn: 0,
|
| 425 |
-
repaid: false
|
| 426 |
-
},
|
| 427 |
-
{
|
| 428 |
-
reward: '立即获得2FP',
|
| 429 |
-
repayment: '3回合内失去3FP',
|
| 430 |
-
cost: 1,
|
| 431 |
-
turnsToRepay: 3,
|
| 432 |
-
currentTurn: 0,
|
| 433 |
-
repaid: false
|
| 434 |
-
}
|
| 435 |
-
]
|
| 436 |
-
},
|
| 437 |
-
'alter-prophecy': {
|
| 438 |
-
name: '篡改预言',
|
| 439 |
-
description: '修改现有的预言条件或奖励',
|
| 440 |
-
examples: [
|
| 441 |
-
{
|
| 442 |
-
original: '对方使用攻击卡牌没有对我造成伤害。奖励为获取该攻击卡牌',
|
| 443 |
-
alteration: '获取两张该攻击卡牌',
|
| 444 |
-
cost: 4
|
| 445 |
-
},
|
| 446 |
-
{
|
| 447 |
-
original: '我受到敌人攻击时没有受到伤害。奖励为+5FP',
|
| 448 |
-
alteration: '我使用攻击卡牌没有对我造成伤害',
|
| 449 |
-
cost: 3
|
| 450 |
-
},
|
| 451 |
-
{
|
| 452 |
-
original: '我在3回合内不使用药水。奖励为+10防御',
|
| 453 |
-
alteration: '我在5回合内不使用药水。奖励为+20防御',
|
| 454 |
-
cost: 5
|
| 455 |
-
}
|
| 456 |
-
]
|
| 457 |
-
}
|
| 458 |
-
};
|
| 459 |
-
|
| 460 |
-
// DOM元素
|
| 461 |
-
const elements = {
|
| 462 |
-
playerHealth: document.getElementById('player-health'),
|
| 463 |
-
playerHealthBar: document.getElementById('player-health-bar'),
|
| 464 |
-
playerFate: document.getElementById('player-fate'),
|
| 465 |
-
enemyHealth: document.getElementById('enemy-health'),
|
| 466 |
-
enemyHealthBar: document.getElementById('enemy-health-bar'),
|
| 467 |
-
enemyFate: document.getElementById('enemy-fate'),
|
| 468 |
-
turnCounter: document.getElementById('turn-counter'),
|
| 469 |
-
battleLog: document.getElementById('battle-log'),
|
| 470 |
-
playerProphecies: document.getElementById('player-prophecies'),
|
| 471 |
-
enemyProphecies: document.getElementById('enemy-prophecies'),
|
| 472 |
-
|
| 473 |
-
// 按钮
|
| 474 |
-
attackBtn: document.getElementById('attack-btn'),
|
| 475 |
-
defendBtn: document.getElementById('defend-btn'),
|
| 476 |
-
potionBtn: document.getElementById('potion-btn'),
|
| 477 |
-
prophecyBtn: document.getElementById('prophecy-btn'),
|
| 478 |
-
endTurnBtn: document.getElementById('end-turn-btn'),
|
| 479 |
-
|
| 480 |
-
// 模态框
|
| 481 |
-
prophecyModal: document.getElementById('prophecy-modal'),
|
| 482 |
-
closeProphecyModal: document.getElementById('close-prophecy-modal'),
|
| 483 |
-
cancelProphecyBtn: document.getElementById('cancel-prophecy-btn'),
|
| 484 |
-
confirmProphecyBtn: document.getElementById('confirm-prophecy-btn'),
|
| 485 |
-
prophecyOptions: document.getElementById('prophecy-options'),
|
| 486 |
-
selectedProphecy: document.getElementById('selected-prophecy'),
|
| 487 |
-
prophecyCost: document.getElementById('prophecy-cost'),
|
| 488 |
-
prophecyReward: document.getElementById('prophecy-reward'),
|
| 489 |
-
|
| 490 |
-
gameOverModal: document.getElementById('game-over-modal'),
|
| 491 |
-
gameOverMessage: document.getElementById('game-over-message'),
|
| 492 |
-
restartGameBtn: document.getElementById('restart-game-btn')
|
| 493 |
-
};
|
| 494 |
-
|
| 495 |
-
// 当前选择的预言
|
| 496 |
-
let selectedProphecy = null;
|
| 497 |
-
|
| 498 |
-
// 初始化游戏
|
| 499 |
-
initGame();
|
| 500 |
-
|
| 501 |
-
// 事件监听器
|
| 502 |
-
elements.attackBtn.addEventListener('click', () => playerAction('attack'));
|
| 503 |
-
elements.defendBtn.addEventListener('click', () => playerAction('defend'));
|
| 504 |
-
elements.potionBtn.addEventListener('click', () => playerAction('potion'));
|
| 505 |
-
elements.prophecyBtn.addEventListener('click', showProphecyModal);
|
| 506 |
-
elements.endTurnBtn.addEventListener('click', endTurn);
|
| 507 |
-
|
| 508 |
-
elements.closeProphecyModal.addEventListener('click', hideProphecyModal);
|
| 509 |
-
elements.cancelProphecyBtn.addEventListener('click', hideProphecyModal);
|
| 510 |
-
elements.confirmProphecyBtn.addEventListener('click', confirmProphecy);
|
| 511 |
-
|
| 512 |
-
elements.restartGameBtn.addEventListener('click', initGame);
|
| 513 |
-
|
| 514 |
-
// 预言类型选择按钮
|
| 515 |
-
document.querySelectorAll('[data-type]').forEach(button => {
|
| 516 |
-
button.addEventListener('click', () => {
|
| 517 |
-
const type = button.dataset.type;
|
| 518 |
-
showProphecyOptions(type);
|
| 519 |
});
|
| 520 |
-
});
|
| 521 |
-
|
| 522 |
-
function initGame() {
|
| 523 |
-
// 重置游戏状态
|
| 524 |
-
gameState.player.health = 100;
|
| 525 |
-
gameState.player.fatePoints = 5;
|
| 526 |
-
gameState.player.prophecies = [];
|
| 527 |
-
|
| 528 |
-
gameState.enemy.health = 100;
|
| 529 |
-
gameState.enemy.fatePoints = 5;
|
| 530 |
-
gameState.enemy.prophecies = [];
|
| 531 |
-
|
| 532 |
-
gameState.turn = 1;
|
| 533 |
-
gameState.gameOver = false;
|
| 534 |
-
|
| 535 |
-
// 更新UI
|
| 536 |
-
updateHealthDisplay();
|
| 537 |
-
updateFateDisplay();
|
| 538 |
-
updateTurnDisplay();
|
| 539 |
-
|
| 540 |
-
// 清空战斗日志
|
| 541 |
-
elements.battleLog.innerHTML = `
|
| 542 |
-
<div class="text-center py-16 text-gray-500">
|
| 543 |
-
<p>命运即将展开...</p>
|
| 544 |
-
<p class="mt-4">使用预言能力来改变战斗走向</p>
|
| 545 |
-
</div>
|
| 546 |
-
`;
|
| 547 |
-
|
| 548 |
-
// 清空预言显示
|
| 549 |
-
elements.playerProphecies.innerHTML = '<div class="text-center py-4 text-gray-500">暂无激活的预言</div>';
|
| 550 |
-
elements.enemyProphecies.innerHTML = '<div class="text-center py-4 text-gray-500">暂无激活的预言</div>';
|
| 551 |
-
|
| 552 |
-
// 隐藏模态框
|
| 553 |
-
elements.prophecyModal.classList.add('hidden');
|
| 554 |
-
elements.gameOverModal.classList.add('hidden');
|
| 555 |
-
|
| 556 |
-
// 添加初始日志
|
| 557 |
-
addToLog('命运编织正准备开始...');
|
| 558 |
-
|
| 559 |
-
// 敌人随机行动
|
| 560 |
-
setTimeout(enemyTurn, 1000);
|
| 561 |
-
}
|
| 562 |
-
|
| 563 |
-
function updateHealthDisplay() {
|
| 564 |
-
// 更新玩家生命值
|
| 565 |
-
const playerHealthPercent = (gameState.player.health / gameState.player.maxHealth) * 100;
|
| 566 |
-
elements.playerHealth.textContent = `${gameState.player.health}/${gameState.player.maxHealth}`;
|
| 567 |
-
elements.playerHealthBar.style.width = `${playerHealthPercent}%`;
|
| 568 |
-
|
| 569 |
-
// 更新敌人生命值
|
| 570 |
-
const enemyHealthPercent = (gameState.enemy.health / gameState.enemy.maxHealth) * 100;
|
| 571 |
-
elements.enemyHealth.textContent = `${gameState.enemy.health}/${gameState.enemy.maxHealth}`;
|
| 572 |
-
elements.enemyHealthBar.style.width = `${enemyHealthPercent}%`;
|
| 573 |
-
}
|
| 574 |
-
|
| 575 |
-
function updateFateDisplay() {
|
| 576 |
-
elements.playerFate.textContent = gameState.player.fatePoints;
|
| 577 |
-
elements.enemyFate.textContent = gameState.enemy.fatePoints;
|
| 578 |
-
}
|
| 579 |
-
|
| 580 |
-
function updateTurnDisplay() {
|
| 581 |
-
elements.turnCounter.textContent = `回合: ${gameState.turn}`;
|
| 582 |
-
}
|
| 583 |
-
|
| 584 |
-
function addToLog(message, type = 'info') {
|
| 585 |
-
const logEntry = document.createElement('div');
|
| 586 |
-
|
| 587 |
-
let icon = '';
|
| 588 |
-
let textColor = 'text-gray-300';
|
| 589 |
-
|
| 590 |
-
switch(type) {
|
| 591 |
-
case 'damage':
|
| 592 |
-
icon = '<i class="fas fa-bolt mr-2"></i>';
|
| 593 |
-
textColor = 'text-red-400';
|
| 594 |
-
break;
|
| 595 |
-
case 'heal':
|
| 596 |
-
icon = '<i class="fas fa-heart mr-2"></i>';
|
| 597 |
-
textColor = 'text-green-400';
|
| 598 |
-
break;
|
| 599 |
-
case 'prophecy':
|
| 600 |
-
icon = '<i class="fas fa-eye mr-2"></i>';
|
| 601 |
-
textColor = 'text-yellow-400';
|
| 602 |
-
break;
|
| 603 |
-
case 'fate':
|
| 604 |
-
icon = '<i class="fas fa-star mr-2"></i>';
|
| 605 |
-
textColor = 'text-purple-400';
|
| 606 |
-
break;
|
| 607 |
-
default:
|
| 608 |
-
icon = '<i class="fas fa-info-circle mr-2"></i>';
|
| 609 |
-
}
|
| 610 |
-
|
| 611 |
-
logEntry.innerHTML = `<span class="${textColor}">${icon}${message}</span>`;
|
| 612 |
-
elements.battleLog.appendChild(logEntry);
|
| 613 |
-
elements.battleLog.scrollTop = elements.battleLog.scrollHeight;
|
| 614 |
-
}
|
| 615 |
-
|
| 616 |
-
function playerAction(action) {
|
| 617 |
-
if (gameState.gameOver) return;
|
| 618 |
-
|
| 619 |
-
switch(action) {
|
| 620 |
-
case 'attack':
|
| 621 |
-
const playerDamage = Math.floor(Math.random() * 15) + 10;
|
| 622 |
-
gameState.enemy.health -= playerDamage;
|
| 623 |
-
addToLog(`你对敌人造成了${playerDamage}点伤害`, 'damage');
|
| 624 |
-
break;
|
| 625 |
-
case 'defend':
|
| 626 |
-
// 防御可以减少下回合受到的伤害
|
| 627 |
-
addToLog('你采取了防御姿态,下回合受到的伤害减少30%', 'info');
|
| 628 |
-
break;
|
| 629 |
-
case 'potion':
|
| 630 |
-
const healAmount = Math.floor(Math.random() * 20) + 15;
|
| 631 |
-
gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + healAmount);
|
| 632 |
-
addToLog(`你使用药水恢复了${healAmount}点生命值`, 'heal');
|
| 633 |
-
break;
|
| 634 |
-
}
|
| 635 |
-
|
| 636 |
-
updateHealthDisplay();
|
| 637 |
-
checkGameOver();
|
| 638 |
-
}
|
| 639 |
-
|
| 640 |
-
function enemyTurn() {
|
| 641 |
-
if (gameState.gameOver) return;
|
| 642 |
-
|
| 643 |
-
// 简单AI:随机选择攻击或防御
|
| 644 |
-
const actions = ['attack', 'defend'];
|
| 645 |
-
const action = actions[Math.floor(Math.random() * actions.length)];
|
| 646 |
-
|
| 647 |
-
switch(action) {
|
| 648 |
-
case 'attack':
|
| 649 |
-
const enemyDamage = Math.floor(Math.random() * 12) + 8;
|
| 650 |
-
gameState.player.health -= enemyDamage;
|
| 651 |
-
addToLog(`敌人对你造成了${enemyDamage}点伤害`, 'damage');
|
| 652 |
-
break;
|
| 653 |
-
case 'defend':
|
| 654 |
-
addToLog('敌人采取了防御姿态', 'info');
|
| 655 |
-
break;
|
| 656 |
-
}
|
| 657 |
-
|
| 658 |
-
updateHealthDisplay();
|
| 659 |
-
checkGameOver();
|
| 660 |
-
}
|
| 661 |
-
|
| 662 |
-
function endTurn() {
|
| 663 |
-
if (gameState.gameOver) return;
|
| 664 |
-
|
| 665 |
-
// 检查预言完成情况
|
| 666 |
-
checkProphecies();
|
| 667 |
-
|
| 668 |
-
gameState.turn++;
|
| 669 |
-
updateTurnDisplay();
|
| 670 |
-
|
| 671 |
-
// 每回合恢复1FP,最多5点
|
| 672 |
-
gameState.player.fatePoints = Math.min(5, gameState.player.fatePoints + 1);
|
| 673 |
-
gameState.enemy.fatePoints = Math.min(5, gameState.enemy.fatePoints + 1);
|
| 674 |
-
updateFateDisplay();
|
| 675 |
-
|
| 676 |
-
addToLog(`进入第${gameState.turn}回合`, 'info');
|
| 677 |
|
| 678 |
-
|
| 679 |
-
|
| 680 |
-
|
| 681 |
-
|
| 682 |
-
function checkGameOver() {
|
| 683 |
-
if (gameState.player.health <= 0) {
|
| 684 |
-
gameState.player.health = 0;
|
| 685 |
-
gameState.gameOver = true;
|
| 686 |
-
updateHealthDisplay();
|
| 687 |
-
showGameOver(false);
|
| 688 |
-
} else if (gameState.enemy.health <= 0) {
|
| 689 |
-
gameState.enemy.health = 0;
|
| 690 |
-
gameState.gameOver = true;
|
| 691 |
-
updateHealthDisplay();
|
| 692 |
-
showGameOver(true);
|
| 693 |
-
}
|
| 694 |
-
}
|
| 695 |
-
|
| 696 |
-
function showGameOver(playerWon) {
|
| 697 |
-
if (playerWon) {
|
| 698 |
-
elements.gameOverMessage.textContent = '命运眷顾着你!你取得了胜利!';
|
| 699 |
-
elements.gameOverMessage.className = 'text-center text-xl mb-6 text-emerald-400';
|
| 700 |
-
} else {
|
| 701 |
-
elements.gameOverMessage.textContent = '命运对你不再微笑...你被击败了';
|
| 702 |
-
elements.gameOverMessage.className = 'text-center text-xl mb-6 text-red-400';
|
| 703 |
-
}
|
| 704 |
-
|
| 705 |
-
elements.gameOverModal.classList.remove('hidden');
|
| 706 |
-
}
|
| 707 |
-
|
| 708 |
-
function showProphecyModal() {
|
| 709 |
-
if (gameState.gameOver) return;
|
| 710 |
-
|
| 711 |
-
selectedProphecy = null;
|
| 712 |
-
elements.selectedProphecy.textContent = '暂无选择的预言';
|
| 713 |
-
elements.prophecyCost.textContent = '0';
|
| 714 |
-
elements.prophecyReward.textContent = '无';
|
| 715 |
-
|
| 716 |
-
// 清空之前的选项
|
| 717 |
-
elements.prophecyOptions.innerHTML = '';
|
| 718 |
|
| 719 |
-
|
| 720 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 721 |
|
| 722 |
-
|
| 723 |
-
|
| 724 |
-
}
|
| 725 |
|
| 726 |
-
|
| 727 |
-
|
| 728 |
-
|
| 729 |
-
|
| 730 |
-
const
|
| 731 |
-
|
| 732 |
-
|
| 733 |
-
|
| 734 |
-
|
| 735 |
-
|
| 736 |
-
card.dataset.index = index;
|
| 737 |
|
| 738 |
-
|
| 739 |
-
|
| 740 |
-
|
| 741 |
-
|
| 742 |
-
|
| 743 |
-
<p class="text-sm">奖励: ${prophecy.reward}</p>
|
| 744 |
-
`;
|
| 745 |
-
} else if (type === 'future-loan') {
|
| 746 |
-
content += `
|
| 747 |
-
<p class="text-sm mb-2">奖励: ${prophecy.reward}</p>
|
| 748 |
-
<p class="text-sm">偿还: ${prophecy.repayment}</p>
|
| 749 |
-
`;
|
| 750 |
-
} else if (type === 'alter-prophecy') {
|
| 751 |
-
content += `
|
| 752 |
-
<p class="text-sm mb-2">原预言: ${prophecy.original}</p>
|
| 753 |
-
<p class="text-sm">篡改为: ${prophecy.alteration}</p>
|
| 754 |
-
`;
|
| 755 |
-
}
|
| 756 |
|
| 757 |
-
|
|
|
|
|
|
|
| 758 |
|
| 759 |
-
|
|
|
|
|
|
|
|
|
|
| 760 |
|
| 761 |
-
|
| 762 |
-
|
| 763 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 764 |
|
| 765 |
-
|
| 766 |
-
|
| 767 |
-
|
| 768 |
-
|
| 769 |
-
function selectProphecy(type, index) {
|
| 770 |
-
const prophecy = JSON.parse(JSON.stringify(prophecyTypes[type].examples[index]));
|
| 771 |
-
prophecy.type = type;
|
| 772 |
-
|
| 773 |
-
selectedProphecy = prophecy;
|
| 774 |
-
|
| 775 |
-
// 更新UI显示选择的预言
|
| 776 |
-
if (type === 'self-fulfilling') {
|
| 777 |
-
elements.selectedProphecy.innerHTML = `
|
| 778 |
-
<p><span class="gold-text">条件:</span> ${prophecy.condition}</p>
|
| 779 |
-
<p><span class="gold-text">奖励:</span> ${prophecy.reward}</p>
|
| 780 |
-
<p><span class="gold-text">持续回合:</span> ${prophecy.turnsToFulfill}</p>
|
| 781 |
-
`;
|
| 782 |
-
} else if (type === 'future-loan') {
|
| 783 |
-
elements.selectedProphecy.innerHTML = `
|
| 784 |
-
<p><span class="gold-text">奖励:</span> ${prophecy.reward}</p>
|
| 785 |
-
<p><span class="gold-text">偿还:</span> ${prophecy.repayment}</p>
|
| 786 |
-
`;
|
| 787 |
-
} else if (type === 'alter-prophecy') {
|
| 788 |
-
elements.selectedProphecy.innerHTML = `
|
| 789 |
-
<p><span class="gold-text">原预言:</span> ${prophecy.original}</p>
|
| 790 |
-
<p><span class="gold-text">篡改为:</span> ${prophecy.alteration}</p>
|
| 791 |
-
`;
|
| 792 |
}
|
| 793 |
-
|
| 794 |
-
elements.prophecyCost.textContent = prophecy.cost;
|
| 795 |
-
elements.prophecyReward.textContent = prophecy.type === 'future-loan' ? prophecy.reward : (prophecy.reward || prophecy.alteration);
|
| 796 |
-
}
|
| 797 |
|
| 798 |
-
|
| 799 |
-
|
| 800 |
-
addToLog('命运之力不足,无法完成预言契约', 'prophecy');
|
| 801 |
-
hideProphecyModal();
|
| 802 |
-
return;
|
| 803 |
-
}
|
| 804 |
-
|
| 805 |
-
// 支付命运点数
|
| 806 |
-
gameState.player.fatePoints -= selectedProphecy.cost;
|
| 807 |
-
updateFateDisplay();
|
| 808 |
|
| 809 |
-
//
|
| 810 |
-
|
| 811 |
-
|
| 812 |
-
|
| 813 |
-
|
| 814 |
-
// 立即给予奖励
|
| 815 |
-
if (prophecyCopy.reward.includes('生命值')) {
|
| 816 |
-
const healAmount = parseInt(prophecyCopy.reward.match(/\d+/)[0]);
|
| 817 |
-
gameState.player.health = Math.min(gameState.player.maxHealth, gameState.player.health + healAmount);
|
| 818 |
-
addToLog(`预言贷款生效: ${prophecyCopy.reward}`, 'prophecy');
|
| 819 |
-
} else if (prophecyCopy.reward.includes('FP')) {
|
| 820 |
-
const fpGain = parseInt(prophecyCopy.reward.match(/\d+/)[0]);
|
| 821 |
-
gameState.player.fatePoints += fpGain;
|
| 822 |
-
addToLog(`预言贷款生效: ${prophecyCopy.reward}`, 'prophecy');
|
| 823 |
-
}
|
| 824 |
-
updateHealthDisplay();
|
| 825 |
-
updateFateDisplay();
|
| 826 |
}
|
| 827 |
-
|
| 828 |
-
gameState.player.prophecies.push(prophecyCopy);
|
| 829 |
-
displayPlayerProphecies();
|
| 830 |
-
|
| 831 |
-
addToLog(`你制定了一个新的预言契约: "${prophecyCopy.type === 'alter-prophecy' ? prophecyCopy.alteration : prophecyCopy.condition}"`, 'prophecy');
|
| 832 |
-
|
| 833 |
-
hideProphecyModal();
|
| 834 |
-
}
|
| 835 |
|
| 836 |
-
|
| 837 |
-
|
| 838 |
-
|
| 839 |
-
|
| 840 |
-
}
|
| 841 |
-
|
| 842 |
-
elements.playerProphecies.innerHTML = '';
|
| 843 |
-
|
| 844 |
-
gameState.player.prophecies.forEach((prophecy, index) => {
|
| 845 |
-
const card = document.createElement('div');
|
| 846 |
-
card.className = 'prophecy-card p-3 rounded text-sm';
|
| 847 |
-
|
| 848 |
-
let content = `<h4 class="font-bold mb-1 gold-text">${prophecyTypes[prophecy.type].name}</h4>`;
|
| 849 |
-
|
| 850 |
-
if (prophecy.type === 'self-fulfilling') {
|
| 851 |
-
const progress = Math.min(prophecy.currentTurn / prophecy.turnsToFulfill * 100, 100);
|
| 852 |
-
content += `
|
| 853 |
-
<p class="mb-1">条件: ${prophecy.condition}</p>
|
| 854 |
-
<p class="mb-1">奖励: ${prophecy.reward}</p>
|
| 855 |
-
<div class="w-full bg-gray-700 rounded h-2 mb-1">
|
| 856 |
-
<div class="bg-gradient-to-r from-yellow-500 to-red-500 h-2 rounded" style="width: ${progress}%"></div>
|
| 857 |
-
</div>
|
| 858 |
-
<p class="text-xs">${prophecy.currentTurn}/${prophecy.turnsToFulfill}回合</p>
|
| 859 |
-
`;
|
| 860 |
-
} else if (prophecy.type === 'future-loan') {
|
| 861 |
-
const progress = Math.min(prophecy.currentTurn / prophecy.turnsToRepay * 100, 100);
|
| 862 |
-
content += `
|
| 863 |
-
<p class="mb-1">奖励已获得: ${prophecy.reward}</p>
|
| 864 |
-
<p class="mb-1">偿还: ${prophecy.repayment}</p>
|
| 865 |
-
<div class="w-full bg-gray-700 rounded h-2 mb-1">
|
| 866 |
-
<div class="bg-gradient-to-r from-green-500 to-blue-500 h-2 rounded" style="width: ${progress}%"></div>
|
| 867 |
-
</div>
|
| 868 |
-
<p class="text-xs">${prophecy.currentTurn}/${prophecy.turnsToRepay}回合</p>
|
| 869 |
-
`;
|
| 870 |
-
} else if (prophecy.type === 'alter-prophecy') {
|
| 871 |
-
content += `
|
| 872 |
-
<p class="mb-1">原预言: ${prophecy.original}</p>
|
| 873 |
-
<p class="mb-1">篡改为: ${prophecy.alteration}</p>
|
| 874 |
-
<p class="text-xs mt-1">已生效</p>
|
| 875 |
-
`;
|
| 876 |
-
}
|
| 877 |
-
|
| 878 |
-
card.innerHTML = content;
|
| 879 |
-
elements.playerProphecies.appendChild(card);
|
| 880 |
-
});
|
| 881 |
-
}
|
| 882 |
|
| 883 |
-
|
| 884 |
-
|
| 885 |
-
|
| 886 |
-
|
| 887 |
-
|
| 888 |
-
|
| 889 |
-
|
| 890 |
-
|
| 891 |
-
|
| 892 |
-
|
| 893 |
-
|
| 894 |
-
|
| 895 |
-
|
| 896 |
-
|
| 897 |
-
|
| 898 |
-
|
| 899 |
-
|
| 900 |
-
|
| 901 |
-
|
| 902 |
-
|
| 903 |
-
|
| 904 |
-
}
|
| 905 |
-
|
| 906 |
-
|
| 907 |
-
|
| 908 |
-
|
| 909 |
-
|
| 910 |
-
(p.type === 'self-fulfilling' && !p.fulfilled) ||
|
| 911 |
-
(p.type === 'future-loan' && !p.repaid) ||
|
| 912 |
-
(p.type === 'alter-prophecy')
|
| 913 |
-
);
|
| 914 |
-
|
| 915 |
-
displayPlayerProphecies();
|
| 916 |
|
| 917 |
-
|
| 918 |
}
|
| 919 |
|
| 920 |
-
function
|
| 921 |
-
|
| 922 |
-
|
| 923 |
-
|
| 924 |
-
|
| 925 |
-
|
| 926 |
-
|
| 927 |
-
} else
|
| 928 |
-
|
| 929 |
-
gameState.player.maxHealth += hpGain;
|
| 930 |
-
gameState.player.health += hpGain;
|
| 931 |
-
addToLog('你的最大生命值增加了', 'fate');
|
| 932 |
-
updateHealthDisplay();
|
| 933 |
-
}
|
| 934 |
-
}
|
| 935 |
-
|
| 936 |
-
function repayFutureLoan(prophecy) {
|
| 937 |
-
if (prophecy.repayment.includes('生命值')) {
|
| 938 |
-
const hpLoss = parseInt(prophecy.repayment.match(/\d+/)[0]);
|
| 939 |
-
gameState.player.health = Math.max(0, gameState.player.health - hpLoss);
|
| 940 |
-
addToLog(`你失去了${hpLoss}点生命值作为预言偿还`, 'damage');
|
| 941 |
-
updateHealthDisplay();
|
| 942 |
-
} else if (prophecy.repayment.includes('FP')) {
|
| 943 |
-
const fpLoss = parseInt(prophecy.repayment.match(/\d+/)[0]);
|
| 944 |
-
gameState.player.fatePoints = Math.max(0, gameState.player.fatePoints - fpLoss);
|
| 945 |
-
addToLog(`你失去了${fpLoss}点命运之力作为预言偿还`, 'fate');
|
| 946 |
-
updateFateDisplay();
|
| 947 |
-
} else if (prophecy.repayment.includes('无法攻击')) {
|
| 948 |
-
addToLog('你需要休息一回合来偿还预言', 'info');
|
| 949 |
-
// 这里可以标记玩家下回合不能攻击
|
| 950 |
}
|
| 951 |
|
| 952 |
-
|
|
|
|
| 953 |
}
|
| 954 |
});
|
| 955 |
</script>
|
| 956 |
-
<
|
| 957 |
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>赛博预言者</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
<style>
|
| 10 |
+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
|
| 12 |
body {
|
| 13 |
+
font-family: 'Rajdhani', sans-serif;
|
| 14 |
+
background-color: #0a0a1a;
|
| 15 |
+
color: #e0e0ff;
|
| 16 |
+
overflow-x: hidden;
|
|
|
|
|
|
|
| 17 |
}
|
| 18 |
|
| 19 |
+
.cyber-font {
|
| 20 |
+
font-family: 'Orbitron', sans-serif;
|
| 21 |
}
|
| 22 |
|
| 23 |
+
.cyber-card {
|
| 24 |
+
background: rgba(10, 20, 40, 0.7);
|
| 25 |
+
border: 1px solid #4d00ff;
|
| 26 |
+
box-shadow: 0 0 15px rgba(77, 0, 255, 0.5);
|
| 27 |
+
border-radius: 8px;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
transition: all 0.3s ease;
|
| 29 |
}
|
| 30 |
|
| 31 |
+
.cyber-card:hover {
|
| 32 |
+
box-shadow: 0 0 25px rgba(77, 0, 255, 0.8);
|
| 33 |
transform: translateY(-5px);
|
|
|
|
| 34 |
}
|
| 35 |
|
| 36 |
+
.cyber-button {
|
| 37 |
+
background: linear-gradient(45deg, #4d00ff, #00a2ff);
|
| 38 |
+
border: none;
|
| 39 |
+
color: white;
|
| 40 |
+
padding: 10px 20px;
|
| 41 |
+
border-radius: 4px;
|
| 42 |
+
cursor: pointer;
|
| 43 |
+
transition: all 0.3s ease;
|
| 44 |
+
font-weight: bold;
|
| 45 |
}
|
| 46 |
|
| 47 |
+
.cyber-button:hover {
|
| 48 |
+
background: linear-gradient(45deg, #00a2ff, #4d00ff);
|
| 49 |
+
box-shadow: 0 0 15px rgba(77, 0, 255, 0.5);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 50 |
}
|
| 51 |
|
| 52 |
+
.cyber-text {
|
| 53 |
+
text-shadow: 0 0 5px rgba(77, 0, 255, 0.7);
|
|
|
|
| 54 |
}
|
| 55 |
|
| 56 |
+
.glow {
|
| 57 |
+
animation: glow 2s infinite alternate;
|
|
|
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
+
@keyframes glow {
|
| 61 |
+
from {
|
| 62 |
+
box-shadow: 0 0 5px rgba(77, 0, 255, 0.5);
|
| 63 |
+
}
|
| 64 |
+
to {
|
| 65 |
+
box-shadow: 0 0 20px rgba(77, 0, 255, 0.9);
|
| 66 |
+
}
|
| 67 |
}
|
| 68 |
|
| 69 |
+
.word-token {
|
| 70 |
+
display: inline-block;
|
| 71 |
+
padding: 8px 12px;
|
| 72 |
+
margin: 5px;
|
| 73 |
+
background: rgba(30, 30, 70, 0.7);
|
| 74 |
+
border: 1px solid #4d00ff;
|
| 75 |
+
border-radius: 4px;
|
| 76 |
+
cursor: grab;
|
| 77 |
+
user-select: none;
|
| 78 |
+
transition: all 0.2s ease;
|
| 79 |
}
|
| 80 |
|
| 81 |
+
.word-token:hover {
|
| 82 |
+
background: rgba(50, 50, 100, 0.9);
|
| 83 |
+
transform: scale(1.05);
|
| 84 |
}
|
| 85 |
|
| 86 |
+
.word-token.dragging {
|
| 87 |
+
opacity: 0.8;
|
| 88 |
+
transform: scale(1.1);
|
| 89 |
+
box-shadow: 0 0 15px rgba(77, 0, 255, 0.7);
|
| 90 |
}
|
| 91 |
|
| 92 |
+
.drop-area {
|
| 93 |
+
min-height: 60px;
|
| 94 |
+
border: 2px dashed #4d00ff;
|
| 95 |
+
border-radius: 8px;
|
| 96 |
+
padding: 10px;
|
| 97 |
+
margin: 10px 0;
|
| 98 |
+
background: rgba(20, 20, 50, 0.3);
|
| 99 |
+
transition: all 0.3s ease;
|
| 100 |
}
|
| 101 |
|
| 102 |
+
.drop-area.highlight {
|
| 103 |
+
background: rgba(77, 0, 255, 0.2);
|
| 104 |
+
border-color: #00a2ff;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 105 |
}
|
| 106 |
|
| 107 |
+
.completed-prophecy {
|
| 108 |
+
border-color: #00ff88;
|
| 109 |
+
background: rgba(0, 255, 136, 0.1);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 110 |
}
|
| 111 |
|
| 112 |
+
.failed-prophecy {
|
| 113 |
+
border-color: #ff0055;
|
| 114 |
+
background: rgba(255, 0, 85, 0.1);
|
| 115 |
}
|
| 116 |
|
| 117 |
+
.hud-element {
|
| 118 |
+
background: rgba(0, 0, 0, 0.7);
|
| 119 |
+
border: 1px solid #4d00ff;
|
| 120 |
+
border-radius: 4px;
|
| 121 |
+
padding: 10px;
|
| 122 |
}
|
| 123 |
|
| 124 |
+
.terminal-line {
|
| 125 |
+
font-family: 'Courier New', monospace;
|
| 126 |
+
color: #00ff88;
|
| 127 |
+
margin: 5px 0;
|
| 128 |
}
|
| 129 |
|
| 130 |
+
.terminal-cursor {
|
| 131 |
+
display: inline-block;
|
| 132 |
+
width: 8px;
|
| 133 |
+
height: 16px;
|
| 134 |
+
background: #00ff88;
|
| 135 |
+
animation: blink 1s infinite;
|
| 136 |
}
|
| 137 |
|
| 138 |
+
@keyframes blink {
|
| 139 |
+
0%, 100% { opacity: 1; }
|
| 140 |
+
50% { opacity: 0; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 141 |
}
|
| 142 |
</style>
|
| 143 |
</head>
|
| 144 |
+
<body class="min-h-screen">
|
| 145 |
+
<div class="container mx-auto px-4 py-8">
|
| 146 |
<!-- 游戏标题 -->
|
| 147 |
+
<header class="text-center mb-12">
|
| 148 |
+
<h1 class="cyber-font text-5xl font-bold mb-4 cyber-text">赛博预言者</h1>
|
| 149 |
+
<p class="text-xl">构建你的预言,改变未来,但要小心代价...</p>
|
| 150 |
</header>
|
| 151 |
|
| 152 |
<!-- 游戏主界面 -->
|
| 153 |
+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
| 154 |
+
<!-- 左侧 - 玩家状态 -->
|
| 155 |
+
<div class="lg:col-span-1">
|
| 156 |
+
<div class="cyber-card p-6 mb-6">
|
| 157 |
+
<h2 class="cyber-font text-2xl font-bold mb-4">玩家状态</h2>
|
| 158 |
+
<div class="grid grid-cols-2 gap-4 mb-4">
|
| 159 |
+
<div class="hud-element">
|
| 160 |
+
<h3 class="text-sm text-purple-300">生命值</h3>
|
| 161 |
+
<p class="text-2xl font-bold">100/100</p>
|
| 162 |
+
</div>
|
| 163 |
+
<div class="hud-element">
|
| 164 |
+
<h3 class="text-sm text-purple-300">能量</h3>
|
| 165 |
+
<p class="text-2xl font-bold">3/5</p>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="hud-element">
|
| 168 |
+
<h3 class="text-sm text-purple-300">回合</h3>
|
| 169 |
+
<p class="text-2xl font-bold">1</p>
|
| 170 |
+
</div>
|
| 171 |
+
<div class="hud-element">
|
| 172 |
+
<h3 class="text-sm text-purple-300">信用点</h3>
|
| 173 |
+
<p class="text-2xl font-bold">250</p>
|
| 174 |
+
</div>
|
| 175 |
</div>
|
| 176 |
+
|
| 177 |
+
<div class="mt-4">
|
| 178 |
+
<h3 class="text-lg font-bold mb-2">当前债务</h3>
|
| 179 |
+
<div class="terminal-line">> 未来贷款: <span class="text-red-400">+150 信用点</span></div>
|
| 180 |
+
<div class="terminal-line">> 利息: <span class="text-red-400">15%</span></div>
|
| 181 |
+
<div class="terminal-line">> 到期回合: <span class="text-yellow-400">3</span></div>
|
| 182 |
</div>
|
| 183 |
</div>
|
| 184 |
|
| 185 |
+
<div class="cyber-card p-6">
|
| 186 |
+
<h2 class="cyber-font text-2xl font-bold mb-4">对手状态</h2>
|
| 187 |
+
<div class="grid grid-cols-2 gap-4 mb-4">
|
| 188 |
+
<div class="hud-element">
|
| 189 |
+
<h3 class="text-sm text-purple-300">生命值</h3>
|
| 190 |
+
<p class="text-2xl font-bold">85/100</p>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="hud-element">
|
| 193 |
+
<h3 class="text-sm text-purple-300">护盾</h3>
|
| 194 |
+
<p class="text-2xl font-bold">0</p>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<div class="mt-4">
|
| 199 |
+
<h3 class="text-lg font-bold mb-2">对手意图</h3>
|
| 200 |
+
<div class="terminal-line">> 准备攻击: <span class="text-red-400">火焰冲击</span></div>
|
| 201 |
+
<div class="terminal-line">> 能量消耗: <span class="text-yellow-400">2</span></div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 202 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 203 |
</div>
|
| 204 |
</div>
|
| 205 |
|
| 206 |
+
<!-- 中间 - 游戏主区域 -->
|
| 207 |
+
<div class="lg:col-span-2">
|
| 208 |
+
<div class="cyber-card p-6 mb-6">
|
| 209 |
+
<h2 class="cyber-font text-2xl font-bold mb-4">构建你的预言</h2>
|
| 210 |
+
|
| 211 |
+
<div class="mb-6">
|
| 212 |
+
<h3 class="text-lg font-bold mb-2">预言模板</h3>
|
| 213 |
+
<div id="prophecy-template" class="drop-area">
|
| 214 |
+
<p class="text-gray-400 italic">拖拽词语到这里构建预言</p>
|
| 215 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 216 |
</div>
|
| 217 |
+
|
| 218 |
+
<div class="mb-6">
|
| 219 |
+
<h3 class="text-lg font-bold mb-2">可用词语</h3>
|
| 220 |
+
<div id="word-bank" class="flex flex-wrap p-4 bg-gray-900 rounded-lg">
|
| 221 |
+
<!-- 词语将通过JavaScript动态生成 -->
|
| 222 |
+
</div>
|
| 223 |
</div>
|
| 224 |
+
|
| 225 |
+
<div class="grid grid-cols-2 gap-4">
|
| 226 |
+
<button id="submit-prophecy" class="cyber-button glow">
|
| 227 |
+
<i class="fas fa-check-circle mr-2"></i> 确认预言
|
| 228 |
+
</button>
|
| 229 |
+
<button id="take-loan" class="cyber-button">
|
| 230 |
+
<i class="fas fa-hand-holding-usd mr-2"></i> 向未来贷款
|
| 231 |
+
</button>
|
| 232 |
+
<button id="modify-prophecy" class="cyber-button">
|
| 233 |
+
<i class="fas fa-edit mr-2"></i> 篡改预言
|
| 234 |
+
</button>
|
| 235 |
+
<button id="end-turn" class="cyber-button">
|
| 236 |
+
<i class="fas fa-forward mr-2"></i> 结束回合
|
| 237 |
+
</button>
|
| 238 |
</div>
|
|
|
|
| 239 |
</div>
|
| 240 |
|
| 241 |
+
<div class="cyber-card p-6">
|
| 242 |
+
<h2 class="cyber-font text-2xl font-bold mb-4">活跃预言</h2>
|
| 243 |
+
|
| 244 |
+
<div id="active-prophecies">
|
| 245 |
+
<div class="prophecy-item mb-4 p-4 cyber-card">
|
| 246 |
+
<div class="flex justify-between items-start">
|
| 247 |
+
<div>
|
| 248 |
+
<h3 class="font-bold text-lg">预言 #1</h3>
|
| 249 |
+
<p class="text-sm text-gray-400">到期回合: 3</p>
|
| 250 |
+
</div>
|
| 251 |
+
<span class="px-3 py-1 bg-purple-900 rounded-full text-sm">进行中</span>
|
| 252 |
+
</div>
|
| 253 |
+
<div class="mt-2">
|
| 254 |
+
<p>"在第三回合前对敌人造成50点伤害"</p>
|
| 255 |
+
</div>
|
| 256 |
+
<div class="mt-2 flex justify-between items-center">
|
| 257 |
+
<div>
|
| 258 |
+
<span class="text-sm">奖励: <span class="text-green-400">+100 信用点</span></span>
|
| 259 |
+
</div>
|
| 260 |
+
<div>
|
| 261 |
+
<span class="text-sm">进度: <span class="text-yellow-400">15/50</span></span>
|
| 262 |
+
</div>
|
| 263 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 264 |
</div>
|
| 265 |
+
|
| 266 |
+
<div class="prophecy-item mb-4 p-4 cyber-card completed-prophecy">
|
| 267 |
+
<div class="flex justify-between items-start">
|
| 268 |
+
<div>
|
| 269 |
+
<h3 class="font-bold text-lg">预言 #2</h3>
|
| 270 |
+
<p class="text-sm text-gray-400">到期回合: 2</p>
|
| 271 |
+
</div>
|
| 272 |
+
<span class="px-3 py-1 bg-green-900 rounded-full text-sm">已完成</span>
|
| 273 |
+
</div>
|
| 274 |
+
<div class="mt-2">
|
| 275 |
+
<p>"前两个回合没有使用药水"</p>
|
| 276 |
+
</div>
|
| 277 |
+
<div class="mt-2">
|
| 278 |
+
<span class="text-sm">奖励: <span class="text-green-400">+50 信用点</span> (已领取)</span>
|
| 279 |
+
</div>
|
| 280 |
</div>
|
| 281 |
</div>
|
| 282 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 283 |
</div>
|
| 284 |
</div>
|
| 285 |
+
|
| 286 |
+
<!-- 游戏日志 -->
|
| 287 |
+
<div class="cyber-card p-6 mt-8">
|
| 288 |
+
<h2 class="cyber-font text-2xl font-bold mb-4">系统日志</h2>
|
| 289 |
+
<div id="game-log" class="bg-black p-4 rounded-lg h-48 overflow-y-auto font-mono text-sm">
|
| 290 |
+
<div class="terminal-line">> 系统初始化完成... <span class="text-green-400">OK</span></div>
|
| 291 |
+
<div class="terminal-line">> 加载玩家数据... <span class="text-green-400">OK</span></div>
|
| 292 |
+
<div class="terminal-line">> 建立神经连接... <span class="text-green-400">OK</span></div>
|
| 293 |
+
<div class="terminal-line">> 欢迎来到赛博预言者系统,玩家ID: <span class="text-purple-300">NEO-2571</span></div>
|
| 294 |
+
<div class="terminal-line">> 当前回合: <span class="text-yellow-400">1</span></div>
|
| 295 |
+
<div class="terminal-line">> 对手已连接: <span class="text-red-400">SYNTH-9</span></div>
|
| 296 |
+
<div class="terminal-line">> 请构建你的预言来改变未来<span class="terminal-cursor"></span></div>
|
| 297 |
</div>
|
| 298 |
</div>
|
| 299 |
</div>
|
| 300 |
+
|
| 301 |
<script>
|
| 302 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 303 |
+
// 词语库
|
| 304 |
+
const wordBank = [
|
| 305 |
+
{ text: "在", type: "structure" },
|
| 306 |
+
{ text: "前", type: "structure" },
|
| 307 |
+
{ text: "回合", type: "structure" },
|
| 308 |
+
{ text: "对敌人造成", type: "action" },
|
| 309 |
+
{ text: "点伤害", type: "measure" },
|
| 310 |
+
{ text: "没有使用", type: "action" },
|
| 311 |
+
{ text: "药水", type: "item" },
|
| 312 |
+
{ text: "攻击卡牌", type: "item" },
|
| 313 |
+
{ text: "防御卡牌", type: "item" },
|
| 314 |
+
{ text: "使用", type: "action" },
|
| 315 |
+
{ text: "获取", type: "action" },
|
| 316 |
+
{ text: "该", type: "structure" },
|
| 317 |
+
{ text: "1", type: "number" },
|
| 318 |
+
{ text: "2", type: "number" },
|
| 319 |
+
{ text: "3", type: "number" },
|
| 320 |
+
{ text: "5", type: "number" },
|
| 321 |
+
{ text: "10", type: "number" },
|
| 322 |
+
{ text: "20", type: "number" },
|
| 323 |
+
{ text: "50", type: "number" },
|
| 324 |
+
{ text: "100", type: "number" },
|
| 325 |
+
{ text: "对方", type: "target" },
|
| 326 |
+
{ text: "我", type: "target" },
|
| 327 |
+
{ text: "没有", type: "negation" },
|
| 328 |
+
{ text: "任何", type: "structure" },
|
| 329 |
+
{ text: "生命值", type: "attribute" },
|
| 330 |
+
{ text: "能量", type: "attribute" },
|
| 331 |
+
{ text: "恢复", type: "action" },
|
| 332 |
+
{ text: "失去", type: "action" },
|
| 333 |
+
{ text: "张", type: "measure" }
|
| 334 |
+
];
|
| 335 |
+
|
| 336 |
+
// 初始化词语库
|
| 337 |
+
const wordBankContainer = document.getElementById('word-bank');
|
| 338 |
+
const prophecyTemplate = document.getElementById('prophecy-template');
|
| 339 |
|
| 340 |
+
wordBank.forEach(word => {
|
| 341 |
+
const wordElement = document.createElement('div');
|
| 342 |
+
wordElement.className = 'word-token';
|
| 343 |
+
wordElement.textContent = word.text;
|
| 344 |
+
wordElement.draggable = true;
|
| 345 |
+
wordElement.dataset.type = word.type;
|
| 346 |
+
|
| 347 |
+
wordElement.addEventListener('dragstart', function(e) {
|
| 348 |
+
this.classList.add('dragging');
|
| 349 |
+
e.dataTransfer.setData('text/plain', this.textContent);
|
| 350 |
+
e.dataTransfer.effectAllowed = 'copy';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 351 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 352 |
|
| 353 |
+
wordElement.addEventListener('dragend', function() {
|
| 354 |
+
this.classList.remove('dragging');
|
| 355 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 356 |
|
| 357 |
+
wordBankContainer.appendChild(wordElement);
|
| 358 |
+
});
|
| 359 |
+
|
| 360 |
+
// 拖放区域事件
|
| 361 |
+
prophecyTemplate.addEventListener('dragover', function(e) {
|
| 362 |
+
e.preventDefault();
|
| 363 |
+
this.classList.add('highlight');
|
| 364 |
+
e.dataTransfer.dropEffect = 'copy';
|
| 365 |
+
});
|
| 366 |
|
| 367 |
+
prophecyTemplate.addEventListener('dragleave', function() {
|
| 368 |
+
this.classList.remove('highlight');
|
| 369 |
+
});
|
| 370 |
|
| 371 |
+
prophecyTemplate.addEventListener('drop', function(e) {
|
| 372 |
+
e.preventDefault();
|
| 373 |
+
this.classList.remove('highlight');
|
| 374 |
+
|
| 375 |
+
const word = e.dataTransfer.getData('text/plain');
|
| 376 |
+
if (word) {
|
| 377 |
+
const wordElement = document.createElement('span');
|
| 378 |
+
wordElement.className = 'word-token';
|
| 379 |
+
wordElement.textContent = word;
|
| 380 |
+
wordElement.draggable = true;
|
|
|
|
| 381 |
|
| 382 |
+
wordElement.addEventListener('dragstart', function(e) {
|
| 383 |
+
this.classList.add('dragging');
|
| 384 |
+
e.dataTransfer.setData('text/plain', this.textContent);
|
| 385 |
+
e.dataTransfer.effectAllowed = 'copy';
|
| 386 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 387 |
|
| 388 |
+
wordElement.addEventListener('dragend', function() {
|
| 389 |
+
this.classList.remove('dragging');
|
| 390 |
+
});
|
| 391 |
|
| 392 |
+
// 如果区域内有提示文本,先清除
|
| 393 |
+
if (this.querySelector('p.text-gray-400')) {
|
| 394 |
+
this.innerHTML = '';
|
| 395 |
+
}
|
| 396 |
|
| 397 |
+
this.appendChild(wordElement);
|
| 398 |
+
this.appendChild(document.createTextNode(' ')); // 添加空格分隔词语
|
| 399 |
+
}
|
| 400 |
+
});
|
| 401 |
+
|
| 402 |
+
// 按钮事件
|
| 403 |
+
document.getElementById('submit-prophecy').addEventListener('click', function() {
|
| 404 |
+
const prophecyText = prophecyTemplate.textContent.trim();
|
| 405 |
+
if (prophecyText && !prophecyText.includes("拖拽词语到这里构建预言")) {
|
| 406 |
+
addProphecy(prophecyText);
|
| 407 |
+
prophecyTemplate.innerHTML = '<p class="text-gray-400 italic">拖拽词语到这里构建预言</p>';
|
| 408 |
|
| 409 |
+
// 添加到日志
|
| 410 |
+
addLog(`> 新预言已提交: "${prophecyText}"`);
|
| 411 |
+
} else {
|
| 412 |
+
addLog("> 错误: 预言不能为空", "error");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 413 |
}
|
| 414 |
+
});
|
|
|
|
|
|
|
|
|
|
| 415 |
|
| 416 |
+
document.getElementById('take-loan').addEventListener('click', function() {
|
| 417 |
+
addLog("> 从未来贷款: +150 信用点 (利息15%, 到期回合3)");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 418 |
|
| 419 |
+
// 显示确认对话框
|
| 420 |
+
if (confirm("确定要从未来贷款150信用点吗?\n利息: 15%\n到期回合: 3")) {
|
| 421 |
+
addLog("> 贷款已确认,信用点已添加到账户");
|
| 422 |
+
} else {
|
| 423 |
+
addLog("> 贷款取消");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 424 |
}
|
| 425 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 426 |
|
| 427 |
+
document.getElementById('modify-prophecy').addEventListener('click', function() {
|
| 428 |
+
addLog("> 选择要篡改的预言...");
|
| 429 |
+
// 这里可以添加更复杂的篡改逻辑
|
| 430 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 431 |
|
| 432 |
+
document.getElementById('end-turn').addEventListener('click', function() {
|
| 433 |
+
addLog("> 回合结束,处理预言中...");
|
| 434 |
+
// 这里可以添加回合结束逻辑
|
| 435 |
+
});
|
| 436 |
+
|
| 437 |
+
// 辅助函数
|
| 438 |
+
function addProphecy(text) {
|
| 439 |
+
const propheciesContainer = document.getElementById('active-prophecies');
|
| 440 |
+
const prophecyId = Date.now();
|
| 441 |
+
|
| 442 |
+
const prophecyElement = document.createElement('div');
|
| 443 |
+
prophecyElement.className = 'prophecy-item mb-4 p-4 cyber-card';
|
| 444 |
+
prophecyElement.innerHTML = `
|
| 445 |
+
<div class="flex justify-between items-start">
|
| 446 |
+
<div>
|
| 447 |
+
<h3 class="font-bold text-lg">预言 #${prophecyId.toString().slice(-4)}</h3>
|
| 448 |
+
<p class="text-sm text-gray-400">到期回合: ${Math.floor(Math.random() * 3) + 2}</p>
|
| 449 |
+
</div>
|
| 450 |
+
<span class="px-3 py-1 bg-purple-900 rounded-full text-sm">进行中</span>
|
| 451 |
+
</div>
|
| 452 |
+
<div class="mt-2">
|
| 453 |
+
<p>"${text}"</p>
|
| 454 |
+
</div>
|
| 455 |
+
<div class="mt-2">
|
| 456 |
+
<span class="text-sm">奖励: <span class="text-green-400">+${Math.floor(Math.random() * 100) + 50} 信用点</span></span>
|
| 457 |
+
</div>
|
| 458 |
+
`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 459 |
|
| 460 |
+
propheciesContainer.prepend(prophecyElement);
|
| 461 |
}
|
| 462 |
|
| 463 |
+
function addLog(message, type = "normal") {
|
| 464 |
+
const logContainer = document.getElementById('game-log');
|
| 465 |
+
const logEntry = document.createElement('div');
|
| 466 |
+
logEntry.className = 'terminal-line';
|
| 467 |
+
|
| 468 |
+
if (type === "error") {
|
| 469 |
+
logEntry.innerHTML = `<span class="text-red-400">${message}</span>`;
|
| 470 |
+
} else {
|
| 471 |
+
logEntry.textContent = message;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 472 |
}
|
| 473 |
|
| 474 |
+
logContainer.appendChild(logEntry);
|
| 475 |
+
logContainer.scrollTop = logContainer.scrollHeight;
|
| 476 |
}
|
| 477 |
});
|
| 478 |
</script>
|
| 479 |
+
</body>
|
| 480 |
</html>
|