/** * Standalone Combat Mathematics & Attack/Magic Testing Arena (Issue #24 / M9). * * Renders 1 Player and 1 Monster in an isometric testing duel ring. * Allows interactive configuration of character attributes, monster types, and levels. * Provides real-time execution and step-by-step mathematical breakdown for: * - Melee physical attacks (AR vs DR to-hit, Shield Block, Critical/Deadly Strike, Crushing Blow, DR%) * - Fire, Cold, Lightning, Poison, and Magic spells (resistances, immunities, MDR, chill/stun effects) * - Monster counter-attacks, Hit Recovery (FHR), and continuous DPS benchmarks. */ import { calculateAttack, calculateHitChance, calculatePlayerBlockChance, calculateCriticalChance, evaluateCriticalAndDeadlyStrike, calculateCrushingBlowDamage, calculateOpenWoundsDamage, calculateLeech, calculateFreezeTarget, calculateResistanceFactor, calculateResistanceReduction, calculateMonsterRegeneration, evaluatePreventMonsterHeal, calculateKnockbackSuccess, calculateSlowTarget, calculateHitBlindsTarget, calculateHitCausesFlee, calculatePhysicalWeaponDamage, calculatePoisonStack, checkHitRecovery, D2_EXPERIENCE_TABLE_99, } from './game/formulas.ts' import type { CombatCalculationResult, TargetTier, GameDifficulty, MonsterSize } from './game/formulas.ts' // --- Monster Database & Scaling --------------------------------------------- interface MonsterBaseDefinition { readonly id: string readonly name: string readonly category: string readonly baseMinHp: number readonly baseMaxHp: number readonly baseAc: number readonly baseTh: number readonly baseMinD: number readonly baseMaxD: number readonly baseExp: number readonly blockPercent: number readonly resPhysical: number readonly resFire: number readonly resLightning: number readonly resCold: number readonly resPoison: number readonly resMagic: number readonly color: string readonly tier?: TargetTier readonly drainEffectiveness?: number readonly size?: MonsterSize readonly regenRate?: number } const MONSTER_TEMPLATES: Record = { fallen1: { id: 'fallen1', name: '沉沦魔 (Fallen)', category: '恶魔 (Demon)', baseMinHp: 21, baseMaxHp: 61, baseAc: 84, baseTh: 101, baseMinD: 51, baseMaxD: 101, baseExp: 61, blockPercent: 0, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 0, resPoison: 0, resMagic: 0, color: '#e64a19', tier: 'normal', drainEffectiveness: 100, size: 'small', regenRate: 0, }, zombie1: { id: 'zombie1', name: '僵尸 (Zombie)', category: '不死 (Undead)', baseMinHp: 31, baseMaxHp: 61, baseAc: 64, baseTh: 81, baseMinD: 51, baseMaxD: 101, baseExp: 111, blockPercent: 0, resPhysical: 0, resFire: -20, resLightning: 0, resCold: 0, resPoison: 0, resMagic: 0, color: '#558b2f', tier: 'normal', drainEffectiveness: 50, size: 'medium', regenRate: 5, }, quillrat1: { id: 'quillrat1', name: '刺鼠 (Quill Rat)', category: '动物 (Animal)', baseMinHp: 21, baseMaxHp: 41, baseAc: 64, baseTh: 101, baseMinD: 51, baseMaxD: 101, baseExp: 71, blockPercent: 0, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 0, resPoison: 0, resMagic: 0, color: '#8d6e63', tier: 'normal', drainEffectiveness: 100, size: 'small', regenRate: 0, }, skeleton1: { id: 'skeleton1', name: '骷髅战士 (Skeleton)', category: '不死 (Undead)', baseMinHp: 21, baseMaxHp: 51, baseAc: 84, baseTh: 81, baseMinD: 51, baseMaxD: 101, baseExp: 81, blockPercent: 15, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 0, resPoison: 25, resMagic: 0, color: '#cfd8dc', tier: 'normal', drainEffectiveness: 0, size: 'medium', regenRate: 0, }, corruptrogue1: { id: 'corruptrogue1', name: '黑暗猎手 (Dark Hunter)', category: '恶魔 (Demon)', baseMinHp: 25, baseMaxHp: 55, baseAc: 101, baseTh: 121, baseMinD: 61, baseMaxD: 111, baseExp: 91, blockPercent: 20, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 0, resPoison: 0, resMagic: 0, color: '#7b1fa2', tier: 'normal', drainEffectiveness: 100, size: 'medium', regenRate: 0, }, goatman1: { id: 'goatman1', name: '月亮氏族羊头人 (Moon Clan)', category: '动物 (Animal)', baseMinHp: 41, baseMaxHp: 81, baseAc: 101, baseTh: 101, baseMinD: 81, baseMaxD: 141, baseExp: 131, blockPercent: 0, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 20, resPoison: 0, resMagic: 0, color: '#4e342e', tier: 'normal', drainEffectiveness: 100, size: 'large', regenRate: 0, }, bloodraven: { id: 'bloodraven', name: '血鸟 (Blood Raven)', category: '暗金Boss (SuperUnique)', baseMinHp: 120, baseMaxHp: 200, baseAc: 150, baseTh: 180, baseMinD: 100, baseMaxD: 180, baseExp: 500, blockPercent: 30, resPhysical: 10, resFire: 20, resLightning: 20, resCold: 20, resPoison: 20, resMagic: 0, color: '#c2185b', tier: 'boss', drainEffectiveness: 50, size: 'medium', regenRate: 8, }, andariel: { id: 'andariel', name: '安达利尔 (Andariel)', category: '幕终首领 (Act Boss)', baseMinHp: 1025, baseMaxHp: 1200, baseAc: 175, baseTh: 220, baseMinD: 150, baseMaxD: 260, baseExp: 3200, blockPercent: 0, resPhysical: 15, resFire: -50, resLightning: 50, resCold: 50, resPoison: 80, resMagic: 0, color: '#2e7d32', tier: 'boss', drainEffectiveness: 100, size: 'large', regenRate: 15, }, duriel: { id: 'duriel', name: '督瑞尔 (Duriel)', category: '幕终首领 (Act Boss)', baseMinHp: 3995, baseMaxHp: 4500, baseAc: 300, baseTh: 350, baseMinD: 250, baseMaxD: 400, baseExp: 8500, blockPercent: 0, resPhysical: 20, resFire: 20, resLightning: 20, resCold: 50, resPoison: 20, resMagic: 0, color: '#00838f', tier: 'boss', drainEffectiveness: 100, size: 'large', regenRate: 20, }, mephisto: { id: 'mephisto', name: '墨菲斯托 (Mephisto)', category: '幕终首领 (Act Boss)', baseMinHp: 7300, baseMaxHp: 8000, baseAc: 450, baseTh: 500, baseMinD: 350, baseMaxD: 550, baseExp: 18000, blockPercent: 25, resPhysical: 20, resFire: 50, resLightning: 75, resCold: 50, resPoison: 75, resMagic: 0, color: '#1565c0', tier: 'boss', drainEffectiveness: 20, size: 'large', regenRate: 25, }, diablo: { id: 'diablo', name: '暗黑破坏神 (Diablo)', category: '幕终首领 (Act Boss)', baseMinHp: 13800, baseMaxHp: 15000, baseAc: 600, baseTh: 700, baseMinD: 500, baseMaxD: 800, baseExp: 35000, blockPercent: 30, resPhysical: 30, resFire: 50, resLightning: 50, resCold: 50, resPoison: 50, resMagic: 0, color: '#d32f2f', tier: 'boss', drainEffectiveness: 50, size: 'large', regenRate: 35, }, baal: { id: 'baal', name: '毁灭之王巴尔 (Baal)', category: '幕终首领 (Act Boss)', baseMinHp: 26000, baseMaxHp: 30000, baseAc: 800, baseTh: 900, baseMinD: 600, baseMaxD: 1000, baseExp: 60000, blockPercent: 40, resPhysical: 50, resFire: 50, resLightning: 50, resCold: 50, resPoison: 50, resMagic: 0, color: '#ff8f00', tier: 'boss', drainEffectiveness: 33, size: 'large', regenRate: 45, }, dummy: { id: 'dummy', name: '测伤木桩 (Training Dummy)', category: '无敌靶桩 (Dummy)', baseMinHp: 100000, baseMaxHp: 100000, baseAc: 100, baseTh: 100, baseMinD: 10, baseMaxD: 20, baseExp: 100, blockPercent: 0, resPhysical: 0, resFire: 0, resLightning: 0, resCold: 0, resPoison: 0, resMagic: 0, color: '#ffb300', tier: 'normal', drainEffectiveness: 100, size: 'large', regenRate: 0, }, } /** Scale multipliers derived from MonLvl.txt per level */ function computeMonsterScale(level: number) { const l = Math.max(1, Math.min(99, level)) return { ac: Math.round(6 + 2.2 * l), th: Math.round(8 + 2.8 * l), hp: Math.round(7 + 3.0 * l), dm: Math.round(2 + 1.2 * l), xp: Math.round(30 + 10 * l), } } // --- Visual & Particle FX State --------------------------------------------- interface FloatingText { x: number y: number text: string color: string size: number alpha: number vy: number life: number } interface ProjectileFx { x: number y: number targetX: number targetY: number type: 'fire' | 'cold' | 'light' | 'magic' progress: number speed: number onHit: () => void } interface ParticleFx { x: number y: number vx: number vy: number color: string size: number life: number maxLife: number } // --- App State -------------------------------------------------------------- class CombatArenaApp { private canvas!: HTMLCanvasElement private ctx!: CanvasRenderingContext2D // Player State private player = { class: 'Sorceress', level: 30, hp: 350, maxHp: 350, mana: 200, maxMana: 200, ar: 1200, dr: 650, dmgMin: 25, dmgMax: 65, fire: 15, cold: 10, light: 25, poison: 0, magic: 0, block: 45, cs: 20, ds: 15, cb: 25, ow: 25, ll: 10, ml: 5, itd: false, defRed: 25, freezeBonus: 1, knockback: 25, difficulty: 'normal' as GameDifficulty, flatDr: 2, flatMdr: 2, fhr: 30, // PvE mechanics pmh: true, isMerc: false, conviction: 0, lowerRes: 0, minusLightRes: 0, minusFireRes: 0, minusColdRes: 0, minusPoisonRes: 0, slow: 0, hbt: 0, hcmtf: 0, flatDmg: 0, offWeaponEd: 0, statBonus: 0, // Animation state action: 'idle' as 'idle' | 'attack' | 'cast' | 'hit' | 'dead', actionTimer: 0, hitFlash: 0, } // Monster State private monster = { typeKey: 'fallen1', name: '沉沦魔 (Fallen)', category: '恶魔 (Demon)', tier: 'normal' as TargetTier, posture: 'stand' as 'stand' | 'run', level: 28, hp: 180, maxHp: 180, dr: 480, ar: 520, dmgMin: 12, dmgMax: 28, block: 0, drainEffectiveness: 100, resPhysical: 0, resFire: 0, resCold: 0, resLightning: 0, resPoison: 0, resMagic: 0, flatDr: 0, flatMdr: 0, size: 'medium' as MonsterSize, regenRate: 0, isUber: false, // Animation & Status state action: 'idle' as 'idle' | 'attack' | 'hit' | 'dead', actionTimer: 0, hitFlash: 0, color: '#e64a19', stunTimer: 0, chillTimer: 0, freezeTimer: 0, openWoundsTimer: 0, openWoundsDmgPerFrame: 0, knockbackOffset: 0, pmhTimer: 0, blindTimer: 0, fleeTimer: 0, slowTimer: 0, slowPercent: 0, } // Visuals private floatingTexts: FloatingText[] = [] private projectiles: ProjectileFx[] = [] private particles: ParticleFx[] = [] private autoBattleActive = false private autoBattleInterval: number | null = null // Statistics private totalDamageDealt = 0 private combatStartTime = 0 constructor() { this.initDom() this.initEvents() this.updateMonsterStatsFromTypeAndLevel() this.startRenderLoop() } private initDom() { this.canvas = document.getElementById('view') as HTMLCanvasElement this.ctx = this.canvas.getContext('2d')! this.resizeCanvas() window.addEventListener('resize', () => this.resizeCanvas()) } private resizeCanvas() { const wrapper = document.getElementById('viewport-wrapper')! this.canvas.width = wrapper.clientWidth this.canvas.height = wrapper.clientHeight } private initEvents() { // Player presets const presetSelect = document.getElementById('char-preset') as HTMLSelectElement presetSelect.addEventListener('change', () => this.applyPlayerPreset(presetSelect.value)) // Player inputs sync const syncPlayerInputs = () => { this.player.class = (document.getElementById('char-class') as HTMLSelectElement).value this.player.level = Number((document.getElementById('char-level') as HTMLInputElement).value) || 1 this.player.hp = Number((document.getElementById('char-hp') as HTMLInputElement).value) || 1 this.player.maxHp = this.player.hp this.player.mana = Number((document.getElementById('char-mana') as HTMLInputElement).value) || 0 this.player.maxMana = this.player.mana this.player.ar = Number((document.getElementById('char-ar') as HTMLInputElement).value) || 0 this.player.dr = Number((document.getElementById('char-dr') as HTMLInputElement).value) || 0 this.player.dmgMin = Number((document.getElementById('char-dmg-min') as HTMLInputElement).value) || 1 this.player.dmgMax = Number((document.getElementById('char-dmg-max') as HTMLInputElement).value) || 1 this.player.fire = Number((document.getElementById('char-fire') as HTMLInputElement).value) || 0 this.player.cold = Number((document.getElementById('char-cold') as HTMLInputElement).value) || 0 this.player.light = Number((document.getElementById('char-light') as HTMLInputElement).value) || 0 this.player.poison = Number((document.getElementById('char-poison') as HTMLInputElement).value) || 0 this.player.magic = Number((document.getElementById('char-magic') as HTMLInputElement).value) || 0 this.player.block = Number((document.getElementById('char-block') as HTMLInputElement).value) || 0 this.player.cs = Number((document.getElementById('char-cs') as HTMLInputElement)?.value) || 0 this.player.ds = Number((document.getElementById('char-ds') as HTMLInputElement)?.value) || 0 this.player.cb = Number((document.getElementById('char-cb') as HTMLInputElement)?.value) || 0 this.player.ow = Number((document.getElementById('char-ow') as HTMLInputElement)?.value) || 0 this.player.ll = Number((document.getElementById('char-ll') as HTMLInputElement)?.value) || 0 this.player.ml = Number((document.getElementById('char-ml') as HTMLInputElement)?.value) || 0 this.player.itd = (document.getElementById('char-itd') as HTMLInputElement)?.checked ?? false this.player.defRed = Number((document.getElementById('char-def-red') as HTMLInputElement)?.value) || 0 this.player.freezeBonus = Number((document.getElementById('char-freeze') as HTMLInputElement)?.value) || 0 this.player.knockback = Number((document.getElementById('char-knockback') as HTMLInputElement)?.value) || 0 this.player.difficulty = ((document.getElementById('game-difficulty') as HTMLSelectElement)?.value ?? 'normal') as GameDifficulty this.player.flatDr = Number((document.getElementById('char-flat-dr') as HTMLInputElement).value) || 0 this.player.flatMdr = Number((document.getElementById('char-flat-mdr') as HTMLInputElement).value) || 0 this.player.pmh = (document.getElementById('char-pmh') as HTMLInputElement)?.checked ?? false this.player.isMerc = (document.getElementById('char-is-merc') as HTMLInputElement)?.checked ?? false this.player.conviction = Number((document.getElementById('char-conviction') as HTMLInputElement)?.value) || 0 this.player.lowerRes = Number((document.getElementById('char-lower-res') as HTMLInputElement)?.value) || 0 this.player.minusLightRes = Number((document.getElementById('char-minus-light-res') as HTMLInputElement)?.value) || 0 this.player.minusFireRes = Number((document.getElementById('char-minus-fire-res') as HTMLInputElement)?.value) || 0 this.player.minusColdRes = Number((document.getElementById('char-minus-cold-res') as HTMLInputElement)?.value) || 0 this.player.minusPoisonRes = Number((document.getElementById('char-minus-poison-res') as HTMLInputElement)?.value) || 0 this.player.slow = Number((document.getElementById('char-slow') as HTMLInputElement)?.value) || 0 this.player.hbt = Number((document.getElementById('char-hbt') as HTMLInputElement)?.value) || 0 this.player.hcmtf = Number((document.getElementById('char-hcmtf') as HTMLInputElement)?.value) || 0 this.player.flatDmg = Number((document.getElementById('char-flat-dmg') as HTMLInputElement)?.value) || 0 this.player.offWeaponEd = Number((document.getElementById('char-off-weapon-ed') as HTMLInputElement)?.value) || 0 this.player.statBonus = Number((document.getElementById('char-stat-bonus') as HTMLInputElement)?.value) || 0 } const playerInputIds = [ 'char-class', 'char-level', 'char-hp', 'char-mana', 'char-ar', 'char-dr', 'char-dmg-min', 'char-dmg-max', 'char-fire', 'char-cold', 'char-light', 'char-poison', 'char-magic', 'char-block', 'char-cs', 'char-ds', 'char-cb', 'char-ow', 'char-ll', 'char-ml', 'char-itd', 'char-def-red', 'char-freeze', 'char-knockback', 'game-difficulty', 'char-flat-dr', 'char-flat-mdr', 'char-pmh', 'char-is-merc', 'char-conviction', 'char-lower-res', 'char-minus-light-res', 'char-minus-fire-res', 'char-minus-cold-res', 'char-minus-poison-res', 'char-slow', 'char-hbt', 'char-hcmtf', 'char-flat-dmg', 'char-off-weapon-ed', 'char-stat-bonus', ] for (const id of playerInputIds) { const el = document.getElementById(id) el?.addEventListener('input', syncPlayerInputs) el?.addEventListener('change', syncPlayerInputs) } // Monster Type & Level const monTypeSelect = document.getElementById('mon-type') as HTMLSelectElement const monLevelInput = document.getElementById('mon-level') as HTMLInputElement monTypeSelect.addEventListener('change', () => this.updateMonsterStatsFromTypeAndLevel()) monLevelInput.addEventListener('input', () => this.updateMonsterStatsFromTypeAndLevel()) // Monster custom inputs const syncMonsterInputs = () => { this.monster.tier = ((document.getElementById('mon-tier') as HTMLSelectElement)?.value ?? 'normal') as TargetTier this.monster.posture = ((document.getElementById('mon-posture') as HTMLSelectElement)?.value ?? 'stand') as 'stand' | 'run' this.monster.drainEffectiveness = Number((document.getElementById('mon-drain-eff') as HTMLInputElement)?.value) ?? 100 this.monster.size = ((document.getElementById('mon-size') as HTMLSelectElement)?.value ?? 'medium') as MonsterSize this.monster.regenRate = Number((document.getElementById('mon-regen') as HTMLInputElement)?.value) || 0 this.monster.isUber = (document.getElementById('mon-is-uber') as HTMLInputElement)?.checked ?? false this.monster.hp = Number((document.getElementById('mon-hp') as HTMLInputElement).value) || 1 this.monster.maxHp = Number((document.getElementById('mon-max-hp') as HTMLInputElement).value) || 1 this.monster.dr = Number((document.getElementById('mon-dr') as HTMLInputElement).value) || 0 this.monster.ar = Number((document.getElementById('mon-ar') as HTMLInputElement).value) || 0 this.monster.dmgMin = Number((document.getElementById('mon-dmg-min') as HTMLInputElement).value) || 1 this.monster.dmgMax = Number((document.getElementById('mon-dmg-max') as HTMLInputElement).value) || 1 this.monster.block = Number((document.getElementById('mon-block') as HTMLInputElement).value) || 0 this.monster.resPhysical = Number((document.getElementById('mon-res-phys') as HTMLInputElement).value) || 0 this.monster.resFire = Number((document.getElementById('mon-res-fire') as HTMLInputElement).value) || 0 this.monster.resCold = Number((document.getElementById('mon-res-cold') as HTMLInputElement).value) || 0 this.monster.resLightning = Number((document.getElementById('mon-res-light') as HTMLInputElement).value) || 0 this.monster.resPoison = Number((document.getElementById('mon-res-poison') as HTMLInputElement).value) || 0 this.monster.resMagic = Number((document.getElementById('mon-res-magic') as HTMLInputElement).value) || 0 this.monster.flatDr = Number((document.getElementById('mon-flat-dr') as HTMLInputElement).value) || 0 this.monster.flatMdr = Number((document.getElementById('mon-flat-mdr') as HTMLInputElement).value) || 0 this.updateMonsterBadge() } const monsterInputIds = [ 'mon-tier', 'mon-posture', 'mon-drain-eff', 'mon-size', 'mon-regen', 'mon-is-uber', 'mon-hp', 'mon-max-hp', 'mon-dr', 'mon-ar', 'mon-dmg-min', 'mon-dmg-max', 'mon-block', 'mon-res-phys', 'mon-res-fire', 'mon-res-cold', 'mon-res-light', 'mon-res-poison', 'mon-res-magic', 'mon-flat-dr', 'mon-flat-mdr', ] for (const id of monsterInputIds) { const el = document.getElementById(id) el?.addEventListener('input', syncMonsterInputs) el?.addEventListener('change', syncMonsterInputs) } // Buttons document.getElementById('btn-attack')?.addEventListener('click', () => this.executeMeleeAttack()) document.getElementById('btn-fire')?.addEventListener('click', () => this.castFireSpell()) document.getElementById('btn-cold')?.addEventListener('click', () => this.castColdSpell()) document.getElementById('btn-light')?.addEventListener('click', () => this.castLightningSpell()) document.getElementById('btn-magic')?.addEventListener('click', () => this.castMagicSpell()) document.getElementById('btn-monster-attack')?.addEventListener('click', () => this.executeMonsterAttack()) document.getElementById('btn-auto-battle')?.addEventListener('click', () => this.toggleAutoBattle()) document.getElementById('btn-reset')?.addEventListener('click', () => this.resetCombat()) document.getElementById('btn-clear-log')?.addEventListener('click', () => { const container = document.getElementById('log-entries')! container.innerHTML = '' }) // Keyboard Shortcuts window.addEventListener('keydown', (e) => { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement) return if (e.key === ' ' || e.key === '1') { e.preventDefault() this.executeMeleeAttack() } else if (e.key === '2') { e.preventDefault() this.castFireSpell() } else if (e.key === '3') { e.preventDefault() this.castColdSpell() } else if (e.key === '4') { e.preventDefault() this.castLightningSpell() } else if (e.key === '5') { e.preventDefault() this.castMagicSpell() } else if (e.key === 'a' || e.key === 'A') { e.preventDefault() this.toggleAutoBattle() } else if (e.key === 'r' || e.key === 'R') { e.preventDefault() this.resetCombat() } }) } // --- Presets & Data Sync -------------------------------------------------- private applyPlayerPreset(preset: string) { if (preset === 'novice') { this.setPlayerForm({ class: 'Barbarian', level: 1, hp: 45, mana: 20, ar: 110, dr: 35, dmgMin: 2, dmgMax: 6, fire: 0, cold: 0, light: 0, poison: 0, magic: 0, block: 10, cs: 0, ds: 0, cb: 0, ow: 0, ll: 0, ml: 0, itd: false, defRed: 0, freezeBonus: 0, knockback: 0, difficulty: 'normal', flatDr: 0, flatMdr: 0, pmh: true, isMerc: false, conviction: 0, lowerRes: 0, minusLightRes: 0, minusFireRes: 0, minusColdRes: 0, minusPoisonRes: 0, slow: 0, hbt: 0, hcmtf: 0, flatDmg: 0, offWeaponEd: 0, statBonus: 0, }) } else if (preset === 'zealot') { this.setPlayerForm({ class: 'Paladin', level: 45, hp: 550, mana: 120, ar: 3800, dr: 2200, dmgMin: 45, dmgMax: 110, fire: 20, cold: 15, light: 40, poison: 0, magic: 0, block: 75, cs: 15, ds: 35, cb: 50, ow: 33, ll: 8, ml: 4, itd: true, defRed: 25, freezeBonus: 1, knockback: 0, difficulty: 'nightmare', flatDr: 15, flatMdr: 10, pmh: true, isMerc: false, conviction: 0, lowerRes: 0, minusLightRes: 0, minusFireRes: 0, minusColdRes: 0, minusPoisonRes: 0, slow: 50, hbt: 0, hcmtf: 0, flatDmg: 400, offWeaponEd: 300, statBonus: 150, }) } else if (preset === 'sorc_fire') { this.setPlayerForm({ class: 'Sorceress', level: 75, hp: 620, mana: 750, ar: 400, dr: 950, dmgMin: 10, dmgMax: 25, fire: 1450, cold: 0, light: 0, poison: 0, magic: 0, block: 20, cs: 0, ds: 0, cb: 0, ow: 0, ll: 0, ml: 0, itd: false, defRed: 0, freezeBonus: 0, knockback: 0, difficulty: 'hell', flatDr: 5, flatMdr: 25, pmh: true, isMerc: false, conviction: 85, lowerRes: 60, minusLightRes: 0, minusFireRes: 20, minusColdRes: 0, minusPoisonRes: 0, slow: 0, hbt: 0, hcmtf: 0, flatDmg: 0, offWeaponEd: 0, statBonus: 0, }) } else if (preset === 'sorc_orb') { this.setPlayerForm({ class: 'Sorceress', level: 80, hp: 700, mana: 800, ar: 500, dr: 1100, dmgMin: 12, dmgMax: 30, fire: 350, cold: 680, light: 0, poison: 0, magic: 0, block: 25, cs: 0, ds: 0, cb: 0, ow: 0, ll: 0, ml: 0, itd: false, defRed: 0, freezeBonus: 3, knockback: 0, difficulty: 'hell', flatDr: 8, flatMdr: 30, pmh: true, isMerc: false, conviction: 85, lowerRes: 0, minusLightRes: 0, minusFireRes: 0, minusColdRes: 35, minusPoisonRes: 0, slow: 0, hbt: 0, hcmtf: 0, flatDmg: 0, offWeaponEd: 0, statBonus: 0, }) } else if (preset === 'hell_slayer') { this.setPlayerForm({ class: 'Barbarian', level: 90, hp: 1650, mana: 260, ar: 11500, dr: 7500, dmgMin: 180, dmgMax: 420, fire: 80, cold: 60, light: 120, poison: 100, magic: 0, block: 75, cs: 28, ds: 65, cb: 75, ow: 50, ll: 15, ml: 8, itd: true, defRed: 50, freezeBonus: 2, knockback: 25, difficulty: 'hell', flatDr: 35, flatMdr: 25, pmh: true, isMerc: false, conviction: 0, lowerRes: 0, minusLightRes: 0, minusFireRes: 0, minusColdRes: 0, minusPoisonRes: 0, slow: 35, hbt: 2, hcmtf: 15, flatDmg: 120, offWeaponEd: 450, statBonus: 220, }) } } private setPlayerForm(p: any) { ;(document.getElementById('char-class') as HTMLSelectElement).value = p.class ;(document.getElementById('char-level') as HTMLInputElement).value = String(p.level) ;(document.getElementById('char-hp') as HTMLInputElement).value = String(p.hp) ;(document.getElementById('char-mana') as HTMLInputElement).value = String(p.mana) ;(document.getElementById('char-ar') as HTMLInputElement).value = String(p.ar) ;(document.getElementById('char-dr') as HTMLInputElement).value = String(p.dr) ;(document.getElementById('char-dmg-min') as HTMLInputElement).value = String(p.dmgMin) ;(document.getElementById('char-dmg-max') as HTMLInputElement).value = String(p.dmgMax) ;(document.getElementById('char-fire') as HTMLInputElement).value = String(p.fire) ;(document.getElementById('char-cold') as HTMLInputElement).value = String(p.cold) ;(document.getElementById('char-light') as HTMLInputElement).value = String(p.light) ;(document.getElementById('char-poison') as HTMLInputElement).value = String(p.poison) ;(document.getElementById('char-magic') as HTMLInputElement).value = String(p.magic) ;(document.getElementById('char-block') as HTMLInputElement).value = String(p.block) ;(document.getElementById('char-cs') as HTMLInputElement).value = String(p.cs ?? 0) ;(document.getElementById('char-ds') as HTMLInputElement).value = String(p.ds ?? 0) ;(document.getElementById('char-cb') as HTMLInputElement).value = String(p.cb ?? 0) ;(document.getElementById('char-ow') as HTMLInputElement).value = String(p.ow ?? 0) ;(document.getElementById('char-ll') as HTMLInputElement).value = String(p.ll ?? 0) ;(document.getElementById('char-ml') as HTMLInputElement).value = String(p.ml ?? 0) ;(document.getElementById('char-itd') as HTMLInputElement).checked = Boolean(p.itd) ;(document.getElementById('char-def-red') as HTMLInputElement).value = String(p.defRed ?? 0) ;(document.getElementById('char-freeze') as HTMLInputElement).value = String(p.freezeBonus ?? 0) ;(document.getElementById('char-knockback') as HTMLInputElement).value = String(p.knockback ?? 0) ;(document.getElementById('game-difficulty') as HTMLSelectElement).value = p.difficulty ?? 'normal' ;(document.getElementById('char-flat-dr') as HTMLInputElement).value = String(p.flatDr) ;(document.getElementById('char-flat-mdr') as HTMLInputElement).value = String(p.flatMdr) const charPmh = document.getElementById('char-pmh') as HTMLInputElement | null if (charPmh) charPmh.checked = Boolean(p.pmh ?? true) const charMerc = document.getElementById('char-is-merc') as HTMLInputElement | null if (charMerc) charMerc.checked = Boolean(p.isMerc ?? false) const charConv = document.getElementById('char-conviction') as HTMLInputElement | null if (charConv) charConv.value = String(p.conviction ?? 0) const charLr = document.getElementById('char-lower-res') as HTMLInputElement | null if (charLr) charLr.value = String(p.lowerRes ?? 0) const charMinL = document.getElementById('char-minus-light-res') as HTMLInputElement | null if (charMinL) charMinL.value = String(p.minusLightRes ?? 0) const charMinF = document.getElementById('char-minus-fire-res') as HTMLInputElement | null if (charMinF) charMinF.value = String(p.minusFireRes ?? 0) const charMinC = document.getElementById('char-minus-cold-res') as HTMLInputElement | null if (charMinC) charMinC.value = String(p.minusColdRes ?? 0) const charMinP = document.getElementById('char-minus-poison-res') as HTMLInputElement | null if (charMinP) charMinP.value = String(p.minusPoisonRes ?? 0) const charSlow = document.getElementById('char-slow') as HTMLInputElement | null if (charSlow) charSlow.value = String(p.slow ?? 0) const charHbt = document.getElementById('char-hbt') as HTMLInputElement | null if (charHbt) charHbt.value = String(p.hbt ?? 0) const charHcmtf = document.getElementById('char-hcmtf') as HTMLInputElement | null if (charHcmtf) charHcmtf.value = String(p.hcmtf ?? 0) const charFlatD = document.getElementById('char-flat-dmg') as HTMLInputElement | null if (charFlatD) charFlatD.value = String(p.flatDmg ?? 0) const charOffEd = document.getElementById('char-off-weapon-ed') as HTMLInputElement | null if (charOffEd) charOffEd.value = String(p.offWeaponEd ?? 0) const charStatB = document.getElementById('char-stat-bonus') as HTMLInputElement | null if (charStatB) charStatB.value = String(p.statBonus ?? 0) Object.assign(this.player, p) this.player.maxHp = p.hp this.player.maxMana = p.mana } private updateMonsterStatsFromTypeAndLevel() { const typeKey = (document.getElementById('mon-type') as HTMLSelectElement).value const level = Number((document.getElementById('mon-level') as HTMLInputElement).value) || 1 const t = MONSTER_TEMPLATES[typeKey] ?? MONSTER_TEMPLATES['fallen1']! const scale = computeMonsterScale(level) const hp = Math.max(1, Math.round(((t.baseMinHp + t.baseMaxHp) / 2) * (scale.hp / 100))) const dr = Math.max(1, Math.round(t.baseAc * (scale.ac / 100))) const ar = Math.max(1, Math.round(t.baseTh * (scale.th / 100))) const dmgMin = Math.max(1, Math.round(t.baseMinD * (scale.dm / 100))) const dmgMax = Math.max(dmgMin + 1, Math.round(t.baseMaxD * (scale.dm / 100))) this.monster.typeKey = t.id this.monster.name = t.name this.monster.category = t.category this.monster.level = level this.monster.hp = hp this.monster.maxHp = hp this.monster.dr = dr this.monster.ar = ar this.monster.dmgMin = dmgMin this.monster.dmgMax = dmgMax this.monster.block = t.blockPercent this.monster.resPhysical = t.resPhysical this.monster.resFire = t.resFire this.monster.resCold = t.resCold this.monster.resLightning = t.resLightning this.monster.resPoison = t.resPoison this.monster.resMagic = t.resMagic this.monster.color = t.color this.monster.size = t.size ?? 'medium' this.monster.regenRate = t.regenRate ?? 0 ;(document.getElementById('mon-hp') as HTMLInputElement).value = String(hp) ;(document.getElementById('mon-max-hp') as HTMLInputElement).value = String(hp) ;(document.getElementById('mon-dr') as HTMLInputElement).value = String(dr) ;(document.getElementById('mon-ar') as HTMLInputElement).value = String(ar) ;(document.getElementById('mon-dmg-min') as HTMLInputElement).value = String(dmgMin) ;(document.getElementById('mon-dmg-max') as HTMLInputElement).value = String(dmgMax) ;(document.getElementById('mon-block') as HTMLInputElement).value = String(t.blockPercent) ;(document.getElementById('mon-res-phys') as HTMLInputElement).value = String(t.resPhysical) ;(document.getElementById('mon-res-fire') as HTMLInputElement).value = String(t.resFire) ;(document.getElementById('mon-res-cold') as HTMLInputElement).value = String(t.resCold) ;(document.getElementById('mon-res-light') as HTMLInputElement).value = String(t.resLightning) ;(document.getElementById('mon-res-poison') as HTMLInputElement).value = String(t.resPoison) ;(document.getElementById('mon-res-magic') as HTMLInputElement).value = String(t.resMagic) const monSizeEl = document.getElementById('mon-size') as HTMLSelectElement | null if (monSizeEl) monSizeEl.value = this.monster.size const monRegenEl = document.getElementById('mon-regen') as HTMLInputElement | null if (monRegenEl) monRegenEl.value = String(this.monster.regenRate) this.monster.tier = (t.tier ?? 'normal') as TargetTier this.monster.drainEffectiveness = t.drainEffectiveness ?? 100 const monTierEl = document.getElementById('mon-tier') as HTMLSelectElement | null if (monTierEl) monTierEl.value = this.monster.tier const monDrainEl = document.getElementById('mon-drain-eff') as HTMLInputElement | null if (monDrainEl) monDrainEl.value = String(this.monster.drainEffectiveness) this.updateMonsterBadge() } private updateMonsterBadge() { const badge = document.getElementById('monster-badge')! const immunes: string[] = [] if (this.monster.resPhysical >= 100) immunes.push('物免') if (this.monster.resFire >= 100) immunes.push('火免') if (this.monster.resCold >= 100) immunes.push('冰免') if (this.monster.resLightning >= 100) immunes.push('电免') if (this.monster.resPoison >= 100) immunes.push('毒免') if (this.monster.resMagic >= 100) immunes.push('魔免') if (immunes.length > 0) { badge.className = 'tag immune' badge.textContent = immunes.join('·') } else { badge.className = 'tag res' badge.textContent = this.monster.category } } // --- Combat Action Triggers ----------------------------------------------- public executeMeleeAttack() { if (this.player.hp <= 0) return this.player.action = 'attack' this.player.actionTimer = 15 let pMin = this.player.dmgMin let pMax = this.player.dmgMax if (this.player.flatDmg > 0 || this.player.offWeaponEd > 0 || this.player.statBonus > 0) { const weaponCalc = calculatePhysicalWeaponDamage({ weaponBaseMin: pMin, weaponBaseMax: pMax, flatDamage: this.player.flatDmg, offWeaponEdPercent: this.player.offWeaponEd, statBonusPercent: this.player.statBonus, }) pMin = weaponCalc.finalMinDamage pMax = weaponCalc.finalMaxDamage } const result = calculateAttack( this.player.level, this.player.ar, { physicalMin: pMin, physicalMax: pMax, fire: this.player.fire, cold: this.player.cold, lightning: this.player.light, poison: this.player.poison, magic: this.player.magic, }, { level: this.monster.level, defense: this.monster.dr, blockPercent: this.monster.block, resPhysical: this.monster.resPhysical, resFire: this.monster.resFire, resCold: this.monster.resCold, resLightning: this.monster.resLightning, resPoison: this.monster.resPoison, resMagic: this.monster.resMagic, flatDamageReduction: this.monster.flatDr, flatMagicReduction: this.monster.flatMdr, currentHp: this.monster.hp, maxHp: this.monster.maxHp, tier: this.monster.tier, isRunning: this.monster.posture === 'run', drainEffectiveness: this.monster.drainEffectiveness, size: this.monster.size, regenRate: this.monster.regenRate, isUber: this.monster.isUber, }, { criticalStrikePercent: this.player.cs, deadlyStrikePercent: this.player.ds, crushingBlowPercent: this.player.cb, openWoundsPercent: this.player.ow, lifeLeechPercent: this.player.ll, manaLeechPercent: this.player.ml, ignoreTargetDefense: this.player.itd, targetDefenseReductionPercent: this.player.defRed, freezeBonus: this.player.freezeBonus, knockbackPercent: this.player.knockback, difficulty: this.player.difficulty, isSpell: false, isRanged: false, // PvE Depth mechanics convictionPenalty: this.player.conviction, lowerResPenalty: this.player.lowerRes, itemMinusFireRes: this.player.minusFireRes, itemMinusLightRes: this.player.minusLightRes, itemMinusColdRes: this.player.minusColdRes, itemMinusPoisonRes: this.player.minusPoisonRes, slowPercent: this.player.slow, hitBlindsTargetBonus: this.player.hbt, hitCausesFleePercent: this.player.hcmtf, preventMonsterHeal: this.player.pmh, attackerType: this.player.isMerc ? 'mercenary' : 'player', }, ) this.applyCombatResult(result, 'melee') } public castFireSpell() { if (this.player.hp <= 0) return this.player.action = 'cast' this.player.actionTimer = 16 const spellDmg = Math.round((this.player.fire > 0 ? this.player.fire * 1.5 : 45) + Math.random() * 20) const pX = this.canvas.width * 0.35 const pY = this.canvas.height * 0.52 const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 this.projectiles.push({ x: pX, y: pY - 20, targetX: mX, targetY: mY - 20, type: 'fire', progress: 0, speed: 0.08, onHit: () => { const result = calculateAttack( this.player.level, 0, { physicalMin: 0, physicalMax: 0, fire: spellDmg }, { level: this.monster.level, defense: this.monster.dr, blockPercent: this.monster.block, resFire: this.monster.resFire, flatMagicReduction: this.monster.flatMdr, currentHp: this.monster.hp, maxHp: this.monster.maxHp, tier: this.monster.tier, isRunning: this.monster.posture === 'run', size: this.monster.size, isUber: this.monster.isUber, }, { isSpell: true, difficulty: this.player.difficulty, convictionPenalty: this.player.conviction, lowerResPenalty: this.player.lowerRes, itemMinusFireRes: this.player.minusFireRes, }, ) this.applyCombatResult(result, 'fire') this.spawnExplosion(mX, mY - 20, '#ff5722', 20) }, }) } public castColdSpell() { if (this.player.hp <= 0) return this.player.action = 'cast' this.player.actionTimer = 16 const spellDmg = Math.round((this.player.cold > 0 ? this.player.cold * 1.6 : 38) + Math.random() * 15) const pX = this.canvas.width * 0.35 const pY = this.canvas.height * 0.52 const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 this.projectiles.push({ x: pX, y: pY - 20, targetX: mX, targetY: mY - 20, type: 'cold', progress: 0, speed: 0.07, onHit: () => { const result = calculateAttack( this.player.level, 0, { physicalMin: 0, physicalMax: 0, cold: spellDmg }, { level: this.monster.level, defense: this.monster.dr, blockPercent: this.monster.block, resCold: this.monster.resCold, flatMagicReduction: this.monster.flatMdr, currentHp: this.monster.hp, maxHp: this.monster.maxHp, tier: this.monster.tier, isRunning: this.monster.posture === 'run', size: this.monster.size, isUber: this.monster.isUber, }, { isSpell: true, difficulty: this.player.difficulty, convictionPenalty: this.player.conviction, lowerResPenalty: this.player.lowerRes, itemMinusColdRes: this.player.minusColdRes, }, ) this.applyCombatResult(result, 'cold') if (result.finalColdDamage > 0) { this.monster.chillTimer = 60 } this.spawnExplosion(mX, mY - 20, '#29b6f6', 24) }, }) } public castLightningSpell() { if (this.player.hp <= 0) return this.player.action = 'cast' this.player.actionTimer = 16 // Lightning has iconic wide damage range [1 .. High] const spellDmg = Math.round(1 + Math.random() * (this.player.light > 0 ? this.player.light * 2.5 : 90)) const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 const result = calculateAttack( this.player.level, 0, { physicalMin: 0, physicalMax: 0, lightning: spellDmg }, { level: this.monster.level, defense: this.monster.dr, blockPercent: this.monster.block, resLightning: this.monster.resLightning, flatMagicReduction: this.monster.flatMdr, currentHp: this.monster.hp, maxHp: this.monster.maxHp, tier: this.monster.tier, isRunning: this.monster.posture === 'run', size: this.monster.size, isUber: this.monster.isUber, }, { isSpell: true, difficulty: this.player.difficulty, convictionPenalty: this.player.conviction, lowerResPenalty: this.player.lowerRes, itemMinusLightRes: this.player.minusLightRes, }, ) this.applyCombatResult(result, 'light') this.spawnExplosion(mX, mY - 20, '#ffee58', 25) } public castMagicSpell() { if (this.player.hp <= 0) return this.player.action = 'cast' this.player.actionTimer = 16 const spellDmg = Math.round((this.player.magic > 0 ? this.player.magic * 1.8 : 55) + Math.random() * 25) const pX = this.canvas.width * 0.35 const pY = this.canvas.height * 0.52 const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 this.projectiles.push({ x: pX, y: pY - 20, targetX: mX, targetY: mY - 20, type: 'magic', progress: 0, speed: 0.09, onHit: () => { const result = calculateAttack( this.player.level, 0, { physicalMin: 0, physicalMax: 0, magic: spellDmg }, { level: this.monster.level, defense: this.monster.dr, blockPercent: this.monster.block, resMagic: this.monster.resMagic, flatMagicReduction: this.monster.flatMdr, currentHp: this.monster.hp, maxHp: this.monster.maxHp, tier: this.monster.tier, isRunning: this.monster.posture === 'run', size: this.monster.size, isUber: this.monster.isUber, }, { isSpell: true, difficulty: this.player.difficulty }, ) this.applyCombatResult(result, 'magic') this.spawnExplosion(mX, mY - 20, '#ab47bc', 20) }, }) } public executeMonsterAttack() { if (this.monster.hp <= 0 || this.monster.freezeTimer > 0 || this.monster.stunTimer > 0 || this.monster.fleeTimer > 0) return this.monster.action = 'attack' const slowFactor = 1 + (this.monster.slowPercent / 100) this.monster.actionTimer = Math.round(18 * slowFactor) // Monster strikes Player const result = calculateAttack( this.monster.level, this.monster.ar, { physicalMin: this.monster.dmgMin, physicalMax: this.monster.dmgMax, }, { level: this.player.level, defense: this.player.dr, blockPercent: this.player.block, flatDamageReduction: this.player.flatDr, flatMagicReduction: this.player.flatMdr, currentHp: this.player.hp, maxHp: this.player.maxHp, tier: 'player', }, { difficulty: this.player.difficulty, }, ) const pX = this.canvas.width * 0.35 const pY = this.canvas.height * 0.52 if (!result.isHit) { this.addFloatingText(pX, pY - 40, 'MISS', '#90a4ae') } else if (result.isBlocked) { this.addFloatingText(pX, pY - 40, '🛡️ BLOCKED', '#64b5f6') } else { this.player.hp = Math.max(0, Math.round((this.player.hp - result.totalDamage) * 10) / 10) this.player.hitFlash = 6 ;(document.getElementById('char-hp') as HTMLInputElement).value = String(this.player.hp) this.addFloatingText(pX, pY - 40, `-${result.totalDamage}`, '#e53935', 18) if (this.player.hp <= 0) { this.player.action = 'dead' this.addFloatingText(pX, pY - 60, 'YOU DIED', '#d32f2f', 22) } } this.appendLog(result.log, result.isHit ? (result.isBlocked ? 'blocked' : 'hit') : 'miss') } private applyCombatResult(result: CombatCalculationResult, kind: string) { const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 const pX = this.canvas.width * 0.35 const pY = this.canvas.height * 0.52 if (!result.isHit) { this.addFloatingText(mX, mY - 40, 'MISS', '#90a4ae') this.appendLog(result.log, 'miss') return } if (result.isBlocked) { this.addFloatingText(mX, mY - 40, '🛡️ BLOCKED', '#64b5f6') this.appendLog(result.log, 'blocked') return } // Apply Damage this.monster.hp = Math.max(0, Math.round((this.monster.hp - result.totalDamage) * 10) / 10) this.monster.hitFlash = 6 this.totalDamageDealt += result.totalDamage ;(document.getElementById('mon-hp') as HTMLInputElement).value = String(this.monster.hp) // Damage floating text let dmgColor = '#ffffff' if (kind === 'fire' || result.finalFireDamage > 0) dmgColor = '#ff7043' if (kind === 'cold' || result.finalColdDamage > 0) dmgColor = '#4fc3f7' if (kind === 'light' || result.finalLightningDamage > 0) dmgColor = '#ffee58' if (kind === 'magic' || result.finalMagicDamage > 0) dmgColor = '#ba68c8' this.addFloatingText(mX, mY - 40, `-${result.totalDamage}`, dmgColor, result.isCritical ? 20 : 16) // Critical & Deadly Strike distinction if (result.isCritical) { if (result.criticalTrigger === 'critical_strike') { this.addFloatingText(mX, mY - 60, '⚡ CRITICAL STRIKE! (2x)', '#ffd54f', 14) } else if (result.criticalTrigger === 'deadly_strike') { this.addFloatingText(mX, mY - 60, '⚔️ DEADLY STRIKE! (2x)', '#ffb74d', 14) } else { this.addFloatingText(mX, mY - 60, '⚡ CRITICAL!', '#ffd54f', 14) } } // Crushing Blow if (result.isCrushingBlow) { this.addFloatingText(mX, mY - 75, `💥 CRUSHING BLOW! (-${result.crushingBlowDamage})`, '#ef5350', 14) this.spawnExplosion(mX, mY - 20, '#ff1744', 24) } // Open Wounds if (result.isOpenWounds && result.openWoundsResult) { this.monster.openWoundsTimer = 200 this.monster.openWoundsDmgPerFrame = result.openWoundsResult.damagePerFrame this.addFloatingText(mX, mY - 90, '🩸 OPEN WOUNDS (8s)', '#d32f2f', 13) this.spawnExplosion(mX, mY - 20, '#b71c1c', 16) } // Life & Mana Leech if (result.lifeLeeched > 0) { this.player.hp = Math.min(this.player.maxHp, this.player.hp + result.lifeLeeched) ;(document.getElementById('char-hp') as HTMLInputElement).value = String(Math.round(this.player.hp)) this.addFloatingText(pX, pY - 45, `+${result.lifeLeeched} HP`, '#4caf50', 13) } if (result.manaLeeched > 0) { this.player.mana = Math.min(this.player.maxMana, this.player.mana + result.manaLeeched) ;(document.getElementById('char-mana') as HTMLInputElement).value = String(Math.round(this.player.mana)) this.addFloatingText(pX, pY - 60, `+${result.manaLeeched} MP`, '#42a5f5', 13) } // Freeze Target & Chilled if (result.freezeResult?.willFreeze) { this.monster.freezeTimer = result.freezeResult.durationFrames this.addFloatingText(mX, mY - 105, `❄️ FROZEN (${result.freezeResult.durationSeconds}s)`, '#80deea', 14) this.spawnExplosion(mX, mY - 20, '#80deea', 18) } else if (result.freezeResult?.isChilledOnly) { this.monster.chillTimer = result.freezeResult.durationFrames this.addFloatingText(mX, mY - 105, `❄️ CHILLED (${result.freezeResult.durationSeconds}s)`, '#81d4fa', 13) } // Knockback if (result.knockbackTriggered) { this.monster.knockbackOffset = 25 this.addFloatingText(mX, mY - 30, '💨 KNOCKBACK', '#b0bec5', 12) } // Hit recovery if (result.hitRecoveryTriggered) { this.monster.stunTimer = 25 this.addFloatingText(mX, mY - 120, '💫 FHR STUN', '#ffca28', 12) } // Resistance Break Floating Text if (result.resistanceBreakResults) { for (const [elem, brk] of Object.entries(result.resistanceBreakResults)) { if (brk.immunityBroken) { const name = elem === 'physical' ? '物' : elem === 'fire' ? '火' : elem === 'lightning' ? '电' : elem === 'cold' ? '冰' : '毒' this.addFloatingText(mX, mY - 135, `⚡ 破${name}免成功! (${brk.finalRes}%)`, '#ffd54f', 13) } } } // Prevent Monster Heal (PMH) if (result.pmhResult) { if (result.pmhResult.applied) { this.monster.pmhTimer = result.pmhResult.durationFrames this.addFloatingText(mX, mY - 150, '🚫 PMH 自愈阻断 (80分)', '#81c784', 13) } else if (this.player.pmh) { this.addFloatingText(mX, mY - 150, `🚫 PMH无效: ${result.pmhResult.reason}`, '#ef5350', 11) } } // Slows Target if (result.slowResult && result.slowResult.effectiveSlowPercent > 0) { this.monster.slowTimer = 150 this.monster.slowPercent = result.slowResult.effectiveSlowPercent this.addFloatingText(mX, mY - 120, `🐌 目标减速 -${result.slowResult.effectiveSlowPercent}%`, '#ffb74d', 13) } // Hit Blinds Target if (result.blindResult?.triggered) { this.monster.blindTimer = result.blindResult.durationFrames this.addFloatingText(mX, mY - 165, `👁️ 目标致盲 (${result.blindResult.durationSeconds}s)`, '#ba68c8', 13) this.spawnExplosion(mX, mY - 20, '#ab47bc', 14) } // Hit Causes Monster to Flee if (result.fleeResult?.triggered) { this.monster.fleeTimer = result.fleeResult.durationFrames this.addFloatingText(mX, mY - 180, '😱 恐吓逃跑 (5s)', '#ff8a65', 13) this.spawnExplosion(mX, mY - 20, '#ff7043', 14) } // Death Check if (this.monster.hp <= 0) { this.monster.action = 'dead' this.addFloatingText(mX, mY - 60, '💀 SLAIN', '#e53935', 22) const earnedXp = Math.round(50 * (this.monster.level / Math.max(1, this.player.level))) this.addFloatingText(mX, mY - 80, `+${earnedXp} EXP`, '#81c784', 13) } this.appendLog(result.log, result.isCritical ? 'crit' : 'hit') this.updateDpsMeter() } private toggleAutoBattle() { this.autoBattleActive = !this.autoBattleActive const btnLabel = document.getElementById('auto-battle-label')! if (this.autoBattleActive) { btnLabel.textContent = '⏸️ 停止对决' this.combatStartTime = performance.now() this.totalDamageDealt = 0 this.autoBattleInterval = window.setInterval(() => { if (this.monster.hp <= 0 || this.player.hp <= 0) { this.toggleAutoBattle() return } this.executeMeleeAttack() if (Math.random() < 0.6) { this.executeMonsterAttack() } }, 400) } else { btnLabel.textContent = '🔄 开启自动对决' if (this.autoBattleInterval) { clearInterval(this.autoBattleInterval) this.autoBattleInterval = null } } } public resetCombat() { this.player.hp = this.player.maxHp this.player.mana = this.player.maxMana this.player.action = 'idle' ;(document.getElementById('char-hp') as HTMLInputElement).value = String(this.player.hp) ;(document.getElementById('char-mana') as HTMLInputElement).value = String(this.player.mana) this.monster.hp = this.monster.maxHp this.monster.action = 'idle' this.monster.stunTimer = 0 this.monster.chillTimer = 0 this.monster.freezeTimer = 0 this.monster.openWoundsTimer = 0 this.monster.openWoundsDmgPerFrame = 0 this.monster.knockbackOffset = 0 this.monster.pmhTimer = 0 this.monster.blindTimer = 0 this.monster.fleeTimer = 0 this.monster.slowTimer = 0 this.monster.slowPercent = 0 ;(document.getElementById('mon-hp') as HTMLInputElement).value = String(this.monster.hp) this.floatingTexts = [] this.projectiles = [] this.totalDamageDealt = 0 this.combatStartTime = 0 this.updateDpsMeter() this.appendLog(['[重置]: 玩家与怪物恢复满生命值，所有受击硬直、流血、冻结与击退状态已清空。'], 'hit') } private updateDpsMeter() { const dpsEl = document.getElementById('stat-dps')! if (this.combatStartTime > 0) { const elapsed = (performance.now() - this.combatStartTime) / 1000 if (elapsed > 0.5) { const dps = this.totalDamageDealt / elapsed dpsEl.textContent = `DPS: ${dps.toFixed(1)} (累计: ${this.totalDamageDealt.toFixed(0)})` return } } dpsEl.textContent = `DPS: 0.0 (累计: ${this.totalDamageDealt.toFixed(0)})` } private appendLog(lines: readonly string[], style: 'hit' | 'miss' | 'blocked' | 'crit') { const container = document.getElementById('log-entries')! const item = document.createElement('div') item.className = `log-item ${style}` item.innerHTML = lines.map(line => `
${escapeHtml(line)}
`).join('') container.insertBefore(item, container.firstChild) // Keep max 80 entries while (container.children.length > 80) { container.removeChild(container.lastChild!) } } private addFloatingText(x: number, y: number, text: string, color: string, size = 15) { this.floatingTexts.push({ x: x + (Math.random() - 0.5) * 30, y: y + (Math.random() - 0.5) * 15, text, color, size, alpha: 1.0, vy: -1.2, life: 50, }) } private spawnExplosion(x: number, y: number, color: string, count = 16) { for (let i = 0; i < count; i++) { const angle = Math.random() * Math.PI * 2 const speed = 1.5 + Math.random() * 3.5 this.particles.push({ x, y, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, color, size: 2 + Math.random() * 3, life: 25, maxLife: 25, }) } } // --- Render Loop ---------------------------------------------------------- private startRenderLoop() { const loop = () => { this.update() this.render() requestAnimationFrame(loop) } requestAnimationFrame(loop) } private update() { // Player timers if (this.player.actionTimer > 0) { this.player.actionTimer -= 1 if (this.player.actionTimer === 0 && this.player.action !== 'dead') { this.player.action = 'idle' } } if (this.player.hitFlash > 0) this.player.hitFlash -= 1 // Monster timers if (this.monster.actionTimer > 0) { this.monster.actionTimer -= 1 if (this.monster.actionTimer === 0 && this.monster.action !== 'dead') { this.monster.action = 'idle' } } if (this.monster.hitFlash > 0) this.monster.hitFlash -= 1 if (this.monster.stunTimer > 0) this.monster.stunTimer -= 1 if (this.monster.chillTimer > 0) this.monster.chillTimer -= 1 if (this.monster.freezeTimer > 0) this.monster.freezeTimer -= 1 if (this.monster.knockbackOffset > 0) { this.monster.knockbackOffset = Math.max(0, this.monster.knockbackOffset - 1.5) } if (this.monster.pmhTimer > 0) this.monster.pmhTimer -= 1 if (this.monster.blindTimer > 0) this.monster.blindTimer -= 1 if (this.monster.fleeTimer > 0) this.monster.fleeTimer -= 1 if (this.monster.slowTimer > 0) { this.monster.slowTimer -= 1 if (this.monster.slowTimer === 0) this.monster.slowPercent = 0 } // Natural Monster Regeneration (blocked by OW or PMH) if (this.monster.hp > 0 && this.monster.hp < this.monster.maxHp && this.monster.regenRate > 0) { const regen = calculateMonsterRegeneration( this.monster.maxHp, this.monster.regenRate, this.monster.openWoundsTimer > 0, this.monster.pmhTimer > 0, ) if (regen.effectiveRegenPerFrame > 0) { this.monster.hp = Math.min(this.monster.maxHp, Math.round((this.monster.hp + regen.effectiveRegenPerFrame) * 100) / 100) const hpInput = document.getElementById('mon-hp') as HTMLInputElement | null if (hpInput) hpInput.value = String(Math.round(this.monster.hp)) } } // Open Wounds bleeding tick if (this.monster.openWoundsTimer > 0 && this.monster.hp > 0) { this.monster.openWoundsTimer -= 1 const tickDmg = this.monster.openWoundsDmgPerFrame this.monster.hp = Math.max(0, Math.round((this.monster.hp - tickDmg) * 10) / 10) const hpInput = document.getElementById('mon-hp') as HTMLInputElement | null if (hpInput) hpInput.value = String(Math.round(this.monster.hp)) const mX = this.canvas.width * 0.65 const mY = this.canvas.height * 0.52 // Visual tick every 25 frames (1 second in 25 fps game clock) if (this.monster.openWoundsTimer % 25 === 0) { const secDmg = Math.round(tickDmg * 25 * 10) / 10 this.addFloatingText(mX + (Math.random() - 0.5) * 20, mY - 35, `-${secDmg} 🩸`, '#d32f2f', 12) this.spawnExplosion(mX, mY - 20, '#b71c1c', 6) } if (this.monster.hp <= 0 && this.monster.action !== 'dead') { this.monster.action = 'dead' this.addFloatingText(mX, mY - 60, '💀 BLED TO DEATH', '#b71c1c', 22) } } // Update Floating Text for (let i = this.floatingTexts.length - 1; i >= 0; i--) { const ft = this.floatingTexts[i]! ft.y += ft.vy ft.life -= 1 ft.alpha = Math.max(0, ft.life / 50) if (ft.life <= 0) this.floatingTexts.splice(i, 1) } // Update Projectiles for (let i = this.projectiles.length - 1; i >= 0; i--) { const p = this.projectiles[i]! p.progress += p.speed p.x = p.x + (p.targetX - p.x) * p.speed * 2 p.y = p.y + (p.targetY - p.y) * p.speed * 2 if (p.progress >= 1 || Math.hypot(p.targetX - p.x, p.targetY - p.y) < 15) { p.onHit() this.projectiles.splice(i, 1) } } // Update Particles for (let i = this.particles.length - 1; i >= 0; i--) { const pt = this.particles[i]! pt.x += pt.vx pt.y += pt.vy pt.life -= 1 if (pt.life <= 0) this.particles.splice(i, 1) } } private render() { const ctx = this.ctx const w = this.canvas.width const h = this.canvas.height // Background ctx.fillStyle = '#0a0806' ctx.fillRect(0, 0, w, h) // Draw Isometric Duel Arena this.renderArenaGround(ctx, w, h) // Positions const pX = w * 0.35 const pY = h * 0.52 const mX = w * 0.65 const mY = h * 0.52 // Shadows this.renderShadow(ctx, pX, pY + 8, 28, 12) this.renderShadow(ctx, mX + this.monster.knockbackOffset, mY + 8, 32, 14) // Render Characters this.renderPlayerAvatar(ctx, pX, pY) this.renderMonsterAvatar(ctx, mX, mY) // Render Projectiles & Particles this.renderProjectiles(ctx) this.renderParticles(ctx) // Overhead Status Bars this.renderOverheadPlayerBar(ctx, pX, pY - 80) this.renderOverheadMonsterBar(ctx, mX + this.monster.knockbackOffset, mY - 85) // Floating combat text this.renderFloatingTexts(ctx) } private renderArenaGround(ctx: CanvasRenderingContext2D, w: number, h: number) { const cX = w * 0.5 const cY = h * 0.52 // Large outer rune diamond ctx.save() ctx.beginPath() ctx.moveTo(cX, cY - 140) ctx.lineTo(cX + 280, cY) ctx.lineTo(cX, cY + 140) ctx.lineTo(cX - 280, cY) ctx.closePath() ctx.fillStyle = '#14100c' ctx.fill() ctx.lineWidth = 3 ctx.strokeStyle = '#3d2f20' ctx.stroke() // Inner patterned ring ctx.beginPath() ctx.ellipse(cX, cY, 200, 95, 0, 0, Math.PI * 2) ctx.fillStyle = '#1a140f' ctx.fill() ctx.lineWidth = 1.5 ctx.strokeStyle = '#5a432b' ctx.stroke() // Runic circle lines ctx.beginPath() ctx.ellipse(cX, cY, 130, 60, 0, 0, Math.PI * 2) ctx.lineWidth = 1 ctx.strokeStyle = '#8c693a' ctx.stroke() // Isometric grid lines inside arena ctx.strokeStyle = '#271f16' ctx.lineWidth = 1 for (let x = -4; x <= 4; x++) { ctx.beginPath() ctx.moveTo(cX + x * 40, cY - 70 + Math.abs(x) * 15) ctx.lineTo(cX + x * 40, cY + 70 - Math.abs(x) * 15) ctx.stroke() } // Torch poles on corners this.renderTorch(ctx, cX - 250, cY) this.renderTorch(ctx, cX + 250, cY) this.renderTorch(ctx, cX, cY - 120) this.renderTorch(ctx, cX, cY + 120) ctx.restore() } private renderTorch(ctx: CanvasRenderingContext2D, x: number, y: number) { ctx.fillStyle = '#3a2b1c' ctx.fillRect(x - 3, y - 25, 6, 25) ctx.fillStyle = '#1c150e' ctx.fillRect(x - 6, y - 28, 12, 4) // Torch Fire Animation const flick = Math.sin(Date.now() * 0.01 + x) * 2 ctx.beginPath() ctx.arc(x, y - 32 + flick, 6, 0, Math.PI * 2) ctx.fillStyle = '#ff9800' ctx.fill() ctx.beginPath() ctx.arc(x, y - 34 + flick, 3, 0, Math.PI * 2) ctx.fillStyle = '#ffeb3b' ctx.fill() } private renderShadow(ctx: CanvasRenderingContext2D, x: number, y: number, rx: number, ry: number) { ctx.save() ctx.beginPath() ctx.ellipse(x, y, rx, ry, 0, 0, Math.PI * 2) ctx.fillStyle = 'rgba(0, 0, 0, 0.45)' ctx.fill() ctx.restore() } private renderPlayerAvatar(ctx: CanvasRenderingContext2D, x: number, y: number) { ctx.save() // Hit flash overlay if (this.player.hitFlash > 0) { ctx.filter = 'brightness(1.8) drop-shadow(0 0 8px rgba(255,50,50,0.8))' } const isAttacking = this.player.action === 'attack' const isCasting = this.player.action === 'cast' const isDead = this.player.action === 'dead' const breath = Math.sin(Date.now() * 0.004) * 2 if (isDead) { ctx.translate(x, y) ctx.rotate(-Math.PI / 2) ctx.fillStyle = '#555' ctx.fillRect(-15, -40, 30, 40) ctx.restore() return } // Body base ctx.translate(x, y + breath) // Cloak / Robes ctx.fillStyle = this.player.class === 'Sorceress' ? '#283593' : '#37474f' ctx.beginPath() ctx.moveTo(-16, 0) ctx.lineTo(16, 0) ctx.lineTo(10, -40) ctx.lineTo(-10, -40) ctx.closePath() ctx.fill() // Torso / Armour ctx.fillStyle = '#d4af37' ctx.fillRect(-9, -42, 18, 22) // Belt ctx.fillStyle = '#4e342e' ctx.fillRect(-9, -23, 18, 4) // Head ctx.fillStyle = '#ffcc80' ctx.beginPath() ctx.arc(0, -48, 8, 0, Math.PI * 2) ctx.fill() // Hair / Hood ctx.fillStyle = this.player.class === 'Sorceress' ? '#bf360c' : '#212121' ctx.beginPath() ctx.arc(0, -50, 8.5, Math.PI * 0.8, Math.PI * 2.2) ctx.fill() // Weapon / Staff ctx.save() if (isAttacking) { ctx.rotate(0.35) ctx.fillStyle = '#b0bec5' ctx.fillRect(10, -50, 4, 45) // Sword slash ctx.fillStyle = '#ffd54f' ctx.fillRect(6, -25, 12, 4) } else if (isCasting) { ctx.fillStyle = '#81d4fa' ctx.fillRect(8, -65, 3, 55) // Staff raised ctx.beginPath() ctx.arc(9.5, -67, 7, 0, Math.PI * 2) ctx.fillStyle = 'rgba(129, 212, 250, 0.6)' ctx.fill() } else { ctx.fillStyle = '#b0bec5' ctx.fillRect(8, -40, 3, 40) } ctx.restore() // Shield (if has block) if (this.player.block > 0) { ctx.fillStyle = '#cfd8dc' ctx.beginPath() ctx.moveTo(-18, -35) ctx.lineTo(-6, -35) ctx.lineTo(-8, -18) ctx.lineTo(-12, -12) ctx.lineTo(-16, -18) ctx.closePath() ctx.fill() ctx.strokeStyle = '#d4af37' ctx.lineWidth = 1.5 ctx.stroke() } ctx.restore() } private renderMonsterAvatar(ctx: CanvasRenderingContext2D, x: number, y: number) { ctx.save() const drawX = x + this.monster.knockbackOffset if (this.monster.hitFlash > 0) { ctx.filter = 'brightness(2.0) drop-shadow(0 0 10px rgba(255,30,30,0.9))' } else if (this.monster.freezeTimer > 0) { ctx.filter = 'drop-shadow(0 0 12px rgba(0,229,255,0.9)) hue-rotate(190deg) brightness(1.2)' } else if (this.monster.chillTimer > 0 || this.monster.slowTimer > 0) { ctx.filter = 'drop-shadow(0 0 8px rgba(33,150,243,0.8)) hue-rotate(180deg)' } else if (this.monster.blindTimer > 0) { ctx.filter = 'drop-shadow(0 0 8px rgba(171,71,188,0.8)) brightness(0.6)' } else if (this.monster.fleeTimer > 0) { ctx.filter = 'drop-shadow(0 0 8px rgba(255,112,67,0.8))' } else if (this.monster.openWoundsTimer > 0) { ctx.filter = 'drop-shadow(0 0 8px rgba(183,28,28,0.8))' } const isAttacking = this.monster.action === 'attack' const isDead = this.monster.action === 'dead' const isStunned = this.monster.stunTimer > 0 const breath = Math.sin(Date.now() * 0.005) * 2 if (isDead) { ctx.translate(drawX, y) ctx.rotate(Math.PI / 2) ctx.fillStyle = '#424242' ctx.fillRect(-15, -40, 30, 40) ctx.restore() return } ctx.translate(drawX, y + (isStunned ? -4 : breath)) if (this.monster.fleeTimer > 0) { ctx.scale(-1, 1) // Turn around in terror } // Monster Base Shape according to template const color = this.monster.color ctx.fillStyle = color if (this.monster.typeKey.startsWith('fallen')) { // Small hunched demon ctx.beginPath() ctx.ellipse(0, -22, 14, 18, -0.2, 0, Math.PI * 2) ctx.fill() // Horns ctx.fillStyle = '#212121' ctx.beginPath() ctx.moveTo(-8, -36); ctx.lineTo(-12, -44); ctx.lineTo(-4, -38) ctx.moveTo(4, -38); ctx.lineTo(8, -44); ctx.lineTo(6, -36) ctx.fill() // Small dagger ctx.fillStyle = '#90a4ae' ctx.fillRect(isAttacking ? -22 : -14, -26, 12, 3) } else if (this.monster.typeKey.startsWith('zombie')) { // Tall shambling corpse ctx.fillRect(-12, -48, 24, 45) ctx.fillStyle = '#33691e' ctx.beginPath() ctx.arc(0, -52, 10, 0, Math.PI * 2) ctx.fill() } else if (this.monster.typeKey === 'diablo' || this.monster.typeKey === 'baal') { // Huge boss figure ctx.beginPath() ctx.ellipse(0, -45, 26, 42, 0, 0, Math.PI * 2) ctx.fill() // Giant Horns ctx.fillStyle = '#212121' ctx.beginPath() ctx.moveTo(-16, -75); ctx.lineTo(-32, -95); ctx.lineTo(-12, -80) ctx.moveTo(12, -80); ctx.lineTo(32, -95); ctx.lineTo(16, -75) ctx.fill() // Glowing Eyes ctx.fillStyle = '#ffeb3b' ctx.beginPath() ctx.arc(-8, -70, 3, 0, Math.PI * 2) ctx.arc(8, -70, 3, 0, Math.PI * 2) ctx.fill() } else if (this.monster.typeKey === 'dummy') { // Wood target dummy ctx.fillStyle = '#8d6e63' ctx.fillRect(-6, -45, 12, 45) ctx.fillRect(-22, -38, 44, 10) ctx.beginPath() ctx.arc(0, -45, 12, 0, Math.PI * 2) ctx.fillStyle = '#d7ccc8' ctx.fill() ctx.strokeStyle = '#c62828' ctx.lineWidth = 2 ctx.stroke() } else { // Generic humanoid monster ctx.fillRect(-12, -42, 24, 40) ctx.beginPath() ctx.arc(0, -46, 9, 0, Math.PI * 2) ctx.fill() } // Frozen Ice Crystal Overlay if (this.monster.freezeTimer > 0 && !isDead) { ctx.save() ctx.fillStyle = 'rgba(128, 222, 234, 0.45)' ctx.strokeStyle = '#80deea' ctx.lineWidth = 2 ctx.beginPath() ctx.rect(-24, -68, 48, 72) ctx.fill() ctx.stroke() // Ice crack lines ctx.beginPath() ctx.moveTo(-14, -50); ctx.lineTo(-2, -36); ctx.lineTo(14, -46) ctx.moveTo(-2, -36); ctx.lineTo(-6, -18) ctx.moveTo(3, -28); ctx.lineTo(12, -14) ctx.strokeStyle = '#e0f7fa' ctx.lineWidth = 1.5 ctx.stroke() ctx.restore() } // Open Wounds Bleeding Aura if (this.monster.openWoundsTimer > 0 && !isDead) { ctx.save() ctx.fillStyle = '#d32f2f' const t = Date.now() * 0.008 for (let i = 0; i < 4; i++) { const dropY = ((t * 40 + i * 14) % 45) - 38 const dropX = (i % 2 === 0 ? 1 : -1) * (8 + i * 3) ctx.beginPath() ctx.arc(dropX, dropY, 2, 0, Math.PI * 2) ctx.fill() } ctx.restore() } ctx.restore() } private renderProjectiles(ctx: CanvasRenderingContext2D) { ctx.save() for (const p of this.projectiles) { ctx.beginPath() ctx.arc(p.x, p.y, 6, 0, Math.PI * 2) if (p.type === 'fire') { ctx.fillStyle = '#ff5722' ctx.shadowColor = '#ff9800' ctx.shadowBlur = 12 } else if (p.type === 'cold') { ctx.fillStyle = '#00e5ff' ctx.shadowColor = '#80d8ff' ctx.shadowBlur = 10 } else if (p.type === 'light') { ctx.fillStyle = '#ffff00' ctx.shadowColor = '#ffeb3b' ctx.shadowBlur = 12 } else { ctx.fillStyle = '#e040fb' ctx.shadowColor = '#ea80fc' ctx.shadowBlur = 12 } ctx.fill() } ctx.restore() } private renderParticles(ctx: CanvasRenderingContext2D) { ctx.save() for (const pt of this.particles) { ctx.beginPath() ctx.arc(pt.x, pt.y, pt.size, 0, Math.PI * 2) ctx.fillStyle = pt.color ctx.globalAlpha = Math.max(0, pt.life / pt.maxLife) ctx.fill() } ctx.restore() } private renderOverheadPlayerBar(ctx: CanvasRenderingContext2D, x: number, y: number) { const barW = 80 const barH = 7 // HP Bar ctx.fillStyle = '#1c150e' ctx.fillRect(x - barW / 2, y, barW, barH) const hpRatio = Math.max(0, Math.min(1, this.player.hp / this.player.maxHp)) ctx.fillStyle = '#d32f2f' ctx.fillRect(x - barW / 2, y, barW * hpRatio, barH) ctx.strokeStyle = '#4e342e' ctx.lineWidth = 1 ctx.strokeRect(x - barW / 2, y, barW, barH) // Mana Bar ctx.fillStyle = '#1c150e' ctx.fillRect(x - barW / 2, y + 8, barW, 4) const manaRatio = Math.max(0, Math.min(1, this.player.mana / this.player.maxMana)) ctx.fillStyle = '#1976d2' ctx.fillRect(x - barW / 2, y + 8, barW * manaRatio, 4) // Text Label ctx.font = '10px ui-monospace, monospace' ctx.fillStyle = '#fff' ctx.textAlign = 'center' ctx.fillText(`${this.player.class} (Lv${this.player.level})`, x, y - 5) ctx.fillStyle = '#ffcdd2' ctx.fillText(`${Math.round(this.player.hp)}/${this.player.maxHp}`, x, y + barH + 16) } private renderOverheadMonsterBar(ctx: CanvasRenderingContext2D, x: number, y: number) { const barW = 100 const barH = 8 // Status Badges (PMH, Slow, Blind, Flee, Frozen, Chill, OW) const badges: { text: string; color: string }[] = [] if (this.monster.pmhTimer > 0) badges.push({ text: '🚫PMH', color: '#81c784' }) if (this.monster.slowTimer > 0) badges.push({ text: `🐌-${this.monster.slowPercent}%`, color: '#ffb74d' }) if (this.monster.blindTimer > 0) badges.push({ text: '👁️BLIND', color: '#ba68c8' }) if (this.monster.fleeTimer > 0) badges.push({ text: '😱FLEE', color: '#ff8a65' }) if (this.monster.freezeTimer > 0) badges.push({ text: '❄️FROZEN', color: '#80deea' }) else if (this.monster.chillTimer > 0) badges.push({ text: '❄️CHILL', color: '#81d4fa' }) if (this.monster.openWoundsTimer > 0) badges.push({ text: '🩸OW', color: '#e53935' }) if (badges.length > 0) { ctx.font = 'bold 9px ui-monospace, monospace' let badgeX = x - (badges.length * 44) / 2 + 22 for (const b of badges) { ctx.fillStyle = 'rgba(0, 0, 0, 0.7)' ctx.fillRect(badgeX - 20, y - 22, 40, 13) ctx.fillStyle = b.color ctx.textAlign = 'center' ctx.fillText(b.text, badgeX, y - 12) badgeX += 44 } } // HP Bar ctx.fillStyle = '#1c150e' ctx.fillRect(x - barW / 2, y, barW, barH) const hpRatio = Math.max(0, Math.min(1, this.monster.hp / this.monster.maxHp)) ctx.fillStyle = '#c62828' ctx.fillRect(x - barW / 2, y, barW * hpRatio, barH) ctx.strokeStyle = '#5d4037' ctx.lineWidth = 1 ctx.strokeRect(x - barW / 2, y, barW, barH) // Text Label ctx.font = '11px ui-monospace, monospace' ctx.fillStyle = '#f0c070' ctx.textAlign = 'center' ctx.fillText(`${this.monster.name} Lv${this.monster.level}`, x, y - 5) ctx.font = '10px ui-monospace, monospace' ctx.fillStyle = '#ffcdd2' ctx.fillText(`${Math.round(this.monster.hp)}/${this.monster.maxHp}`, x, y + barH + 12) } private renderFloatingTexts(ctx: CanvasRenderingContext2D) { ctx.save() ctx.textAlign = 'center' for (const ft of this.floatingTexts) { ctx.font = `bold ${ft.size}px ui-monospace, monospace` ctx.globalAlpha = ft.alpha ctx.strokeStyle = '#000' ctx.lineWidth = 3 ctx.strokeText(ft.text, ft.x, ft.y) ctx.fillStyle = ft.color ctx.fillText(ft.text, ft.x, ft.y) } ctx.restore() } } function escapeHtml(str: string): string { return str.replace(/&/g, '&').replace(//g, '>') } // Start application when DOM is ready window.addEventListener('DOMContentLoaded', () => { new CombatArenaApp() })