You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
12 KiB
506 lines
12 KiB
<script setup lang="ts">
|
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useMonsterStore } from '@/stores/monster'
|
|
import { useCharacterStore } from '@/stores/character'
|
|
import { ElMessage } from 'element-plus'
|
|
import Particles from '@/components/Particles/Particles.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const monsterStore = useMonsterStore()
|
|
const characterStore = useCharacterStore()
|
|
|
|
const monsterId = computed(() => parseInt(route.query.id as string))
|
|
|
|
const playerHealth = ref(0)
|
|
const playerMaxHealth = ref(0)
|
|
const monsterHealth = ref(0)
|
|
const monsterMaxHealth = ref(0)
|
|
const battleLog = ref<{ round: number; text: string; isPlayer: boolean }[]>([])
|
|
const isFighting = ref(false)
|
|
const battleResult = ref<'win' | 'lose' | null>(null)
|
|
const rewards = ref<{ type: string; itemName: string; count: number }[]>([])
|
|
|
|
const formatBattleStat = (value: number) => Math.floor(value)
|
|
|
|
const toHealthPercent = (current: number, max: number) => {
|
|
if (max <= 0) return 0
|
|
const ratio = current / max
|
|
return Math.min(100, Math.max(0, Math.round(ratio * 100)))
|
|
}
|
|
|
|
const playerHealthPercent = computed(() =>
|
|
toHealthPercent(playerHealth.value, playerMaxHealth.value)
|
|
)
|
|
|
|
const monsterHealthPercent = computed(() =>
|
|
toHealthPercent(monsterHealth.value, monsterMaxHealth.value)
|
|
)
|
|
|
|
const playerHealthDisplay = computed(
|
|
() => `${formatBattleStat(playerHealth.value)} / ${formatBattleStat(playerMaxHealth.value)}`
|
|
)
|
|
|
|
const monsterHealthDisplay = computed(
|
|
() => `${formatBattleStat(monsterHealth.value)} / ${formatBattleStat(monsterMaxHealth.value)}`
|
|
)
|
|
|
|
const currentCharacter = computed(() => characterStore.currentCharacter)
|
|
const currentMonster = computed(() => monsterStore.currentMonster)
|
|
|
|
const getMonsterIcon = (iconName?: string) => {
|
|
if (!iconName) return '/src/assets/images/item-default.svg'
|
|
return `/src/assets/images/monster/${iconName}`
|
|
}
|
|
|
|
const calculateDamage = (attack: number, defend: number, criticalRate: number): { damage: number; isCritical: boolean } => {
|
|
const baseDamage = Math.max(1, attack - defend)
|
|
const random = Math.random()
|
|
const isCritical = random < criticalRate / 100
|
|
const damage = isCritical ? Math.floor(baseDamage * 1.5) : baseDamage
|
|
const variance = (90 + Math.floor(Math.random() * 21)) / 100
|
|
return { damage: Math.floor(damage * variance), isCritical }
|
|
}
|
|
|
|
const startBattle = async () => {
|
|
if (!currentMonster.value || !currentCharacter.value) {
|
|
ElMessage.error('数据加载中...')
|
|
return
|
|
}
|
|
|
|
isFighting.value = true
|
|
battleResult.value = null
|
|
battleLog.value = []
|
|
rewards.value = []
|
|
|
|
playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
|
|
playerHealth.value = Math.floor(currentCharacter.value.currentHP)
|
|
monsterMaxHealth.value = Math.floor(currentMonster.value.health)
|
|
monsterHealth.value = Math.floor(currentMonster.value.health)
|
|
|
|
const playerAttack = currentCharacter.value.attack
|
|
const playerDefend = currentCharacter.value.defend
|
|
const playerCriticalRate = currentCharacter.value.criticalRate
|
|
const monsterAttack = currentMonster.value.attack
|
|
const monsterDefend = currentMonster.value.defense
|
|
|
|
let round = 0
|
|
const maxRounds = 100
|
|
|
|
const fight = () => {
|
|
if (battleResult.value !== null) return
|
|
|
|
round++
|
|
|
|
// 玩家攻击
|
|
const playerResult = calculateDamage(playerAttack, monsterDefend, playerCriticalRate)
|
|
monsterHealth.value = Math.max(0, monsterHealth.value - playerResult.damage)
|
|
battleLog.value.push({
|
|
round,
|
|
text: `你${playerResult.isCritical ? '暴击' : '攻击'}造成 ${playerResult.damage} 伤害`,
|
|
isPlayer: true
|
|
})
|
|
|
|
if (monsterHealth.value <= 0) {
|
|
battleResult.value = 'win'
|
|
finishBattle()
|
|
return
|
|
}
|
|
|
|
// 怪物攻击
|
|
const monsterResult = calculateDamage(monsterAttack, playerDefend, currentMonster.value.criticalRate)
|
|
playerHealth.value = Math.max(0, playerHealth.value - monsterResult.damage)
|
|
battleLog.value.push({
|
|
round,
|
|
text: `怪物攻击造成 ${monsterResult.damage} 伤害`,
|
|
isPlayer: false
|
|
})
|
|
|
|
if (playerHealth.value <= 0) {
|
|
battleResult.value = 'lose'
|
|
finishBattle()
|
|
return
|
|
}
|
|
|
|
if (round < maxRounds) {
|
|
setTimeout(fight, 800)
|
|
}
|
|
}
|
|
|
|
setTimeout(fight, 500)
|
|
}
|
|
|
|
const finishBattle = async () => {
|
|
if (!currentMonster.value) return
|
|
|
|
const result = await monsterStore.challengeMonster(currentMonster.value.id)
|
|
|
|
if (result) {
|
|
rewards.value = result.rewards || []
|
|
|
|
if (result.success) {
|
|
ElMessage.success('战斗胜利！')
|
|
} else {
|
|
ElMessage.warning('战斗失败')
|
|
}
|
|
|
|
// 刷新角色数据
|
|
await characterStore.fetchCharacters()
|
|
}
|
|
|
|
isFighting.value = false
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.push('/monster-list')
|
|
}
|
|
|
|
const retry = () => {
|
|
battleResult.value = null
|
|
battleLog.value = []
|
|
rewards.value = []
|
|
startBattle()
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (monsterId.value) {
|
|
await monsterStore.fetchMonster(monsterId.value)
|
|
|
|
if (currentCharacter.value) {
|
|
playerMaxHealth.value = Math.floor(currentCharacter.value.maxHP)
|
|
playerHealth.value = Math.floor(currentCharacter.value.currentHP)
|
|
}
|
|
|
|
if (currentMonster.value) {
|
|
monsterMaxHealth.value = Math.floor(currentMonster.value.health)
|
|
monsterHealth.value = Math.floor(currentMonster.value.health)
|
|
}
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
monsterStore.clearBattleResult()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="battle-page">
|
|
<Particles :particle-count="50" :particle-colors="['#ffffff', '#aaaaaa']" class="particles-bg" />
|
|
<div class="page-container">
|
|
<div class="page-header">
|
|
<span class="back-btn" @click="goBack">← 返回</span>
|
|
<span class="title">战斗</span>
|
|
<span class="header-placeholder"></span>
|
|
</div>
|
|
|
|
<div v-if="!currentMonster || !currentCharacter" class="loading">
|
|
加载中...
|
|
</div>
|
|
|
|
<template v-else>
|
|
<!-- 战斗区域 -->
|
|
<div class="battle-area">
|
|
<!-- 怪物 -->
|
|
<div class="combatant monster">
|
|
<div class="combatant-icon">
|
|
<img :src="getMonsterIcon(currentMonster.icon)" :alt="currentMonster.name" />
|
|
</div>
|
|
<div class="combatant-name">{{ currentMonster.name }}</div>
|
|
<el-progress
|
|
:percentage="monsterHealthPercent"
|
|
:stroke-width="12"
|
|
:color="monsterHealthPercent > 30 ? '#ef4444' : '#dc2626'"
|
|
/>
|
|
<div class="health-text">
|
|
{{ monsterHealthDisplay }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VS -->
|
|
<div class="vs">VS</div>
|
|
|
|
<!-- 玩家 -->
|
|
<div class="combatant player">
|
|
<div class="combatant-icon">
|
|
<img src="/src/assets/images/character.svg" :alt="currentCharacter.name" />
|
|
</div>
|
|
<div class="combatant-name">{{ currentCharacter.name }}</div>
|
|
<el-progress
|
|
:percentage="playerHealthPercent"
|
|
:stroke-width="12"
|
|
:color="playerHealthPercent > 30 ? '#22c55e' : '#ef4444'"
|
|
/>
|
|
<div class="health-text">
|
|
{{ playerHealthDisplay }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 战斗日志 -->
|
|
<div class="battle-log">
|
|
<div
|
|
v-for="(log, index) in battleLog"
|
|
:key="index"
|
|
class="log-item"
|
|
:class="{ player: log.isPlayer }"
|
|
>
|
|
<span class="round">第{{ log.round }}回合</span>
|
|
<span class="text">{{ log.text }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 结果区域 -->
|
|
<div v-if="battleResult" class="battle-result">
|
|
<div class="result-title" :class="{ win: battleResult === 'win', lose: battleResult === 'lose' }">
|
|
{{ battleResult === 'win' ? '战斗胜利！' : '战斗失败' }}
|
|
</div>
|
|
|
|
<div v-if="battleResult === 'win' && rewards.length > 0" class="rewards">
|
|
<h3>获得奖励</h3>
|
|
<div class="reward-list">
|
|
<div v-for="reward in rewards" :key="reward.itemName" class="reward-item">
|
|
<span class="reward-type">{{ reward.type }}</span>
|
|
<span class="reward-name">{{ reward.itemName }}</span>
|
|
<span class="reward-count">×{{ reward.count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result-actions">
|
|
<el-button @click="goBack">返回</el-button>
|
|
<el-button type="primary" @click="retry">再战</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 开始战斗按钮 -->
|
|
<div v-if="!battleResult && !isFighting" class="start-battle">
|
|
<el-button type="danger" size="large" @click="startBattle">
|
|
开始战斗
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="css">
|
|
.battle-page {
|
|
min-height: 100vh;
|
|
background: #000000;
|
|
padding: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.particles-bg {
|
|
position: fixed !important;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
|
|
.page-container {
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.back-btn {
|
|
color: #666666;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.title {
|
|
color: #ffffff;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.header-placeholder {
|
|
width: 60px;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
color: #666666;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.battle-area {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24px 12px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.combatant {
|
|
text-align: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.combatant-icon {
|
|
width: 88px;
|
|
height: 88px;
|
|
margin: 0 auto 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.combatant-icon img {
|
|
width: 70px;
|
|
height: 70px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.combatant-name {
|
|
color: #f8fafc;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.health-text {
|
|
color: #94a3b8;
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.vs {
|
|
color: #ff8844;
|
|
font-size: 1.4rem;
|
|
font-weight: 800;
|
|
padding: 0 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.battle-log {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.log-item {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.log-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.log-item .round {
|
|
color: #64748b;
|
|
font-size: 12px;
|
|
min-width: 70px;
|
|
}
|
|
|
|
.log-item .text {
|
|
color: #f8fafc;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.log-item.player .text {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.battle-result {
|
|
text-align: center;
|
|
padding: 24px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.result-title.win {
|
|
color: #22c55e;
|
|
}
|
|
|
|
.result-title.lose {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.rewards {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.rewards h3 {
|
|
color: #f8fafc;
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.reward-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.reward-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px;
|
|
background: rgba(34, 197, 94, 0.1);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.reward-type {
|
|
color: #22c55e;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.reward-name {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.reward-count {
|
|
color: #22c55e;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.result-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.start-battle {
|
|
text-align: center;
|
|
}
|
|
</style>
|