Update index.html

index.html

@@ -17,7 +17,6 @@
             height: 100px;
             position: absolute;
             bottom: 0;
-            transition: height 0.2s;
             background-size: contain;
             background-repeat: no-repeat;
             background-position: center;
@@ -100,16 +99,6 @@
             animation: counterAnim 0.4s linear;
         }
 
-        #status {
-            position: fixed;
-            left: 20px;
-            bottom: 20px;
-            padding: 10px;
-            background: rgba(0,0,0,0.8);
-            color: white;
-            font-family: monospace;
-        }
-
         #instructions {
             position: fixed;
             right: 20px;
@@ -152,7 +141,6 @@
         </div>
         <div id="player" class="character"></div>
         <div id="enemy" class="character"></div>
-        <div id="status"></div>
         <div id="instructions">
             Controls:<br><br>
             W - Jump<br>
@@ -167,28 +155,38 @@
     </div>
 
     <script>
-        // 기본 스프라이트 이미지 설정
-        const SPRITE_BASE64 = "data:image/png;base64,<provided_image_base64>";
+        const SETTINGS = {
+            FPS: 60,
+            FRAME_TIME: 1000 / 60,
+            MOVE_SPEED: 5,
+            JUMP_FORCE: 15,
+            GRAVITY: 0.8,
+            INITIAL_HEALTH: 1000,
+            DAMAGE: 10,
+            SPECIAL_DAMAGE: 300,
+            ATTACK_DELAY: 200,
+            COUNTER_WINDOW: 400,
+            COUNTER_COOLDOWN: 5000,
+            SPECIAL_COOLDOWN: 30000,
+            ANIMATION_INTERVAL: 500
+        };
 
         const SPRITES = {
-            stand: [
-                SPRITE_BASE64, // kstand1
-                SPRITE_BASE64, // kstand2 - 실제로는 다른 이미지
-                SPRITE_BASE64  // kstand3 - 실제로는 다른 이미지
-            ]
+            stand: ['kstand1.png', 'kstand2.png', 'kstand3.png']
         };
 
         class Character {
             constructor(element, isPlayer = true) {
                 this.element = element;
                 this.isPlayer = isPlayer;
-                this.health = 1000;
+                this.health = SETTINGS.INITIAL_HEALTH;
                 this.pos = { x: isPlayer ? 100 : 650, y: 0 };
                 this.vel = { x: 0, y: 0 };
                 this.direction = isPlayer ? 'right' : 'left';
                 this.isMoving = false;
                 this.isAttacking = false;
                 this.isJumping = false;
+                this.isBlocking = false;
                 this.currentFrame = 0;
                 this.lastAnimationUpdate = 0;
 
@@ -199,7 +197,7 @@
 
             updateAnimation(timestamp) {
                 if (this.isPlayer && !this.isMoving && !this.isAttacking) {
-                    if (timestamp - this.lastAnimationUpdate >= 500) {
+                    if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
                         this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
                         this.element.style.backgroundImage = 
                             `url(${SPRITES.stand[this.currentFrame]})`;
@@ -209,7 +207,222 @@
             }
         }
 
-        // Game 클래스를 계속 구현할까요?
+        class Game {
+            constructor() {
+                this.lastFrameTime = 0;
+                this.gameTime = 60;
+                this.specialCooldown = Date.now() + SETTINGS.SPECIAL_COOLDOWN;
+                this.counterCooldown = 0;
+                this.canCounter = false;
+                this.lastHit = null;
+                this.isGameOver = false;
+
+                this.player = new Character(document.getElementById('player'), true);
+                this.enemy = new Character(document.getElementById('enemy'), false);
+
+                this.keys = {};
+                this.setupControls();
+                this.startGame();
+            }
+
+            setupControls() {
+                document.addEventListener('keydown', (e) => {
+                    if (this.isGameOver) return;
+                    this.keys[e.key.toLowerCase()] = true;
+
+                    switch(e.key.toLowerCase()) {
+                        case 'j':
+                        case 'k':
+                            this.startAttack(this.player, this.enemy, 
+                                e.key === 'k' ? 'high' : 'mid');
+                            break;
+                        case 'q':
+                            if (Date.now() >= this.specialCooldown) {
+                                this.useUltimate(this.player, this.enemy);
+                            }
+                            break;
+                        case 'l':
+                            this.tryCounter();
+                            break;
+                        case 's':
+                            this.player.element.classList.add('crouch');
+                            break;
+                    }
+                });
+
+                document.addEventListener('keyup', (e) => {
+                    this.keys[e.key.toLowerCase()] = false;
+                    if (e.key.toLowerCase() === 's') {
+                        this.player.element.classList.remove('crouch');
+                    }
+                });
+            }
+
+            startAttack(attacker, defender, type) {
+                attacker.isAttacking = true;
+                const attackEl = document.createElement('div');
+                attackEl.className = `attack ${type}Attack`;
+                
+                const xOffset = attacker.direction === 'right' ? 45 : -30;
+                const yOffset = type === 'high' ? 70 : 35;
+                
+                attackEl.style.left = `${attacker.pos.x + xOffset}px`;
+                attackEl.style.bottom = `${yOffset}px`;
+                document.getElementById('gameArea').appendChild(attackEl);
+
+                setTimeout(() => {
+                    attackEl.remove();
+                    if (!defender.isBlocking) {
+                        defender.health -= SETTINGS.DAMAGE;
+                        this.updateHealthBars();
+                    }
+                }, SETTINGS.ATTACK_DELAY);
+
+                setTimeout(() => {
+                    attacker.isAttacking = false;
+                }, SETTINGS.ATTACK_DELAY + 100);
+            }
+
+            useUltimate(attacker, defender) {
+                const ultimateEl = document.createElement('div');
+                ultimateEl.className = 'attack ultimate';
+                
+                const xOffset = attacker.direction === 'right' ? 45 : -300;
+                ultimateEl.style.left = `${attacker.pos.x + xOffset}px`;
+                ultimateEl.style.bottom = '0px';
+                
+                document.getElementById('gameArea').appendChild(ultimateEl);
+
+                setTimeout(() => {
+                    if (!defender.isBlocking) {
+                        defender.health -= SETTINGS.SPECIAL_DAMAGE;
+                        this.updateHealthBars();
+                    }
+                    ultimateEl.remove();
+                }, 300);
+
+                this.specialCooldown = Date.now() + SETTINGS.SPECIAL_COOLDOWN;
+            }
+
+            tryCounter() {
+                if (Date.now() < this.counterCooldown) return;
+
+                const counterEl = document.createElement('div');
+                counterEl.className = 'counter-effect';
+                counterEl.style.left = `${this.player.pos.x}px`;
+                counterEl.style.bottom = '0px';
+                document.getElementById('gameArea').appendChild(counterEl);
+
+                setTimeout(() => counterEl.remove(), 400);
+
+                if (this.lastHit && Date.now() - this.lastHit.time <= SETTINGS.COUNTER_WINDOW) {
+                    this.player.isBlocking = true;
+                    setTimeout(() => {
+                        this.player.isBlocking = false;
+                    }, 400);
+                } else {
+                    this.counterCooldown = Date.now() + SETTINGS.COUNTER_COOLDOWN;
+                }
+            }
+
+            updateAI() {
+                if (Date.now() - this.enemy.lastAction < 300) return;
+
+                const distance = Math.abs(this.player.pos.x - this.enemy.pos.x);
+                const healthRatio = this.enemy.health / this.player.health;
+
+                if (healthRatio < 0.7 || distance < 80) {
+                    this.enemy.vel.x = -SETTINGS.MOVE_SPEED;
+                } else if (distance > 150) {
+                    this.enemy.vel.x = SETTINGS.MOVE_SPEED;
+                } else if (Math.random() < 0.05) {
+                    this.startAttack(this.enemy, this.player, 
+                        Math.random() > 0.5 ? 'high' : 'mid');
+                }
+
+                this.enemy.direction = this.player.pos.x > this.enemy.pos.x ? 
+                    'right' : 'left';
+            }
+
+            update(timestamp) {
+                if (timestamp - this.lastFrameTime >= SETTINGS.FRAME_TIME) {
+                    if (this.keys['w'] && !this.player.isJumping) {
+                        this.player.isJumping = true;
+                        this.player.vel.y = -SETTINGS.JUMP_FORCE;
+                    }
+                    if (this.keys['a']) {
+                        this.player.vel.x = -SETTINGS.MOVE_SPEED;
+                        this.player.direction = 'left';
+                        this.player.isMoving = true;
+                        this.player.element.classList.add('facing-left');
+                    } else if (this.keys['d']) {
+                        this.player.vel.x = SETTINGS.MOVE_SPEED;
+                        this.player.direction = 'right';
+                        this.player.isMoving = true;
+                        this.player.element.classList.remove('facing-left');
+                    } else {
+                        this.player.isMoving = false;
+                    }
+
+                    [this.player, this.enemy].forEach(char => {
+                        if (char.isJumping) {
+                            char.vel.y += SETTINGS.GRAVITY;
+                            char.pos.y = Math.max(0, char.pos.y - char.vel.y);
+                            if (char.pos.y === 0) {
+                                char.isJumping = false;
+                                char.vel.y = 0;
+                            }
+                        }
+
+                        char.pos.x += char.vel.x;
+                        char.pos.x = Math.max(0, Math.min(755, char.pos.x));
+                        char.vel.x *= 0.8;
+
+                        char.element.style.left = `${char.pos.x}px`;
+                        char.element.style.bottom = `${char.pos.y}px`;
+
+                        char.updateAnimation(timestamp);
+                    });
+
+                    this.updateAI();
+                    this.lastFrameTime = timestamp;
+                }
+
+                if (!this.isGameOver) {
+                    requestAnimationFrame(this.update.bind(this));
+                }
+            }
+
+            updateHealthBars() {
+                document.getElementById('playerHealthFill').style.width = 
+                    `${(this.player.health/SETTINGS.INITIAL_HEALTH)*100}%`;
+                document.getElementById('enemyHealthFill').style.width = 
+                    `${(this.enemy.health/SETTINGS.INITIAL_HEALTH)*100}%`;
+            }
+
+            startGame() {
+                this.updateHealthBars();
+                requestAnimationFrame(this.update.bind(this));
+
+                const timer = setInterval(() => {
+                    this.gameTime--;
+                    document.getElementById('timer').textContent = this.gameTime;
+
+                    if (this.gameTime <= 0) {
+                        clearInterval(timer);
+                        this.endGame();
+                    }
+                }, 1000);
+            }
+
+            endGame() {
+                this.isGameOver = true;
+                const winner = this.player.health > this.enemy.health ? 'Player' : 'Enemy';
+                alert(`Game Over! ${winner} wins!`);
+            }
+        }
+
+        new Game();
     </script>
 </body>
 </html>