coldandcode commited on
Commit
754d0b4
·
verified ·
1 Parent(s): 6470db1

Add 1 files

Browse files
Files changed (1) hide show
  1. 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>命运编织者 - 预言契约游戏</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=Cinzel:wght@400;700&family=EB+Garamond:wght@400;600&display=swap');
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: 'EB Garamond', serif;
22
- background-color: var(--dark-purple);
23
- color: white;
24
- background-image:
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
- .title-font {
30
- font-family: 'Cinzel', serif;
31
  }
32
 
33
- .gold-text {
34
- color: var(--gold);
35
- text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
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
- .prophecy-card:hover {
 
46
  transform: translateY(-5px);
47
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
48
  }
49
 
50
- .prophecy-card::before {
51
- content: '';
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- right: 0;
56
- height: 3px;
57
- background: linear-gradient(90deg, var(--gold), var(--emerald), var(--gold));
58
- opacity: 0.7;
59
  }
60
 
61
- .fate-point {
62
- width: 30px;
63
- height: 30px;
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
- .health-bar {
74
- height: 8px;
75
- background-color: rgba(139, 0, 0, 0.3);
76
  }
77
 
78
- .progress-bar {
79
- height: 100%;
80
- background: linear-gradient(90deg, var(--blood-red), #FF4500);
81
- transition: width 0.5s ease;
82
  }
83
 
84
- .action-button {
85
- background: linear-gradient(to bottom, rgba(62, 42, 92, 0.8), rgba(26, 16, 43, 0.9));
86
- border: 1px solid var(--gold);
87
- transition: all 0.3s ease;
 
 
 
88
  }
89
 
90
- .action-button:hover {
91
- background: linear-gradient(to bottom, rgba(62, 42, 92, 0.9), rgba(26, 16, 43, 1));
92
- transform: translateY(-2px);
 
 
 
 
 
 
 
93
  }
94
 
95
- .modal-overlay {
96
- background: rgba(0, 0, 0, 0.8);
97
- backdrop-filter: blur(5px);
98
  }
99
 
100
- .modal-content {
101
- background: linear-gradient(135deg, rgba(62, 42, 92, 0.9) 0%, rgba(26, 16, 43, 1) 100%);
102
- border: 2px solid var(--gold);
 
103
  }
104
 
105
- .card-back {
106
- background: linear-gradient(135deg, #3E2A5C 0%, #1A102B 100%);
107
- border: 2px solid var(--gold);
108
- display: flex;
109
- align-items: center;
110
- justify-content: center;
111
- color: var(--gold);
 
112
  }
113
 
114
- .card-back::before {
115
- content: '';
116
- position: absolute;
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
- .tooltip {
125
- visibility: hidden;
126
- width: 200px;
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
- .has-tooltip:hover .tooltip {
142
- visibility: visible;
143
- opacity: 1;
144
  }
145
 
146
- @keyframes glow {
147
- 0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
148
- 50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
149
- 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
 
150
  }
151
 
152
- .glowing {
153
- animation: glow 2s infinite;
 
 
154
  }
155
 
156
- .divine-border {
157
- position: relative;
 
 
 
 
158
  }
159
 
160
- .divine-border::after {
161
- content: '';
162
- position: absolute;
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 p-4">
177
- <div class="max-w-6xl mx-auto">
178
  <!-- 游戏标题 -->
179
- <header class="text-center mb-8">
180
- <h1 class="title-font text-5xl mb-2 gold-text">命运编织者</h1>
181
- <p class="text-xl text-gray-300">预言与契约的交织游戏</p>
182
  </header>
183
 
184
  <!-- 游戏主界面 -->
185
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
186
- <!-- 左侧:玩家区域 -->
187
- <div class="bg-black bg-opacity-30 p-4 rounded-lg">
188
- <div class="flex justify-between items-center mb-4">
189
- <h2 class="title-font text-2xl gold-text">玩家</h2>
190
- <div class="flex items-center space-x-2">
191
- <span class="fate-point">FP</span>
192
- <span id="player-fate" class="text-xl">5</span>
193
- </div>
194
- </div>
195
-
196
- <div class="mb-4">
197
- <div class="flex justify-between text-sm mb-1">
198
- <span>命运之力</span>
199
- <span id="player-health">100/100</span>
 
 
 
 
 
 
 
200
  </div>
201
- <div class="health-bar">
202
- <div id="player-health-bar" class="progress-bar" style="width: 100%"></div>
 
 
 
 
203
  </div>
204
  </div>
205
 
206
- <div class="grid grid-cols-2 gap-4 mb-4">
207
- <button id="attack-btn" class="action-button py-2 px-4 rounded text-center">
208
- <i class="fas fa-sword mr-2"></i>攻击
209
- </button>
210
- <button id="defend-btn" class="action-button py-2 px-4 rounded text-center">
211
- <i class="fas fa-shield-alt mr-2"></i>防御
212
- </button>
213
- <button id="potion-btn" class="action-button py-2 px-4 rounded text-center">
214
- <i class="fas fa-flask mr-2"></i>药水
215
- </button>
216
- <button id="prophecy-btn" class="action-button py-2 px-4 rounded text-center">
217
- <i class="fas fa-eye mr-2"></i>预言
218
- </button>
219
- </div>
220
-
221
- <h3 class="title-font text-lg gold-text mb-2">预言契约</h3>
222
- <div id="player-prophecies" class="space-y-3">
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="bg-black bg-opacity-30 p-4 rounded-lg">
248
- <div class="flex justify-between items-center mb-4">
249
- <h2 class="title-font text-2xl gold-text">命运守望者</h2>
250
- <div class="flex items-center space-x-2">
251
- <span class="fate-point">FP</span>
252
- <span id="enemy-fate" class="text-xl">5</span>
253
- </div>
254
- </div>
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
- <div class="health-bar">
262
- <div id="enemy-health-bar" class="progress-bar" style="width: 100%"></div>
 
 
 
 
263
  </div>
264
- </div>
265
-
266
- <div class="mb-6 text-center">
267
- <div id="enemy-avatar" class="w-32 h-32 mx-auto bg-gray-800 rounded-full flex items-center justify-center text-4xl mb-2 glowing">
268
- <i class="fas fa-question"></i>
 
 
 
 
 
 
 
 
 
269
  </div>
270
- <p class="text-sm text-gray-300">命运正注视着你的一举一动</p>
271
  </div>
272
 
273
- <h3 class="title-font text-lg gold-text mb-2">敌人预言</h3>
274
- <div id="enemy-prophecies" class="space-y-3">
275
- <!-- 敌人的预言卡牌将通过JS动态添加 -->
276
- <div class="text-center py-4 text-gray-500">暂无激活的预言</div>
277
- </div>
278
- </div>
279
- </div>
280
- </div>
281
-
282
- <!-- 预言选择模态框 -->
283
- <div id="prophecy-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden modal-overlay">
284
- <div class="w-full max-w-3xl p-6 rounded-lg modal-content">
285
- <div class="flex justify-between items-center mb-4">
286
- <h3 class="title-font text-2xl gold-text">编织你的预言</h3>
287
- <button id="close-prophecy-modal" class="text-gray-400 hover:text-white">
288
- <i class="fas fa-times"></i>
289
- </button>
290
- </div>
291
-
292
- <div class="mb-4">
293
- <p class="text-gray-300 mb-2">选择你的预言契约类型:</p>
294
- <div class="grid grid-cols-3 gap-4 mb-6">
295
- <button data-type="self-fulfilling" class="action-button py-2 divine-border active:bg-gray-800">
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
- <div class="flex items-center">
323
- <span class="w-24">奖励:</span>
324
- <span id="prophecy-reward" class="font-bold">无</span>
 
 
 
 
 
 
 
 
 
 
 
 
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
- </div>
340
-
341
- <!-- 游戏结束模态框 -->
342
- <div id="game-over-modal" class="fixed inset-0 flex items-center justify-center z-50 hidden modal-overlay">
343
- <div class="w-full max-w-md p-6 rounded-lg modal-content">
344
- <h3 class="title-font text-3xl gold-text text-center mb-4">游戏结束</h3>
345
- <p id="game-over-message" class="text-center text-xl mb-6">命运已经做出了它的裁决...</p>
346
- <div class="text-center">
347
- <button id="restart-game-btn" class="action-button py-2 px-6 text-lg">
348
- <i class="fas fa-redo mr-2"></i>重新开始
349
- </button>
 
350
  </div>
351
  </div>
352
  </div>
353
-
354
  <script>
355
- document.addEventListener('DOMContentLoaded', () => {
356
- // 游戏状态
357
- const gameState = {
358
- player: {
359
- health: 100,
360
- maxHealth: 100,
361
- fatePoints: 5,
362
- deck: ['攻击', '防御', '药水', '攻击', '防御'],
363
- prophecies: []
364
- },
365
- enemy: {
366
- health: 100,
367
- maxHealth: 100,
368
- fatePoints: 5,
369
- prophecies: []
370
- },
371
- turn: 1,
372
- gameOver: false
373
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
374
 
375
- // 预言类型
376
- const prophecyTypes = {
377
- 'self-fulfilling': {
378
- name: '自我实现预言',
379
- description: '设定一个条件,如果在特定回合内实现,将获得奖励',
380
- examples: [
381
- {
382
- condition: '在3回合内对敌人造成50点伤害',
383
- reward: '+15攻击力',
384
- cost: 3,
385
- turnsToFulfill: 3,
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
- setTimeout(enemyTurn, 1000);
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
- elements.prophecyModal.classList.remove('hidden');
720
- }
 
 
 
 
 
 
 
721
 
722
- function hideProphecyModal() {
723
- elements.prophecyModal.classList.add('hidden');
724
- }
725
 
726
- function showProphecyOptions(type) {
727
- // 清空之前的选项
728
- elements.prophecyOptions.innerHTML = '';
729
-
730
- const typeData = prophecyTypes[type];
731
-
732
- // 创建预言选项卡片
733
- typeData.examples.forEach((prophecy, index) => {
734
- const card = document.createElement('div');
735
- card.className = 'prophecy-card p-4 rounded cursor-pointer';
736
- card.dataset.index = index;
737
 
738
- let content = `<h4 class="font-bold mb-2 gold-text">${typeData.name}</h4>`;
739
-
740
- if (type === 'self-fulfilling') {
741
- content += `
742
- <p class="text-sm mb-2">条件: ${prophecy.condition}</p>
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
- content += `<div class="mt-3 text-right text-xs"><span class="gold-text">FP: ${prophecy.cost}</span></div>`;
 
 
758
 
759
- card.innerHTML = content;
 
 
 
760
 
761
- card.addEventListener('click', () => {
762
- selectProphecy(type, index);
763
- });
 
 
 
 
 
 
 
 
764
 
765
- elements.prophecyOptions.appendChild(card);
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
- function confirmProphecy() {
799
- if (!selectedProphecy || gameState.player.fatePoints < selectedProphecy.cost) {
800
- addToLog('命运之力不足,无法完成预言契约', 'prophecy');
801
- hideProphecyModal();
802
- return;
803
- }
804
-
805
- // 支付命运点数
806
- gameState.player.fatePoints -= selectedProphecy.cost;
807
- updateFateDisplay();
808
 
809
- // 添加预言到玩家列表
810
- const prophecyCopy = JSON.parse(JSON.stringify(selectedProphecy));
811
-
812
- // 根据预言类型处理
813
- if (prophecyCopy.type === 'future-loan') {
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
- function displayPlayerProphecies() {
837
- if (gameState.player.prophecies.length === 0) {
838
- elements.playerProphecies.innerHTML = '<div class="text-center py-4 text-gray-500">暂无激活的预言</div>';
839
- return;
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
- function checkProphecies() {
884
- // 检查玩家预言
885
- gameState.player.prophecies.forEach(prophecy => {
886
- if (prophecy.type === 'self-fulfilling') {
887
- prophecy.currentTurn++;
888
-
889
- // 检查是否完成
890
- if (prophecy.currentTurn >= prophecy.turnsToFulfill && !prophecy.fulfilled) {
891
- // 这里应该检查实际条件是否满足,简单示例中我们假设都满足
892
- prophecy.fulfilled = true;
893
- grantProphecyReward(prophecy);
894
- addToLog(`预言实现: ${prophecy.condition}! 获得奖励: ${prophecy.reward}`, 'prophecy');
895
- }
896
- } else if (prophecy.type === 'future-loan' && !prophecy.repaid) {
897
- prophecy.currentTurn++;
898
-
899
- // 检查是否需要偿还
900
- if (prophecy.currentTurn >= prophecy.turnsToRepay) {
901
- prophecy.repaid = true;
902
- repayFutureLoan(prophecy);
903
- addToLog(`预言贷款到期: ${prophecy.repayment}`, 'prophecy');
904
- }
905
- }
906
- });
907
-
908
- // 过滤掉已完成的预言
909
- gameState.player.prophecies = gameState.player.prophecies.filter(p =>
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 grantProphecyReward(prophecy) {
921
- if (prophecy.reward.includes('攻击力')) {
922
- // 增强玩家攻击力
923
- addToLog('你的攻击变得更加强大了', 'fate');
924
- } else if (prophecy.reward.includes('药水效果')) {
925
- // 下一次药水效果更好
926
- addToLog('你的药水力量增强了', 'fate');
927
- } else if (prophecy.reward.includes('生命值')) {
928
- const hpGain = parseInt(prophecy.reward.match(/\d+/)[0]);
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
- checkGameOver();
 
953
  }
954
  });
955
  </script>
956
- <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=coldandcode/nicecatch" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
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>