Update index.html

index.html

@@ -172,41 +172,94 @@
         };
 
         const SPRITES = {
-            stand: ['kstand1.png', 'kstand2.png']
+            stand: ['kstand1.png', 'kstand2.png'],
+            midAttack: [
+                'kmidattack1.png', 
+                'kmidattack2.png', 
+                'kmidattack3.png', 
+                'kmidattack4.png', 
+                'kmidattack5.png'
+            ]
         };
 
         class Character {
-            constructor(element, isPlayer = true) {
-                this.element = element;
-                this.isPlayer = isPlayer;
-                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;
+    constructor(element, isPlayer = true) {
+        this.element = element;
+        this.isPlayer = isPlayer;
+        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;
+        this.midAttackHits = 0;
+        this.isInCombo = false;
+        this.currentAnimation = 'stand';
+        this.animationFrame = 0;
+        this.lastAction = 0; // AI를 위한 마지막 행동 시간 추가
+
+        if (isPlayer) {
+            this.element.style.backgroundImage = `url(${SPRITES.stand[0]})`;
+        }
+    }
 
-                if (isPlayer) {
-                    this.element.style.backgroundImage = `url(${SPRITES.stand[0]})`;
-                }
+    updateAnimation(timestamp) {
+        if (!this.isPlayer) return;
+
+        if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
+            if (this.currentAnimation === 'stand' && !this.isMoving && !this.isAttacking) {
+                this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
+                this.element.style.backgroundImage = `url(${SPRITES.stand[this.currentFrame]})`;
             }
+            else if (this.currentAnimation === 'midAttack') {
+                this.animationFrame = (this.animationFrame + 1) % SPRITES.midAttack.length;
+                this.element.style.backgroundImage = `url(${SPRITES.midAttack[this.animationFrame]})`;
+            }
+            this.lastAnimationUpdate = timestamp;
+        }
+    }
+
+    move(direction) {
+        this.vel.x = direction * SETTINGS.MOVE_SPEED;
+        this.direction = direction > 0 ? 'right' : 'left';
+        this.isMoving = true;
+        if (direction < 0) {
+            this.element.classList.add('facing-left');
+        } else {
+            this.element.classList.remove('facing-left');
+        }
+    }
 
-            updateAnimation(timestamp) {
-                if (this.isPlayer && !this.isMoving && !this.isAttacking) {
-                    if (timestamp - this.lastAnimationUpdate >= SETTINGS.ANIMATION_INTERVAL) {
-                        this.currentFrame = (this.currentFrame + 1) % SPRITES.stand.length;
-                        this.element.style.backgroundImage = 
-                            `url(${SPRITES.stand[this.currentFrame]})`;
-                        this.lastAnimationUpdate = timestamp;
-                    }
-                }
+    stop() {
+        this.vel.x = 0;
+        this.isMoving = false;
+    }
+
+    updatePosition() {
+        // Update position based on velocity
+        this.pos.x += this.vel.x;
+        this.pos.x = Math.max(0, Math.min(755, this.pos.x));
+        
+        // Update vertical position if jumping
+        if (this.isJumping) {
+            this.vel.y += SETTINGS.GRAVITY;
+            this.pos.y = Math.max(0, this.pos.y - this.vel.y);
+            if (this.pos.y === 0) {
+                this.isJumping = false;
+                this.vel.y = 0;
             }
         }
 
+        // Update DOM element position
+        this.element.style.left = `${this.pos.x}px`;
+        this.element.style.bottom = `${this.pos.y}px`;
+    }
+}
+
         class Game {
             constructor() {
                 this.lastFrameTime = 0;
@@ -224,6 +277,48 @@
                 this.setupControls();
                 this.startGame();
             }
+              checkMidAttackHit() {
+                // 중단 공격이 성공했을 때만 호출됨
+                if (this.player.currentAnimation === 'midAttack') {
+                    this.player.midAttackHits++;
+                    
+                    if (this.player.midAttackHits === 2) {
+                        this.executeCombo(this.player, this.enemy);
+                    }
+                }
+            }
+            executeCombo(attacker, defender) {
+                attacker.isInCombo = true;
+                
+                // 첫번째 콤보 공격 (kmidattack3.png)
+                attacker.element.style.backgroundImage = `url(${SPRITES.midAttack[2]})`;
+                
+                // 0.25초 후 두번째 이미지
+                setTimeout(() => {
+                    attacker.element.style.backgroundImage = `url(${SPRITES.midAttack[3]})`;
+                    if (!defender.isBlocking) {
+                        defender.health -= SETTINGS.DAMAGE;
+                        this.updateHealthBars();
+                    }
+                }, 250);
+            
+                // 0.5초 후 마지막 이미지
+                setTimeout(() => {
+                    attacker.element.style.backgroundImage = `url(${SPRITES.midAttack[4]})`;
+                    if (!defender.isBlocking) {
+                        defender.health -= SETTINGS.DAMAGE;
+                        this.updateHealthBars();
+                    }
+                    
+                    // 콤보 종료
+                    setTimeout(() => {
+                        attacker.isInCombo = false;
+                        attacker.midAttackHits = 0;
+                        attacker.currentAnimation = 'stand';
+                        attacker.element.style.backgroundImage = `url(${SPRITES.stand[0]})`;
+                    }, 250);
+                }, 500);
+            }
 
             setupControls() {
                 document.addEventListener('keydown', (e) => {
@@ -258,8 +353,21 @@
                 });
             }
 
-            startAttack(attacker, defender, type) {
+                        startAttack(attacker, defender, type) {
+                if (attacker.isInCombo) return;  // 콤보 중에는 새 공격 불가
+                
                 attacker.isAttacking = true;
+            
+                // 중단 공격일 경우 애니메이션 처리
+                if (type === 'mid' && attacker.isPlayer) {
+                    attacker.currentAnimation = 'midAttack';
+                    attacker.element.style.backgroundImage = `url(${SPRITES.midAttack[0]})`;
+                    
+                    setTimeout(() => {
+                        attacker.element.style.backgroundImage = `url(${SPRITES.midAttack[1]})`;
+                    }, 100);
+                }
+            
                 const attackEl = document.createElement('div');
                 attackEl.className = `attack ${type}Attack`;
                 
@@ -269,18 +377,25 @@
                 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;
+                        if (type === 'mid' && attacker.isPlayer) {
+                            this.checkMidAttackHit();
+                        }
                         this.updateHealthBars();
                         this.checkGameOver();
                     }
                 }, SETTINGS.ATTACK_DELAY);
-
+            
                 setTimeout(() => {
                     attacker.isAttacking = false;
+                    if (!attacker.isInCombo) {
+                        attacker.currentAnimation = 'stand';
+                        attacker.element.style.backgroundImage = `url(${SPRITES.stand[0]})`;
+                    }
                 }, SETTINGS.ATTACK_DELAY + 100);
             }
 
@@ -346,55 +461,59 @@
                     '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);
-                    });
+                        update(timestamp) {
+    if (timestamp - this.lastFrameTime >= SETTINGS.FRAME_TIME) {
+        // Jump handling
+        if (this.keys['w'] && !this.player.isJumping) {
+            this.player.isJumping = true;
+            this.player.vel.y = -SETTINGS.JUMP_FORCE;
+        }
 
-                    this.updateAI();
-                    this.lastFrameTime = timestamp;
-                }
+        // Movement handling
+        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.vel.x = 0;  // 키를 떼면 속도를 즉시 0으로 설정
+        }
 
-                if (!this.isGameOver) {
-                    requestAnimationFrame(this.update.bind(this));
+        // Update characters
+        [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));
+            
+            // Remove this line: 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}%`;