Hugging Face's logo

Spaces:
KaiShin1885
/
Tekken
Running

App Files Community
KaiShin1885 commited on
Commit
54da416
·
verified ·
1 Parent(s): 0fbee5c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +206 -18
index.html CHANGED
@@ -1,19 +1,207 @@
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>
3
+ <head>
4
+ <style>
5
+ #gameArea {
6
+ width: 800px;
7
+ height: 400px;
8
+ border: 2px solid black;
9
+ position: relative;
10
+ overflow: hidden;
11
+ background: #2a2a2a;
12
+ }
13
+
14
+ .character {
15
+ width: 50px;
16
+ height: 100px;
17
+ position: absolute;
18
+ bottom: 0;
19
+ transition: height 0.2s;
20
+ background-size: contain;
21
+ background-repeat: no-repeat;
22
+ background-position: center;
23
+ }
24
+
25
+ #player {
26
+ left: 100px;
27
+ background-image: url('kstand1.png');
28
+ }
29
+
30
+ #enemy {
31
+ right: 100px;
32
+ background: #f44;
33
+ }
34
+
35
+ .healthBar {
36
+ width: 200px;
37
+ height: 20px;
38
+ background: #333;
39
+ position: fixed;
40
+ top: 20px;
41
+ border: 2px solid #fff;
42
+ }
43
+
44
+ #playerHealthBar { left: 20px; }
45
+ #enemyHealthBar { right: 20px; }
46
+
47
+ .healthFill {
48
+ height: 100%;
49
+ width: 100%;
50
+ transition: width 0.1s;
51
+ }
52
+
53
+ #playerHealthFill { background: linear-gradient(90deg, #44f, #88f); }
54
+ #enemyHealthFill { background: linear-gradient(90deg, #f44, #f88); }
55
+
56
+ .attack {
57
+ position: absolute;
58
+ pointer-events: none;
59
+ }
60
+
61
+ .midAttack {
62
+ width: 30px;
63
+ height: 30px;
64
+ background: rgba(255,255,0,0.6);
65
+ border: 2px solid #ff0;
66
+ }
67
+
68
+ .highAttack {
69
+ width: 30px;
70
+ height: 30px;
71
+ background: rgba(255,128,0,0.6);
72
+ border: 2px solid #f80;
73
+ }
74
+
75
+ .ultimate {
76
+ width: 300px;
77
+ height: 100px;
78
+ background: rgba(255,0,0,0.6);
79
+ border: 3px solid #f00;
80
+ animation: ultimateEffect 0.3s linear;
81
+ }
82
+
83
+ @keyframes ultimateEffect {
84
+ 0% { opacity: 0.3; }
85
+ 50% { opacity: 0.8; }
86
+ 100% { opacity: 0.3; }
87
+ }
88
+
89
+ #timer {
90
+ position: fixed;
91
+ top: 20px;
92
+ left: 50%;
93
+ transform: translateX(-50%);
94
+ font-size: 30px;
95
+ font-weight: bold;
96
+ color: #fff;
97
+ text-shadow: 2px 2px #000;
98
+ }
99
+
100
+ #instructions {
101
+ position: fixed;
102
+ right: 20px;
103
+ top: 60px;
104
+ padding: 15px;
105
+ background: rgba(0,0,0,0.8);
106
+ color: white;
107
+ border-radius: 8px;
108
+ font-family: monospace;
109
+ }
110
+
111
+ .status {
112
+ position: fixed;
113
+ left: 20px;
114
+ bottom: 20px;
115
+ padding: 10px;
116
+ background: rgba(0,0,0,0.8);
117
+ color: white;
118
+ border-radius: 5px;
119
+ font-family: monospace;
120
+ }
121
+
122
+ .facing-left {
123
+ transform: scaleX(-1);
124
+ }
125
+ </style>
126
+ </head>
127
+ <body>
128
+ <div id="gameArea">
129
+ <div id="timer">60</div>
130
+ <div id="playerHealthBar" class="healthBar">
131
+ <div id="playerHealthFill" class="healthFill"></div>
132
+ </div>
133
+ <div id="enemyHealthBar" class="healthBar">
134
+ <div id="enemyHealthFill" class="healthFill"></div>
135
+ </div>
136
+ <div id="player" class="character"></div>
137
+ <div id="enemy" class="character"></div>
138
+ <div class="status"></div>
139
+ <div id="instructions">
140
+ Controls:<br><br>
141
+ W - Jump<br>
142
+ A - Left<br>
143
+ D - Right<br>
144
+ S - Crouch<br>
145
+ J - Mid Attack (10dmg)<br>
146
+ K - High Attack (10dmg)<br>
147
+ Q - Ultimate (300dmg)<br>
148
+ L - Counter
149
+ </div>
150
+ </div>
151
+
152
+ <script>
153
+ // 게임 설정
154
+ const SETTINGS = {
155
+ FPS: 60,
156
+ FRAME_TIME: 1000/60,
157
+ MOVE_SPEED: 5,
158
+ JUMP_FORCE: 15,
159
+ GRAVITY: 0.8,
160
+ INITIAL_HEALTH: 1000,
161
+ DAMAGE: 10,
162
+ SPECIAL_DAMAGE: 300,
163
+ ATTACK_DELAY: 200,
164
+ COUNTER_WINDOW: 400,
165
+ COUNTER_COOLDOWN: 5000,
166
+ SPECIAL_COOLDOWN: 30000,
167
+ ANIMATION_INTERVAL: 500
168
+ };
169
+
170
+ // 스프라이트 상태 정의
171
+ const SPRITES = {
172
+ stand: ['kstand1.png', 'kstand2.png', 'kstand3.png']
173
+ };
174
+
175
+ class Character {
176
+ constructor(element, isPlayer = true) {
177
+ this.element = element;
178
+ this.isPlayer = isPlayer;
179
+ this.health = SETTINGS.INITIAL_HEALTH;
180
+ this.pos = {
181
+ x: isPlayer ? 100 : 650,
182
+ y: 0
183
+ };
184
+ this.vel = { x: 0, y: 0 };
185
+ this.direction = isPlayer ? 'right' : 'left';
186
+ this.isMoving = false;
187
+ this.isAttacking = false;
188
+ this.currentFrame = 0;
189
+ this.lastAnimationUpdate = 0;
190
+ }
191
+
192
+ updateAnimation(timestamp) {
193
+ if (!this.isMoving && !this.isAttacking && this.isPlayer) {
194
+ if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
195
+ this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
196
+ this.element.style.backgroundImage =
197
+ `url(${SPRITES.stand[this.currentFrame]})`;
198
+ this.lastAnimationUpdate = timestamp;
199
+ }
200
+ }
201
+ }
202
+ }
203
+
204
+ // Game 클래스 구현...
205
+ </script>
206
+ </body>
207
+ </html>