coldandcode commited on
Commit
2c1dc0e
·
verified ·
1 Parent(s): 8ec03e7

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +697 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Secondcatch
3
- emoji: 🚀
4
  colorFrom: blue
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: secondcatch
3
+ emoji: 🐳
4
  colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,697 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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=Noto+Sans+JP:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Noto Sans JP', sans-serif;
14
+ background-color: #f5f0e6;
15
+ color: #3a3226;
16
+ background-image: url('https://www.transparenttextures.com/patterns/rice-paper.png');
17
+ }
18
+
19
+ .ghibli-bg {
20
+ background: linear-gradient(135deg, #e8d8b8 0%, #d4c4a3 100%);
21
+ border: 2px solid #8b7d65;
22
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ .ghibli-card {
26
+ background: #fff9e6;
27
+ border: 3px solid #8b7d65;
28
+ border-radius: 12px;
29
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
30
+ transition: all 0.3s ease;
31
+ }
32
+
33
+ .ghibli-card:hover {
34
+ transform: translateY(-5px);
35
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
36
+ }
37
+
38
+ .ghibli-btn {
39
+ background: linear-gradient(to bottom, #a38f6a, #8b7d65);
40
+ color: white;
41
+ border: none;
42
+ border-radius: 20px;
43
+ padding: 8px 16px;
44
+ font-weight: bold;
45
+ box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
46
+ transition: all 0.2s;
47
+ }
48
+
49
+ .ghibli-btn:hover {
50
+ background: linear-gradient(to bottom, #8b7d65, #6b5e4a);
51
+ transform: translateY(-2px);
52
+ }
53
+
54
+ .ghibli-btn:active {
55
+ transform: translateY(1px);
56
+ }
57
+
58
+ .hand-card {
59
+ transition: all 0.3s ease;
60
+ cursor: pointer;
61
+ }
62
+
63
+ .hand-card:hover {
64
+ transform: translateY(-15px) scale(1.05);
65
+ z-index: 10;
66
+ }
67
+
68
+ .prophecy-glow {
69
+ animation: glow 2s infinite alternate;
70
+ }
71
+
72
+ @keyframes glow {
73
+ from {
74
+ box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
75
+ }
76
+ to {
77
+ box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
78
+ }
79
+ }
80
+
81
+ .loan-effect {
82
+ position: relative;
83
+ overflow: hidden;
84
+ }
85
+
86
+ .loan-effect::after {
87
+ content: "";
88
+ position: absolute;
89
+ top: 0;
90
+ left: 0;
91
+ right: 0;
92
+ bottom: 0;
93
+ background: linear-gradient(45deg,
94
+ transparent 45%,
95
+ rgba(255, 255, 255, 0.8) 50%,
96
+ transparent 55%);
97
+ background-size: 200% 200%;
98
+ animation: shine 2s infinite;
99
+ }
100
+
101
+ @keyframes shine {
102
+ 0% {
103
+ background-position: -100% -100%;
104
+ }
105
+ 100% {
106
+ background-position: 100% 100%;
107
+ }
108
+ }
109
+
110
+ .fate-point {
111
+ width: 24px;
112
+ height: 24px;
113
+ background: radial-gradient(circle, #ffd700 30%, #daa520 100%);
114
+ border-radius: 50%;
115
+ display: inline-block;
116
+ box-shadow: 0 0 8px #ffd700;
117
+ margin: 0 2px;
118
+ }
119
+ </style>
120
+ </head>
121
+ <body class="min-h-screen">
122
+ <div class="container mx-auto px-4 py-8">
123
+ <!-- 游戏标题 -->
124
+ <div class="text-center mb-8">
125
+ <h1 class="text-4xl font-bold mb-2 text-amber-900">预言契约</h1>
126
+ <h2 class="text-2xl text-amber-800">命运编织者</h2>
127
+ <div class="flex justify-center mt-4">
128
+ <div class="fate-point"></div>
129
+ <div class="fate-point"></div>
130
+ <div class="fate-point"></div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- 游戏区域 -->
135
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
136
+ <!-- 左侧 - 玩家区域 -->
137
+ <div class="ghibli-bg p-6 rounded-lg">
138
+ <h3 class="text-xl font-bold mb-4 text-center border-b-2 border-amber-800 pb-2">玩家</h3>
139
+
140
+ <div class="mb-4">
141
+ <div class="flex justify-between items-center mb-2">
142
+ <span class="font-bold">生命值: <span id="player-health" class="text-red-600">50</span>/50</span>
143
+ <span class="font-bold">命运点数: <span id="player-fate" class="text-amber-600">3</span></span>
144
+ </div>
145
+ <div class="h-4 bg-gray-200 rounded-full">
146
+ <div id="player-health-bar" class="h-4 bg-red-500 rounded-full" style="width: 100%"></div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="mb-4">
151
+ <h4 class="font-bold mb-2">当前预言契约</h4>
152
+ <div id="player-prophecies" class="space-y-2">
153
+ <div class="ghibli-card p-3 prophecy-glow">
154
+ <p class="font-bold text-sm">在3回合内造成50点伤害</p>
155
+ <p class="text-xs">奖励: 获得5点命运点数</p>
156
+ <div class="text-xs mt-1">剩余回合: <span class="font-bold">2</span></div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="mb-4">
162
+ <h4 class="font-bold mb-2">未来贷款</h4>
163
+ <div id="player-loans" class="space-y-2">
164
+ <div class="ghibli-card p-3 loan-effect">
165
+ <p class="font-bold text-sm">提前获得3点命运点数</p>
166
+ <p class="text-xs">需在5回合内偿还5点</p>
167
+ <div class="text-xs mt-1">剩余回合: <span class="font-bold">4</span></div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- 中间 - 游戏主区域 -->
174
+ <div class="ghibli-bg p-6 rounded-lg">
175
+ <div class="flex justify-between items-center mb-4">
176
+ <div class="text-center">
177
+ <div class="text-lg font-bold">回合</div>
178
+ <div id="turn-counter" class="text-2xl font-bold">1</div>
179
+ </div>
180
+ <button id="end-turn-btn" class="ghibli-btn px-6 py-2">
181
+ <i class="fas fa-hourglass-end mr-2"></i>结束回合
182
+ </button>
183
+ </div>
184
+
185
+ <div class="mb-6">
186
+ <h4 class="font-bold mb-2 text-center">战斗区域</h4>
187
+ <div class="flex justify-center items-center space-x-8">
188
+ <div class="text-center">
189
+ <div class="ghibli-card w-24 h-36 flex items-center justify-center mx-auto mb-2">
190
+ <i class="fas fa-sword text-3xl text-gray-700"></i>
191
+ </div>
192
+ <div class="text-sm">攻击力: 10</div>
193
+ </div>
194
+ <div class="text-4xl font-bold text-red-600">VS</div>
195
+ <div class="text-center">
196
+ <div class="ghibli-card w-24 h-36 flex items-center justify-center mx-auto mb-2">
197
+ <i class="fas fa-shield-alt text-3xl text-gray-700"></i>
198
+ </div>
199
+ <div class="text-sm">防御力: 5</div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="mb-4">
205
+ <h4 class="font-bold mb-2 text-center">战斗日志</h4>
206
+ <div id="battle-log" class="ghibli-card p-3 h-32 overflow-y-auto text-sm">
207
+ <div class="text-amber-800">游戏开始!</div>
208
+ <div class="text-blue-600">你获得了初始预言契约</div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- 右侧 - 敌人区域 -->
214
+ <div class="ghibli-bg p-6 rounded-lg">
215
+ <h3 class="text-xl font-bold mb-4 text-center border-b-2 border-amber-800 pb-2">敌人</h3>
216
+
217
+ <div class="mb-4">
218
+ <div class="flex justify-between items-center mb-2">
219
+ <span class="font-bold">生命值: <span id="enemy-health" class="text-red-600">80</span>/80</span>
220
+ <span class="font-bold">命运点数: <span id="enemy-fate" class="text-amber-600">2</span></span>
221
+ </div>
222
+ <div class="h-4 bg-gray-200 rounded-full">
223
+ <div id="enemy-health-bar" class="h-4 bg-red-500 rounded-full" style="width: 100%"></div>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="mb-4">
228
+ <h4 class="font-bold mb-2">敌人预言契约</h4>
229
+ <div id="enemy-prophecies" class="space-y-2">
230
+ <div class="ghibli-card p-3">
231
+ <p class="font-bold text-sm">在2回合内不使用防御卡牌</p>
232
+ <p class="text-xs">奖励: 获得3点命运点数</p>
233
+ <div class="text-xs mt-1">剩余回合: <span class="font-bold">1</span></div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="mb-4">
239
+ <h4 class="font-bold mb-2">敌人意图</h4>
240
+ <div class="ghibli-card p-3">
241
+ <p class="text-sm">下回合将使用: <span class="font-bold">强力攻击</span></p>
242
+ <p class="text-xs">预计伤害: 15</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- 玩家手牌区域 -->
249
+ <div class="mt-8 ghibli-bg p-6 rounded-lg">
250
+ <h3 class="text-xl font-bold mb-4 text-center border-b-2 border-amber-800 pb-2">你的手牌</h3>
251
+
252
+ <div class="flex flex-wrap justify-center gap-4" id="player-hand">
253
+ <!-- 攻击卡 -->
254
+ <div class="ghibli-card w-32 h-48 hand-card relative" onclick="playCard(this)">
255
+ <div class="absolute top-2 left-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">攻</div>
256
+ <div class="p-3 h-full flex flex-col">
257
+ <h4 class="font-bold text-center mb-2">火焰斩击</h4>
258
+ <p class="text-xs flex-grow">造成10点伤害,有30%几率额外造成5点伤害</p>
259
+ <div class="text-xs text-right">消耗: <span class="font-bold">1</span>命运点</div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- 防御卡 -->
264
+ <div class="ghibli-card w-32 h-48 hand-card relative" onclick="playCard(this)">
265
+ <div class="absolute top-2 left-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs font-bold">防</div>
266
+ <div class="p-3 h-full flex flex-col">
267
+ <h4 class="font-bold text-center mb-2">魔法护盾</h4>
268
+ <p class="text-xs flex-grow">获得8点护盾,下回合开始时保留50%</p>
269
+ <div class="text-xs text-right">消耗: <span class="font-bold">1</span>命运点</div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- 预言卡 -->
274
+ <div class="ghibli-card w-32 h-48 hand-card relative" onclick="playCard(this)">
275
+ <div class="absolute top-2 left-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center text-white text-xs font-bold">预</div>
276
+ <div class="p-3 h-full flex flex-col">
277
+ <h4 class="font-bold text-center mb-2">命运预言</h4>
278
+ <p class="text-xs flex-grow">创建一个新的预言契约</p>
279
+ <div class="text-xs text-right">消耗: <span class="font-bold">2</span>命运点</div>
280
+ </div>
281
+ </div>
282
+
283
+ <!-- 贷款卡 -->
284
+ <div class="ghibli-card w-32 h-48 hand-card relative" onclick="playCard(this)">
285
+ <div class="absolute top-2 left-2 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-xs font-bold">贷</div>
286
+ <div class="p-3 h-full flex flex-col">
287
+ <h4 class="font-bold text-center mb-2">命运贷款</h4>
288
+ <p class="text-xs flex-grow">立即获得3命运点,5回合后偿还5点</p>
289
+ <div class="text-xs text-right">消耗: <span class="font-bold">0</span>命运点</div>
290
+ </div>
291
+ </div>
292
+
293
+ <!-- 篡改卡 -->
294
+ <div class="ghibli-card w-32 h-48 hand-card relative" onclick="playCard(this)">
295
+ <div class="absolute top-2 left-2 w-6 h-6 bg-yellow-500 rounded-full flex items-center justify-center text-white text-xs font-bold">改</div>
296
+ <div class="p-3 h-full flex flex-col">
297
+ <h4 class="font-bold text-center mb-2">篡改预言</h4>
298
+ <p class="text-xs flex-grow">修改一个预言的条件或奖励</p>
299
+ <div class="text-xs text-right">消耗: <span class="font-bold">1</span>命运点</div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- 预言创建模态框 -->
306
+ <div id="prophecy-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
307
+ <div class="ghibli-bg p-6 rounded-lg w-full max-w-md">
308
+ <h3 class="text-xl font-bold mb-4 text-center">创建预言契约</h3>
309
+
310
+ <div class="mb-4">
311
+ <label class="block font-bold mb-2">预言条件</label>
312
+ <select id="prophecy-condition" class="w-full p-2 border border-amber-800 rounded">
313
+ <option value="damage">在X回合内造成Y点伤害</option>
314
+ <option value="no-potion">在X回合内不使用药水</option>
315
+ <option value="no-defense">在X回合内不使用防御卡</option>
316
+ <option value="specific-card">在X回合内使用特定卡牌Y次</option>
317
+ </select>
318
+ </div>
319
+
320
+ <div class="grid grid-cols-2 gap-4 mb-4">
321
+ <div>
322
+ <label class="block font-bold mb-2">回合数(X)</label>
323
+ <input type="number" id="prophecy-turns" class="w-full p-2 border border-amber-800 rounded" min="1" max="5" value="2">
324
+ </div>
325
+ <div>
326
+ <label class="block font-bold mb-2">数值(Y)</label>
327
+ <input type="number" id="prophecy-value" class="w-full p-2 border border-amber-800 rounded" min="1" max="50" value="10">
328
+ </div>
329
+ </div>
330
+
331
+ <div class="mb-4">
332
+ <label class="block font-bold mb-2">预言奖励</label>
333
+ <select id="prophecy-reward" class="w-full p-2 border border-amber-800 rounded">
334
+ <option value="fate-points">获得X命运点数</option>
335
+ <option value="health">恢复X生命值</option>
336
+ <option value="draw-cards">抽X张卡</option>
337
+ <option value="copy-card">复制对手最后使用的卡牌</option>
338
+ </select>
339
+ <input type="number" id="prophecy-reward-value" class="w-full p-2 border border-amber-800 rounded mt-2" min="1" max="10" value="2">
340
+ </div>
341
+
342
+ <div class="flex justify-end space-x-2">
343
+ <button onclick="document.getElementById('prophecy-modal').classList.add('hidden')" class="ghibli-btn bg-gray-500">
344
+ 取消
345
+ </button>
346
+ <button onclick="createProphecy()" class="ghibli-btn">
347
+ 创建契约
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- 篡改预言模态框 -->
354
+ <div id="modify-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
355
+ <div class="ghibli-bg p-6 rounded-lg w-full max-w-md">
356
+ <h3 class="text-xl font-bold mb-4 text-center">篡改预言</h3>
357
+
358
+ <div class="mb-4">
359
+ <label class="block font-bold mb-2">选择要修改的预言</label>
360
+ <select id="prophecy-select" class="w-full p-2 border border-amber-800 rounded">
361
+ <option value="0">在3回合内造成50点伤害</option>
362
+ </select>
363
+ </div>
364
+
365
+ <div class="mb-4">
366
+ <label class="block font-bold mb-2">修改类型</label>
367
+ <select id="modify-type" class="w-full p-2 border border-amber-800 rounded">
368
+ <option value="condition">修改条件</option>
369
+ <option value="reward">修改奖励</option>
370
+ <option value="both">同时修改条件和奖励</option>
371
+ </select>
372
+ </div>
373
+
374
+ <div id="modify-condition-section" class="mb-4">
375
+ <label class="block font-bold mb-2">新条件</label>
376
+ <input type="text" id="new-condition" class="w-full p-2 border border-amber-800 rounded" value="在3回合内造成50点伤害">
377
+ </div>
378
+
379
+ <div id="modify-reward-section" class="mb-4">
380
+ <label class="block font-bold mb-2">新奖励</label>
381
+ <input type="text" id="new-reward" class="w-full p-2 border border-amber-800 rounded" value="获得5点命运点数">
382
+ </div>
383
+
384
+ <div class="flex justify-end space-x-2">
385
+ <button onclick="document.getElementById('modify-modal').classList.add('hidden')" class="ghibli-btn bg-gray-500">
386
+ 取消
387
+ </button>
388
+ <button onclick="modifyProphecy()" class="ghibli-btn">
389
+ 篡改预言
390
+ </button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <script>
397
+ // 游戏状态
398
+ const gameState = {
399
+ turn: 1,
400
+ player: {
401
+ health: 50,
402
+ maxHealth: 50,
403
+ fatePoints: 3,
404
+ prophecies: [
405
+ {
406
+ condition: "在3回合内造成50点伤害",
407
+ reward: "获得5点命运点数",
408
+ turnsLeft: 2,
409
+ progress: 0
410
+ }
411
+ ],
412
+ loans: [
413
+ {
414
+ amount: 3,
415
+ repayment: 5,
416
+ turnsLeft: 4
417
+ }
418
+ ]
419
+ },
420
+ enemy: {
421
+ health: 80,
422
+ maxHealth: 80,
423
+ fatePoints: 2,
424
+ prophecies: [
425
+ {
426
+ condition: "在2回合内不使用防御卡牌",
427
+ reward: "获得3点命运点数",
428
+ turnsLeft: 1
429
+ }
430
+ ],
431
+ nextAction: "强力攻击",
432
+ nextDamage: 15
433
+ },
434
+ battleLog: [
435
+ "游戏开始!",
436
+ "你获得了初始预言契约"
437
+ ]
438
+ };
439
+
440
+ // 更新UI
441
+ function updateUI() {
442
+ // 更新玩家状态
443
+ document.getElementById('player-health').textContent = gameState.player.health;
444
+ document.getElementById('player-fate').textContent = gameState.player.fatePoints;
445
+ document.getElementById('player-health-bar').style.width = `${(gameState.player.health / gameState.player.maxHealth) * 100}%`;
446
+
447
+ // 更新敌人状态
448
+ document.getElementById('enemy-health').textContent = gameState.enemy.health;
449
+ document.getElementById('enemy-fate').textContent = gameState.enemy.fatePoints;
450
+ document.getElementById('enemy-health-bar').style.width = `${(gameState.enemy.health / gameState.enemy.maxHealth) * 100}%`;
451
+
452
+ // 更新回合计数器
453
+ document.getElementById('turn-counter').textContent = gameState.turn;
454
+
455
+ // 更新战斗日志
456
+ const battleLogElement = document.getElementById('battle-log');
457
+ battleLogElement.innerHTML = gameState.battleLog.map(log => `<div class="text-amber-800">${log}</div>`).join('');
458
+ battleLogElement.scrollTop = battleLogElement.scrollHeight;
459
+ }
460
+
461
+ // 播放卡牌
462
+ function playCard(cardElement) {
463
+ const cardType = cardElement.querySelector('div').textContent;
464
+ let message = "";
465
+
466
+ switch(cardType) {
467
+ case "攻":
468
+ // 攻击逻辑
469
+ const damage = 10 + Math.floor(Math.random() * 6); // 10-15伤害
470
+ gameState.enemy.health -= damage;
471
+ gameState.player.fatePoints -= 1;
472
+
473
+ // 更新预言进度
474
+ gameState.player.prophecies.forEach(prophecy => {
475
+ if (prophecy.condition.includes("造成")) {
476
+ prophecy.progress += damage;
477
+ }
478
+ });
479
+
480
+ message = `你使用攻击卡牌,造成${damage}点伤害!`;
481
+ break;
482
+
483
+ case "防":
484
+ // 防御逻辑
485
+ gameState.player.fatePoints -= 1;
486
+ message = "你使用防御卡牌,获得了护盾!";
487
+ break;
488
+
489
+ case "预":
490
+ // 预言逻辑
491
+ if (gameState.player.fatePoints >= 2) {
492
+ gameState.player.fatePoints -= 2;
493
+ document.getElementById('prophecy-modal').classList.remove('hidden');
494
+ message = "你开始编织新的命运预言...";
495
+ } else {
496
+ message = "命运点数不足,无法创建预言!";
497
+ }
498
+ break;
499
+
500
+ case "贷":
501
+ // 贷款逻辑
502
+ gameState.player.fatePoints += 3;
503
+ gameState.player.loans.push({
504
+ amount: 3,
505
+ repayment: 5,
506
+ turnsLeft: 5
507
+ });
508
+ message = "你向未来借贷了3点命运点数!";
509
+ break;
510
+
511
+ case "改":
512
+ // 篡改预言逻辑
513
+ if (gameState.player.fatePoints >= 1) {
514
+ gameState.player.fatePoints -= 1;
515
+ document.getElementById('modify-modal').classList.remove('hidden');
516
+ message = "你开始篡改现有的预言...";
517
+ } else {
518
+ message = "命运点数不足,无法篡改预言!";
519
+ }
520
+ break;
521
+ }
522
+
523
+ gameState.battleLog.push(message);
524
+ updateUI();
525
+ }
526
+
527
+ // 创建预言
528
+ function createProphecy() {
529
+ const conditionType = document.getElementById('prophecy-condition').value;
530
+ const turns = document.getElementById('prophecy-turns').value;
531
+ const value = document.getElementById('prophecy-value').value;
532
+ const rewardType = document.getElementById('prophecy-reward').value;
533
+ const rewardValue = document.getElementById('prophecy-reward-value').value;
534
+
535
+ let condition = "";
536
+ let reward = "";
537
+
538
+ // 构建条件
539
+ switch(conditionType) {
540
+ case "damage":
541
+ condition = `在${turns}回合内造成${value}点伤害`;
542
+ break;
543
+ case "no-potion":
544
+ condition = `在${turns}回合内不使用药水`;
545
+ break;
546
+ case "no-defense":
547
+ condition = `在${turns}回合内不使用防御卡`;
548
+ break;
549
+ case "specific-card":
550
+ condition = `在${turns}回合内使用特定卡牌${value}次`;
551
+ break;
552
+ }
553
+
554
+ // 构建奖励
555
+ switch(rewardType) {
556
+ case "fate-points":
557
+ reward = `获得${rewardValue}点命运点数`;
558
+ break;
559
+ case "health":
560
+ reward = `恢复${rewardValue}生命值`;
561
+ break;
562
+ case "draw-cards":
563
+ reward = `抽${rewardValue}张卡`;
564
+ break;
565
+ case "copy-card":
566
+ reward = `复制对手最后使用的卡牌`;
567
+ break;
568
+ }
569
+
570
+ // 添加到玩家预言
571
+ gameState.player.prophecies.push({
572
+ condition,
573
+ reward,
574
+ turnsLeft: turns,
575
+ progress: 0
576
+ });
577
+
578
+ gameState.battleLog.push(`你创建了新的预言契约: ${condition} → ${reward}`);
579
+ document.getElementById('prophecy-modal').classList.add('hidden');
580
+ updateUI();
581
+ }
582
+
583
+ // 篡改预言
584
+ function modifyProphecy() {
585
+ const prophecyIndex = document.getElementById('prophecy-select').selectedIndex;
586
+ const modifyType = document.getElementById('modify-type').value;
587
+ const newCondition = document.getElementById('new-condition').value;
588
+ const newReward = document.getElementById('new-reward').value;
589
+
590
+ if (prophecyIndex >= 0 && prophecyIndex < gameState.player.prophecies.length) {
591
+ const prophecy = gameState.player.prophecies[prophecyIndex];
592
+ const oldCondition = prophecy.condition;
593
+ const oldReward = prophecy.reward;
594
+
595
+ if (modifyType === "condition" || modifyType === "both") {
596
+ prophecy.condition = newCondition;
597
+ }
598
+
599
+ if (modifyType === "reward" || modifyType === "both") {
600
+ prophecy.reward = newReward;
601
+ }
602
+
603
+ gameState.battleLog.push(`你篡改了预言契约:
604
+ "${oldCondition} → ${oldReward}"
605
+ 变为
606
+ "${prophecy.condition} → ${prophecy.reward}"`);
607
+ }
608
+
609
+ document.getElementById('modify-modal').classList.add('hidden');
610
+ updateUI();
611
+ }
612
+
613
+ // 结束回合
614
+ document.getElementById('end-turn-btn').addEventListener('click', function() {
615
+ // 敌人行动
616
+ const enemyDamage = gameState.enemy.nextDamage;
617
+ gameState.player.health -= enemyDamage;
618
+ gameState.battleLog.push(`敌人使用${gameState.enemy.nextAction},对你造成${enemyDamage}点伤害!`);
619
+
620
+ // 更新预言回合数
621
+ gameState.player.prophecies.forEach(prophecy => {
622
+ prophecy.turnsLeft -= 1;
623
+
624
+ // 检查预言是否完成
625
+ if (prophecy.condition.includes("造成") && prophecy.progress >= parseInt(prophecy.condition.match(/\d+/)[0])) {
626
+ gameState.battleLog.push(`你完成了预言"${prophecy.condition}",获得奖励: ${prophecy.reward}`);
627
+
628
+ // 处理奖励
629
+ if (prophecy.reward.includes("命运点数")) {
630
+ const points = parseInt(prophecy.reward.match(/\d+/)[0]);
631
+ gameState.player.fatePoints += points;
632
+ }
633
+
634
+ // 移除完成的预言
635
+ gameState.player.prophecies = gameState.player.prophecies.filter(p => p !== prophecy);
636
+ } else if (prophecy.turnsLeft <= 0) {
637
+ gameState.battleLog.push(`预言"${prophecy.condition}"未能实现`);
638
+ gameState.player.prophecies = gameState.player.prophecies.filter(p => p !== prophecy);
639
+ }
640
+ });
641
+
642
+ // 更新贷款回合数
643
+ gameState.player.loans.forEach(loan => {
644
+ loan.turnsLeft -= 1;
645
+
646
+ if (loan.turnsLeft <= 0) {
647
+ gameState.player.fatePoints -= loan.repayment;
648
+ gameState.battleLog.push(`你偿还了命运贷款,支付了${loan.repayment}点命运点数`);
649
+ gameState.player.loans = gameState.player.loans.filter(l => l !== loan);
650
+ }
651
+ });
652
+
653
+ // 更新敌人预言
654
+ gameState.enemy.prophecies.forEach(prophecy => {
655
+ prophecy.turnsLeft -= 1;
656
+
657
+ if (prophecy.turnsLeft <= 0) {
658
+ if (prophecy.condition.includes("不使用防御卡牌")) {
659
+ gameState.enemy.fatePoints += 3;
660
+ gameState.battleLog.push(`敌人完成了预言"${prophecy.condition}",获得了3点命运点数`);
661
+ }
662
+ gameState.enemy.prophecies = gameState.enemy.prophecies.filter(p => p !== prophecy);
663
+ }
664
+ });
665
+
666
+ // 生成敌人下回合行动
667
+ const actions = ["强力攻击", "快速攻击", "防御姿态", "命运汲取"];
668
+ const damages = [15, 10, 0, 5];
669
+ const randomIndex = Math.floor(Math.random() * actions.length);
670
+ gameState.enemy.nextAction = actions[randomIndex];
671
+ gameState.enemy.nextDamage = damages[randomIndex];
672
+
673
+ // 增加回合数
674
+ gameState.turn += 1;
675
+
676
+ // 抽卡逻辑
677
+ gameState.battleLog.push("你抽了一张新卡牌");
678
+
679
+ updateUI();
680
+
681
+ // 检查游戏结束
682
+ if (gameState.player.health <= 0) {
683
+ gameState.battleLog.push("你被击败了!游戏结束");
684
+ updateUI();
685
+ setTimeout(() => alert("游戏结束!你被击败了"), 500);
686
+ } else if (gameState.enemy.health <= 0) {
687
+ gameState.battleLog.push("你击败了敌人!胜利!");
688
+ updateUI();
689
+ setTimeout(() => alert("恭喜!你击败了敌人!"), 500);
690
+ }
691
+ });
692
+
693
+ // 初始化UI
694
+ updateUI();
695
+ </script>
696
+ <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/secondcatch" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
697
+ </html>