Spaces:

KaiShin1885
/

Tekken

Running

App Files Files Community

KaiShin1885 commited on Dec 7, 2024

Commit

c39f044

verified ·

1 Parent(s): 6d3fee3

Update index.html

Browse files

Files changed (1) hide show

index.html +149 -241

index.html CHANGED Viewed

@@ -1,264 +1,172 @@
-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.preloadImages();
-        // 캐릭터 초기화
-        this.player = new Character(document.getElementById('player'), true);
-        this.enemy = new Character(document.getElementById('enemy'), false);
-        this.keys = {};
-        this.setupControls();
-        this.startGame();
-    }
-    preloadImages() {
-        SPRITES.stand.forEach(src => {
-            const img = new Image();
-            img.src = src;
-        });
-    }
-    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 chargeEffect = document.createElement('div');
-        chargeEffect.className = `attack ${type}Attack`;
-        const xOffset = attacker.direction === 'right' ? 45 : -30;
-        const yOffset = type === 'high' ? 70 : 35;
-        chargeEffect.style.left = `${attacker.pos.x + xOffset}px`;
-        chargeEffect.style.bottom = `${yOffset}px`;
-        document.getElementById('gameArea').appendChild(chargeEffect);
-        setTimeout(() => {
-            chargeEffect.remove();
-            this.executeAttack(attacker, defender, type);
-        }, SETTINGS.ATTACK_DELAY);
-        setTimeout(() => {
-            attacker.isAttacking = false;
-        }, SETTINGS.ATTACK_DELAY + 100);
-    }
-    executeAttack(attacker, defender, type) {
-        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);
-        const distance = Math.abs(attacker.pos.x - defender.pos.x);
-        if (distance < 100) {
-            this.lastHit = {
-                time: Date.now(),
-                target: defender,
-                damage: SETTINGS.DAMAGE
-            };
-            this.canCounter = true;
-            setTimeout(() => {
-                if (this.lastHit && !this.lastHit.countered) {
-                    defender.health -= SETTINGS.DAMAGE;
-                    this.updateHealthBars();
-                }
-                this.lastHit = null;
-                this.canCounter = false;
-            }, SETTINGS.COUNTER_WINDOW);
         }
-        setTimeout(() => attackEl.remove(), 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);
-        const distance = Math.abs(attacker.pos.x - defender.pos.x);
-        if (distance < 300) {
-            defender.health -= SETTINGS.SPECIAL_DAMAGE;
-            this.updateHealthBars();
         }
-        this.specialCooldown = Date.now() + SETTINGS.SPECIAL_COOLDOWN;
-        setTimeout(() => ultimateEl.remove(), 300);
-    }
-    tryCounter() {
-        if (Date.now() < this.counterCooldown) return;
-        if (this.canCounter && this.lastHit &&
-            Date.now() - this.lastHit.time <= SETTINGS.COUNTER_WINDOW) {
-            const counterEffect = document.createElement('div');
-            counterEffect.className = 'counter-effect';
-            counterEffect.style.left = `${this.player.pos.x}px`;
-            counterEffect.style.bottom = '0px';
-            document.getElementById('gameArea').appendChild(counterEffect);
-            setTimeout(() => counterEffect.remove(), 400);
-            this.lastHit.countered = true;
-        } 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 *
-                (this.player.pos.x > this.enemy.pos.x ? -1 : 1);
-        } else if (distance > 150) {
-            this.enemy.vel.x = SETTINGS.MOVE_SPEED *
-                (this.player.pos.x > this.enemy.pos.x ? 1 : -1);
-        } 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';
-        this.enemy.lastAction = Date.now();
-    }
-    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();

+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #gameArea {
+            width: 800px;
+            height: 400px;
+            border: 2px solid black;
+            position: relative;
+            overflow: hidden;
+            background: #2a2a2a;
+            margin: auto;
         }
+        .character {
+            width: 45px;
+            height: 100px;
+            position: absolute;
+            bottom: 0;
+            transition: height 0.2s;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
         }
+        #player {
+            left: 100px;
+            background-image: url('kstand1.png');
         }
+        #enemy {
+            right: 100px;
+            background: red;
         }
+        .healthBar {
+            width: 200px;
+            height: 20px;
+            background: #333;
+            position: fixed;
+            top: 20px;
+            border: 2px solid #fff;
+        }
+        .healthFill {
+            height: 100%;
+            width: 100%;
+            transition: width 0.1s;
+        }
+        #playerHealthBar { left: 20px; }
+        #enemyHealthBar { right: 20px; }
+        #playerHealthFill { background: linear-gradient(90deg, #44f, #88f); }
+        #enemyHealthFill { background: linear-gradient(90deg, #f44, #f88); }
+        #timer {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 30px;
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 2px 2px #000;
+        }
+        .attack {
+            position: absolute;
+            pointer-events: none;
+        }
+        .midAttack {
+            width: 30px;
+            height: 30px;
+            background: rgba(255,255,0,0.6);
+            border: 2px solid #ff0;
+        }
+        .highAttack {
+            width: 30px;
+            height: 30px;
+            background: rgba(255,128,0,0.6);
+            border: 2px solid #f80;
+        }
+        .ultimate {
+            width: 300px;
+            height: 100px;
+            background: rgba(255,0,0,0.6);
+            border: 3px solid #f00;
+            animation: ultimateEffect 0.3s linear;
         }
+        .counter-effect {
+            position: absolute;
+            width: 45px;
+            height: 100px;
+            border: 2px solid #0ff;
+            animation: counterAnim 0.4s linear;
         }
+        #instructions {
+            position: fixed;
+            right: 20px;
+            top: 60px;
+            padding: 15px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            border-radius: 5px;
+            font-family: monospace;
+        }
+        #status {
+            position: fixed;
+            left: 20px;
+            bottom: 20px;
+            padding: 10px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            font-family: monospace;
+        }
+        .facing-left {
+            transform: scaleX(-1);
+        }
+        .crouch {
+            height: 50px !important;
+        }
+        @keyframes ultimateEffect {
+            0% { opacity: 0.3; }
+            50% { opacity: 0.8; }
+            100% { opacity: 0.3; }
+        }
+        @keyframes counterAnim {
+            0% { transform: scale(1); opacity: 1; }
+            100% { transform: scale(1.2); opacity: 0; }
+        }
+    </style>
+</head>
+<body>
+    <div id="gameArea">
+        <div id="timer">60</div>
+        <div id="playerHealthBar" class="healthBar">
+            <div id="playerHealthFill" class="healthFill"></div>
+        </div>
+        <div id="enemyHealthBar" class="healthBar">
+            <div id="enemyHealthFill" class="healthFill"></div>
+        </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>
+            A - Left<br>
+            D - Right<br>
+            S - Crouch<br>
+            J - Mid Attack (10dmg)<br>
+            K - High Attack (10dmg)<br>
+            Q - Ultimate (300dmg)<br>
+            L - Counter
+        </div>
+    </div>
+    <script>
+        // 상수 정의를 계속할까요?
+    </script>
+</body>
+</html>