秦汉
4 weeks ago
18 changed files with 1301 additions and 3 deletions
@ -0,0 +1 @@ |
|||
.gitnexus |
|||
@ -0,0 +1,9 @@ |
|||
node_modules/ |
|||
dist/ |
|||
build/ |
|||
tmp/ |
|||
temp/ |
|||
.cache/ |
|||
.env |
|||
bin/ |
|||
obj/ |
|||
@ -0,0 +1,40 @@ |
|||
using System.Linq; |
|||
using Build_God_Api.DB; |
|||
using Build_God_Api.Dto; |
|||
using Build_God_Api.Services; |
|||
using Microsoft.AspNetCore.Authorization; |
|||
using Microsoft.AspNetCore.Mvc; |
|||
|
|||
namespace Build_God_Api.Controllers |
|||
{ |
|||
[ApiController] |
|||
[Route("api/god/[controller]")]
|
|||
[Authorize] |
|||
public class BattleController( |
|||
IBattleService battleService, |
|||
ICharacterService characterService, |
|||
ICurrentUserService currentUserService |
|||
) : ControllerBase |
|||
{ |
|||
private readonly IBattleService _battleService = battleService; |
|||
private readonly ICharacterService _characterService = characterService; |
|||
private readonly ICurrentUserService _currentUserService = currentUserService; |
|||
|
|||
[HttpPost("challenge")] |
|||
public async Task<ActionResult<ChallengeMonsterResponse>> ChallengeMonster([FromBody] ChallengeMonsterRequest request) |
|||
{ |
|||
var characters = await _characterService.GetAllCharacters(); |
|||
var currentCharacter = characters |
|||
.Where(c => c.AccountId == _currentUserService.UserId) |
|||
.OrderByDescending(c => c.LastLogin) |
|||
.FirstOrDefault(); |
|||
|
|||
if (currentCharacter == null) |
|||
{ |
|||
return BadRequest(new { message = "请先创建角色" }); |
|||
} |
|||
|
|||
return await _battleService.ChallengeMonster(currentCharacter.Id, request.MonsterId); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
namespace Build_God_Api.Dto |
|||
{ |
|||
public class ChallengeMonsterRequest |
|||
{ |
|||
public int MonsterId { get; set; } |
|||
} |
|||
|
|||
public class ChallengeMonsterResponse |
|||
{ |
|||
public bool Success { get; set; } |
|||
public int MonsterId { get; set; } |
|||
public string MonsterName { get; set; } = ""; |
|||
public int MonsterHealth { get; set; } |
|||
public int MonsterMaxHealth { get; set; } |
|||
public int PlayerHealth { get; set; } |
|||
public int PlayerMaxHealth { get; set; } |
|||
public List<BattleRewardDto> Rewards { get; set; } = new(); |
|||
public string Message { get; set; } = ""; |
|||
} |
|||
|
|||
public class BattleRewardDto |
|||
{ |
|||
public string Type { get; set; } = ""; |
|||
public string ItemName { get; set; } = ""; |
|||
public int Count { get; set; } |
|||
} |
|||
|
|||
public class BattleLogDto |
|||
{ |
|||
public int Round { get; set; } |
|||
public bool IsPlayerAttack { get; set; } |
|||
public int Damage { get; set; } |
|||
public bool IsCritical { get; set; } |
|||
public string Description { get; set; } = ""; |
|||
} |
|||
} |
|||
@ -0,0 +1,247 @@ |
|||
using Build_God_Api.DB; |
|||
using Build_God_Api.Dto; |
|||
using Build_God_Api.Services.Game; |
|||
using SqlSugar; |
|||
using System.Linq; |
|||
|
|||
namespace Build_God_Api.Services |
|||
{ |
|||
public interface IBattleService |
|||
{ |
|||
Task<ChallengeMonsterResponse> ChallengeMonster(int characterId, int monsterId); |
|||
} |
|||
|
|||
public class BattleService( |
|||
ISqlSugarClient db, |
|||
ICurrentUserService currentUserService, |
|||
IBagService bagService, |
|||
ICharacterAttributeCalculateService calculateService |
|||
) : IBattleService |
|||
{ |
|||
private readonly ISqlSugarClient _db = db; |
|||
private readonly ICurrentUserService _currentUserService = currentUserService; |
|||
private readonly IBagService _bagService = bagService; |
|||
private readonly ICharacterAttributeCalculateService _calculateService = calculateService; |
|||
|
|||
public async Task<ChallengeMonsterResponse> ChallengeMonster(int characterId, int monsterId) |
|||
{ |
|||
var response = new ChallengeMonsterResponse(); |
|||
|
|||
try |
|||
{ |
|||
var character = await _db.Queryable<Character>().Where(c => c.Id == characterId).FirstAsync(); |
|||
if (character == null) |
|||
{ |
|||
response.Success = false; |
|||
response.Message = "角色不存在"; |
|||
return response; |
|||
} |
|||
|
|||
var attributes = await _calculateService.CalculateAttributesAsync(character); |
|||
|
|||
var monster = await _db.Queryable<Monster>().Where(m => m.Id == monsterId).FirstAsync(); |
|||
if (monster == null) |
|||
{ |
|||
response.Success = false; |
|||
response.Message = "怪物不存在"; |
|||
return response; |
|||
} |
|||
|
|||
var rewards = await _db.Queryable<MonsterReward>().Where(r => r.MonsterId == monsterId).ToListAsync(); |
|||
|
|||
var playerHealth = (int)character.CurrentHP; |
|||
var playerMaxHealth = (int)attributes.MaxHP; |
|||
var monsterHealth = monster.Health; |
|||
var monsterMaxHealth = monster.Health; |
|||
|
|||
var playerAttack = (int)attributes.Attack; |
|||
var playerDefend = (int)attributes.Defend; |
|||
var playerCriticalRate = attributes.CriticalRate; |
|||
|
|||
var monsterAttack = monster.Attack; |
|||
var monsterDefend = monster.Defense; |
|||
|
|||
var round = 0; |
|||
var maxRounds = 100; |
|||
|
|||
while (playerHealth > 0 && monsterHealth > 0 && round < maxRounds) |
|||
{ |
|||
round++; |
|||
|
|||
var playerDamage = CalculateDamage(playerAttack, monsterDefend, playerCriticalRate); |
|||
monsterHealth -= playerDamage; |
|||
|
|||
if (monsterHealth <= 0) break; |
|||
|
|||
var monsterDamage = CalculateDamage(monsterAttack, playerDefend, monster.CriticalRate); |
|||
playerHealth -= monsterDamage; |
|||
} |
|||
|
|||
response.MonsterId = monsterId; |
|||
response.MonsterName = monster.Name; |
|||
response.MonsterHealth = Math.Max(0, monsterHealth); |
|||
response.MonsterMaxHealth = monsterMaxHealth; |
|||
response.PlayerHealth = Math.Max(0, playerHealth); |
|||
response.PlayerMaxHealth = playerMaxHealth; |
|||
|
|||
if (monsterHealth <= 0) |
|||
{ |
|||
response.Success = true; |
|||
response.Message = "战斗胜利！"; |
|||
|
|||
foreach (var reward in rewards) |
|||
{ |
|||
var battleReward = await GrantReward(characterId, reward); |
|||
if (battleReward != null) |
|||
{ |
|||
response.Rewards.Add(battleReward); |
|||
} |
|||
} |
|||
|
|||
await UpdateMissionProgress(characterId, monsterId); |
|||
} |
|||
else |
|||
{ |
|||
response.Success = false; |
|||
response.Message = "战斗失败"; |
|||
} |
|||
|
|||
character.CurrentHP = Math.Max(0, playerHealth); |
|||
await _db.Updateable(character).ExecuteCommandAsync(); |
|||
|
|||
return response; |
|||
} |
|||
catch (Exception ex) |
|||
{ |
|||
Console.WriteLine($"ChallengeMonster error: {ex.Message}"); |
|||
response.Success = false; |
|||
response.Message = "战斗发生错误"; |
|||
return response; |
|||
} |
|||
} |
|||
|
|||
private int CalculateDamage(int attack, int defend, decimal criticalRate) |
|||
{ |
|||
var baseDamage = Math.Max(1, attack - defend); |
|||
|
|||
var random = Random.Shared.NextDouble(); |
|||
var isCritical = random < (double)criticalRate / 100; |
|||
|
|||
if (isCritical) |
|||
{ |
|||
baseDamage = (int)(baseDamage * 1.5); |
|||
} |
|||
|
|||
var variance = Random.Shared.Next(90, 111) / 100m; |
|||
return (int)(baseDamage * variance); |
|||
} |
|||
|
|||
private async Task<BattleRewardDto?> GrantReward(int characterId, MonsterReward reward) |
|||
{ |
|||
var battleReward = new BattleRewardDto(); |
|||
|
|||
switch (reward.Type) |
|||
{ |
|||
case RewardType.Pill: |
|||
case RewardType.Equipment: |
|||
var characterBag = await _db.Queryable<CharacterBag>() |
|||
.Where(b => b.CharacterId == characterId) |
|||
.FirstAsync(); |
|||
if (characterBag != null) |
|||
{ |
|||
await _bagService.AddItemToBag(characterBag.Id, (int)reward.Type, reward.ItemId, reward.Count); |
|||
} |
|||
battleReward.Type = reward.Type == RewardType.Pill ? "丹药" : "装备"; |
|||
battleReward.ItemName = reward.ItemName; |
|||
battleReward.Count = reward.Count; |
|||
break; |
|||
|
|||
case RewardType.Money: |
|||
await AddMoney(characterId, reward.Count); |
|||
battleReward.Type = "灵石"; |
|||
battleReward.ItemName = "灵石"; |
|||
battleReward.Count = reward.Count; |
|||
break; |
|||
} |
|||
|
|||
// 处理经验奖励（作为特殊处理：如果ItemName包含"经验"）
|
|||
if (reward.Type == RewardType.Money && reward.ItemName == "经验") |
|||
{ |
|||
await AddExperience(characterId, reward.Count); |
|||
battleReward.Type = "经验"; |
|||
battleReward.ItemName = "经验"; |
|||
battleReward.Count = reward.Count; |
|||
} |
|||
|
|||
return battleReward; |
|||
} |
|||
|
|||
private async Task AddExperience(int characterId, int amount) |
|||
{ |
|||
var character = await _db.Queryable<Character>().Where(c => c.Id == characterId).FirstAsync(); |
|||
if (character != null) |
|||
{ |
|||
character.CurrentExp += amount; |
|||
await _db.Updateable(character).ExecuteCommandAsync(); |
|||
} |
|||
} |
|||
|
|||
private async Task AddMoney(int characterId, int amount) |
|||
{ |
|||
var character = await _db.Queryable<Character>().Where(c => c.Id == characterId).FirstAsync(); |
|||
if (character != null) |
|||
{ |
|||
character.Money += amount; |
|||
await _db.Updateable(character).ExecuteCommandAsync(); |
|||
} |
|||
} |
|||
|
|||
private async Task UpdateMissionProgress(int characterId, int monsterId) |
|||
{ |
|||
var dailyMissions = await _db.Queryable<CharacterDailyMission>() |
|||
.Where(m => m.CharacterId == characterId && m.Status == DailyMissionStatus.InProgress) |
|||
.ToListAsync(); |
|||
|
|||
foreach (var dailyMission in dailyMissions) |
|||
{ |
|||
var missionProgresses = await _db.Queryable<MissionProgress>() |
|||
.Where(p => p.MissionId == dailyMission.MissionId && p.TargetType == ProgressTargetType.KillMonster) |
|||
.ToListAsync(); |
|||
|
|||
foreach (var progress in missionProgresses) |
|||
{ |
|||
if (progress.TargetItemId == monsterId) |
|||
{ |
|||
var characterProgress = await _db.Queryable<CharacterMissionProgress>() |
|||
.Where(cp => cp.CharacterId == characterId |
|||
&& cp.MissionId == dailyMission.MissionId |
|||
&& cp.MissionProgressId == progress.Id) |
|||
.FirstAsync(); |
|||
|
|||
if (characterProgress == null) |
|||
{ |
|||
characterProgress = new CharacterMissionProgress |
|||
{ |
|||
CharacterId = characterId, |
|||
MissionId = dailyMission.MissionId, |
|||
MissionProgressId = progress.Id, |
|||
CurrentCount = 1, |
|||
IsCompleted = 1 >= progress.TargetCount, |
|||
CreatedOn = DateTime.Now, |
|||
UpdatedOn = DateTime.Now |
|||
}; |
|||
await _db.Insertable(characterProgress).ExecuteCommandAsync(); |
|||
} |
|||
else |
|||
{ |
|||
characterProgress.CurrentCount++; |
|||
characterProgress.IsCompleted = characterProgress.CurrentCount >= progress.TargetCount; |
|||
characterProgress.UpdatedOn = DateTime.Now; |
|||
await _db.Updateable(characterProgress).ExecuteCommandAsync(); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
import http from './index' |
|||
|
|||
export interface MonsterDto { |
|||
id: number |
|||
name: string |
|||
description: string |
|||
health: number |
|||
attack: number |
|||
defense: number |
|||
criticalRate: number |
|||
level: number |
|||
type: number |
|||
icon?: string |
|||
rewards?: MonsterRewardDto[] |
|||
} |
|||
|
|||
export interface MonsterRewardDto { |
|||
id: number |
|||
monsterId: number |
|||
rewardType: number |
|||
itemId: number |
|||
itemName: string |
|||
count: number |
|||
} |
|||
|
|||
export interface ChallengeMonsterResponse { |
|||
success: boolean |
|||
monsterId: number |
|||
monsterName: string |
|||
monsterHealth: number |
|||
monsterMaxHealth: number |
|||
playerHealth: number |
|||
playerMaxHealth: number |
|||
rewards: BattleRewardDto[] |
|||
message: string |
|||
} |
|||
|
|||
export interface BattleRewardDto { |
|||
type: string |
|||
itemName: string |
|||
count: number |
|||
} |
|||
|
|||
export const monsterApi = { |
|||
getMonsterList: (): Promise<MonsterDto[]> => { |
|||
return http.get('/monster/all', {}) |
|||
}, |
|||
|
|||
getMonsterById: (id: number): Promise<MonsterDto> => { |
|||
return http.get(`/monster/${id}`) |
|||
}, |
|||
|
|||
challengeMonster: (monsterId: number): Promise<ChallengeMonsterResponse> => { |
|||
return http.post('/battle/challenge', { monsterId }) |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 760 B |
@ -0,0 +1,66 @@ |
|||
import { defineStore } from 'pinia' |
|||
import { ref } from 'vue' |
|||
import { monsterApi, type MonsterDto, type ChallengeMonsterResponse } from '@/api/monster' |
|||
|
|||
export const useMonsterStore = defineStore('monster', () => { |
|||
const monsters = ref<MonsterDto[]>([]) |
|||
const currentMonster = ref<MonsterDto | null>(null) |
|||
const lastBattleResult = ref<ChallengeMonsterResponse | null>(null) |
|||
const loading = ref(false) |
|||
|
|||
const fetchMonsters = async () => { |
|||
loading.value = true |
|||
try { |
|||
const data = await monsterApi.getMonsterList() |
|||
monsters.value = data |
|||
} catch (error) { |
|||
console.error('Failed to fetch monsters:', error) |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
const fetchMonster = async (id: number) => { |
|||
loading.value = true |
|||
try { |
|||
const data = await monsterApi.getMonsterById(id) |
|||
currentMonster.value = data |
|||
return data |
|||
} catch (error) { |
|||
console.error('Failed to fetch monster:', error) |
|||
return null |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
const challengeMonster = async (monsterId: number): Promise<ChallengeMonsterResponse | null> => { |
|||
loading.value = true |
|||
try { |
|||
const result = await monsterApi.challengeMonster(monsterId) |
|||
lastBattleResult.value = result |
|||
return result |
|||
} catch (error) { |
|||
console.error('Failed to challenge monster:', error) |
|||
return null |
|||
} finally { |
|||
loading.value = false |
|||
} |
|||
} |
|||
|
|||
const clearBattleResult = () => { |
|||
lastBattleResult.value = null |
|||
currentMonster.value = null |
|||
} |
|||
|
|||
return { |
|||
monsters, |
|||
currentMonster, |
|||
lastBattleResult, |
|||
loading, |
|||
fetchMonsters, |
|||
fetchMonster, |
|||
challengeMonster, |
|||
clearBattleResult |
|||
} |
|||
}) |
|||
@ -0,0 +1,451 @@ |
|||
<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 { ArrowLeft } from '@element-plus/icons-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 playerHealthPercent = computed(() => { |
|||
if (playerMaxHealth.value === 0) return 0 |
|||
return (playerHealth.value / playerMaxHealth.value) * 100 |
|||
}) |
|||
|
|||
const monsterHealthPercent = computed(() => { |
|||
if (monsterMaxHealth.value === 0) return 0 |
|||
return (monsterHealth.value / monsterMaxHealth.value) * 100 |
|||
}) |
|||
|
|||
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 = currentCharacter.value.maxHP |
|||
playerHealth.value = currentCharacter.value.currentHP |
|||
monsterMaxHealth.value = currentMonster.value.health |
|||
monsterHealth.value = 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 = currentCharacter.value.maxHP |
|||
playerHealth.value = currentCharacter.value.currentHP |
|||
} |
|||
|
|||
if (currentMonster.value) { |
|||
monsterMaxHealth.value = currentMonster.value.health |
|||
monsterHealth.value = currentMonster.value.health |
|||
} |
|||
} |
|||
}) |
|||
|
|||
onUnmounted(() => { |
|||
monsterStore.clearBattleResult() |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="battle-container"> |
|||
<div class="battle-header"> |
|||
<el-button :icon="ArrowLeft" circle @click="goBack" /> |
|||
<h2>战斗</h2> |
|||
</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"> |
|||
{{ monsterHealth }} / {{ monsterMaxHealth }} |
|||
</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"> |
|||
{{ playerHealth }} / {{ playerMaxHealth }} |
|||
</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> |
|||
</template> |
|||
|
|||
<style scoped lang="css"> |
|||
.battle-container { |
|||
padding: 20px; |
|||
min-height: 100vh; |
|||
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); |
|||
} |
|||
|
|||
.battle-header { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 16px; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.battle-header h2 { |
|||
color: #f8fafc; |
|||
margin: 0; |
|||
} |
|||
|
|||
.loading { |
|||
color: #64748b; |
|||
text-align: center; |
|||
padding: 60px 20px; |
|||
} |
|||
|
|||
.battle-area { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 40px 20px; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
border-radius: 16px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.combatant { |
|||
text-align: center; |
|||
flex: 1; |
|||
} |
|||
|
|||
.combatant-icon { |
|||
width: 100px; |
|||
height: 100px; |
|||
margin: 0 auto 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(255, 255, 255, 0.08); |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.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: #f59e0b; |
|||
font-size: 32px; |
|||
font-weight: 800; |
|||
padding: 0 24px; |
|||
} |
|||
|
|||
.battle-log { |
|||
background: rgba(0, 0, 0, 0.3); |
|||
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(0, 0, 0, 0.3); |
|||
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> |
|||
@ -0,0 +1,302 @@ |
|||
<script setup lang="ts"> |
|||
import { ref, computed, onMounted } from 'vue' |
|||
import { useRouter } from 'vue-router' |
|||
import { useMonsterStore } from '@/stores/monster' |
|||
import { useCharacterStore } from '@/stores/character' |
|||
import { ElMessage } from 'element-plus' |
|||
import defaultIcon from '@/assets/images/item-default.svg' |
|||
|
|||
const router = useRouter() |
|||
const monsterStore = useMonsterStore() |
|||
const characterStore = useCharacterStore() |
|||
|
|||
const getMonsterIcon = (iconName?: string) => { |
|||
if (!iconName) return defaultIcon |
|||
return `/src/assets/images/monster/${iconName}` |
|||
} |
|||
|
|||
const getMonsterTypeLabel = (type: number) => { |
|||
const labels: Record<number, string> = { |
|||
1: '普通', |
|||
2: '精英', |
|||
3: '首领' |
|||
} |
|||
return labels[type] || '普通' |
|||
} |
|||
|
|||
const getMonsterTypeClass = (type: number) => { |
|||
const classes: Record<number, string> = { |
|||
1: 'type-normal', |
|||
2: 'type-elite', |
|||
3: 'type-boss' |
|||
} |
|||
return classes[type] || 'type-normal' |
|||
} |
|||
|
|||
const playerLevel = computed(() => characterStore.currentCharacter?.levelId || 0) |
|||
|
|||
const canChallenge = (monster: { level: number }) => { |
|||
return playerLevel.value >= monster.level |
|||
} |
|||
|
|||
const handleChallenge = async (monster: { id: number; level: number }) => { |
|||
if (!canChallenge(monster)) { |
|||
ElMessage.warning('等级不足，无法挑战') |
|||
return |
|||
} |
|||
router.push(`/battle?id=${monster.id}`) |
|||
} |
|||
|
|||
onMounted(async () => { |
|||
await monsterStore.fetchMonsters() |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="monster-list-container"> |
|||
<div class="header"> |
|||
<h2>怪物挑战</h2> |
|||
<span class="player-level">等级: {{ playerLevel }}</span> |
|||
</div> |
|||
|
|||
<div v-if="monsterStore.loading" class="loading"> |
|||
加载中... |
|||
</div> |
|||
|
|||
<div v-else-if="monsterStore.monsters.length === 0" class="empty"> |
|||
暂无可挑战的怪物 |
|||
</div> |
|||
|
|||
<div v-else class="monster-grid"> |
|||
<div |
|||
v-for="monster in monsterStore.monsters" |
|||
:key="monster.id" |
|||
class="monster-card" |
|||
:class="{ disabled: !canChallenge(monster) }" |
|||
@click="handleChallenge(monster)" |
|||
> |
|||
<div class="monster-icon"> |
|||
<img :src="getMonsterIcon(monster.icon)" :alt="monster.name" /> |
|||
</div> |
|||
<div class="monster-info"> |
|||
<h3>{{ monster.name }}</h3> |
|||
<span class="monster-level">等级: {{ monster.level }}</span> |
|||
<span class="monster-type" :class="getMonsterTypeClass(monster.type)"> |
|||
{{ getMonsterTypeLabel(monster.type) }} |
|||
</span> |
|||
</div> |
|||
<div class="monster-stats"> |
|||
<div class="stat"> |
|||
<span class="label">生命</span> |
|||
<span class="value">{{ monster.health }}</span> |
|||
</div> |
|||
<div class="stat"> |
|||
<span class="label">攻击</span> |
|||
<span class="value">{{ monster.attack }}</span> |
|||
</div> |
|||
<div class="stat"> |
|||
<span class="label">防御</span> |
|||
<span class="value">{{ monster.defense }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="monster-rewards" v-if="monster.rewards && monster.rewards.length > 0"> |
|||
<span class="reward-label">击杀奖励:</span> |
|||
<span |
|||
v-for="reward in monster.rewards" |
|||
:key="reward.id" |
|||
class="reward-item" |
|||
> |
|||
{{ reward.itemName }} ×{{ reward.count }} |
|||
</span> |
|||
</div> |
|||
<div class="challenge-hint"> |
|||
{{ canChallenge(monster) ? '点击挑战' : '等级不足' }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="css"> |
|||
.monster-list-container { |
|||
padding: 20px; |
|||
min-height: 100vh; |
|||
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
.header h2 { |
|||
color: #f8fafc; |
|||
margin: 0; |
|||
font-size: 24px; |
|||
} |
|||
|
|||
.player-level { |
|||
color: #94a3b8; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.loading, |
|||
.empty { |
|||
color: #64748b; |
|||
text-align: center; |
|||
padding: 60px 20px; |
|||
} |
|||
|
|||
.monster-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
|||
gap: 16px; |
|||
} |
|||
|
|||
.monster-card { |
|||
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); |
|||
border: 1px solid rgba(255, 255, 255, 0.08); |
|||
border-radius: 12px; |
|||
padding: 20px; |
|||
cursor: pointer; |
|||
transition: all 0.2s ease; |
|||
} |
|||
|
|||
.monster-card:hover { |
|||
transform: translateY(-2px); |
|||
border-color: rgba(139, 92, 246, 0.5); |
|||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
.monster-card.disabled { |
|||
opacity: 0.5; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.monster-card.disabled:hover { |
|||
transform: none; |
|||
border-color: rgba(255, 255, 255, 0.08); |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.monster-icon { |
|||
width: 80px; |
|||
height: 80px; |
|||
margin: 0 auto 16px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(255, 255, 255, 0.04); |
|||
border-radius: 12px; |
|||
} |
|||
|
|||
.monster-icon img { |
|||
width: 60px; |
|||
height: 60px; |
|||
object-fit: contain; |
|||
} |
|||
|
|||
.monster-info { |
|||
text-align: center; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.monster-info h3 { |
|||
color: #f8fafc; |
|||
margin: 0 0 8px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.monster-level { |
|||
color: #94a3b8; |
|||
font-size: 14px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.monster-type { |
|||
display: inline-block; |
|||
padding: 2px 8px; |
|||
border-radius: 4px; |
|||
font-size: 12px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.type-normal { |
|||
background-color: #475569; |
|||
color: #e2e8f0; |
|||
} |
|||
|
|||
.type-elite { |
|||
background-color: #7c3aed; |
|||
color: #fff; |
|||
} |
|||
|
|||
.type-boss { |
|||
background-color: #dc2626; |
|||
color: #fff; |
|||
} |
|||
|
|||
.monster-stats { |
|||
display: flex; |
|||
justify-content: center; |
|||
gap: 16px; |
|||
margin: 12px 0; |
|||
padding: 12px 0; |
|||
border-top: 1px solid rgba(255, 255, 255, 0.08); |
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.08); |
|||
} |
|||
|
|||
.stat { |
|||
text-align: center; |
|||
} |
|||
|
|||
.stat .label { |
|||
display: block; |
|||
color: #64748b; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.stat .value { |
|||
display: block; |
|||
color: #f8fafc; |
|||
font-size: 16px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.monster-rewards { |
|||
margin-top: 12px; |
|||
padding-top: 12px; |
|||
border-top: 1px solid rgba(255, 255, 255, 0.08); |
|||
} |
|||
|
|||
.reward-label { |
|||
display: block; |
|||
color: #64748b; |
|||
font-size: 12px; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.reward-item { |
|||
display: inline-block; |
|||
color: #22c55e; |
|||
font-size: 12px; |
|||
margin-right: 8px; |
|||
background: rgba(34, 197, 94, 0.1); |
|||
padding: 2px 6px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.challenge-hint { |
|||
margin-top: 12px; |
|||
text-align: center; |
|||
color: #8b5cf6; |
|||
font-size: 14px; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.monster-card.disabled .challenge-hint { |
|||
color: #ef4444; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue