Compare commits
No commits in common. "bab629a29ea94a71ebf8dfb7bfd076b1e05b45c9" and "d56da176c84dc6adebba3e36e24236b0167c19e1" have entirely different histories.
bab629a29e
...
d56da176c8
|
|
@ -190,27 +190,3 @@ replay_pid*
|
|||
# Go workspace file
|
||||
go.work
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
|
|
@ -1,121 +0,0 @@
|
|||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775837013
|
||||
- [2026-04-11 00:03:33]
|
||||
- **执行原因**: 用户咨询是否可用 Node + TypeScript + Vue + WebGL 实现 PSP《火焰气息3》风格 RPG。
|
||||
- **执行过程**:
|
||||
1. 评估目标玩法与技术栈匹配度（回合制战斗、场景探索、UI 系统、存档等）。
|
||||
2. 给出可实现性结论、核心风险与分阶段落地建议。
|
||||
3. 按项目规范记录本次会话任务摘要到 docs/tasks。
|
||||
- **执行结果**: 结论为可实现，建议以 Web 平台复刻“风格与机制”而非原作内容，并采用分阶段 MVP 路线推进。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775837411
|
||||
- [2026-04-11 00:10:11]
|
||||
- **执行原因**: 用户要求先做《火焰气息3》风格 RPG 的简要实施规划。
|
||||
- **执行过程**:
|
||||
1. 按技术栈（Node/TypeScript/Vue/WebGL）拆分客户端、渲染、数据驱动、工具链与存档模块。
|
||||
2. 设计分阶段里程碑（MVP 到可扩展版本）与每阶段验收标准。
|
||||
3. 汇总风险与优先级，给出先做什么、后做什么的执行顺序。
|
||||
- **执行结果**: 形成一套可直接启动开发的简明路线图，优先保证可玩闭环，再逐步增加内容复杂度。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775837632
|
||||
- [2026-04-11 00:13:52]
|
||||
- **执行原因**: 用户要求生成“计划清单.md”用于 BOF3 风格 RPG 项目推进。
|
||||
- **执行过程**:
|
||||
1. 依据既定路线图整理里程碑与勾选式任务。
|
||||
2. 在仓库根目录创建计划清单.md，覆盖初始化、探索、战斗、成长存档、打磨与验收标准。
|
||||
3. 补充持续风险跟踪项，便于后续迭代管理。
|
||||
- **执行结果**: 已生成可直接执行的《计划清单.md》，可作为当前项目任务看板使用。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775838708
|
||||
- [2026-04-11 00:31:48]
|
||||
- **执行原因**: 用户要求“先帮忙做一点”，期望先落地 BOF3 风格 RPG 的技术基础。
|
||||
- **执行过程**:
|
||||
1. 初始化 Vue3 + TypeScript + Vite 项目骨架并同步到仓库。
|
||||
2. 新增 Three.js 最小场景组件、游戏循环模块、状态面板与基础配置文件。
|
||||
3. 安装依赖并修复 TypeScript 构建问题，完成生产构建验证。
|
||||
- **执行结果**: 项目已可运行并可构建，页面可显示基础 3D 场景与 RPG 调试面板，作为后续探索/战斗系统开发起点。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775839250
|
||||
- [2026-04-11 00:40:50]
|
||||
- **执行原因**: 用户要求“继续完成”，希望在现有骨架上推进可玩功能。
|
||||
- **执行过程**:
|
||||
1. 新增输入系统与共享游戏状态，支持键盘移动与状态同步展示。
|
||||
2. 扩展 Three.js 场景逻辑，加入角色移动、边界与障碍碰撞、区域切换、传送点占位和随机遇敌计量。
|
||||
3. 更新状态面板为实时数据显示，并执行构建验证确保可编译运行。
|
||||
- **执行结果**: 已完成探索层 MVP，玩家可在 3D 场景中移动并获得基础 RPG 反馈，项目继续可在此基础上对接战斗系统。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775840072
|
||||
- [2026-04-11 00:54:32]
|
||||
- **执行原因**: 用户继续要求推进开发，目标是从探索占位过渡到可执行的战斗流程。
|
||||
- **执行过程**:
|
||||
1. 扩展全局游戏状态，加入战斗状态机、行动指令与敌方回合逻辑。
|
||||
2. 新增战斗面板组件，提供攻击/技能/防御/道具操作与战斗日志展示。
|
||||
3. 将场景遇敌逻辑接入战斗入口，并在战斗期间锁定探索移动；完成构建验证。
|
||||
- **执行结果**: 已形成“探索移动 -> 遇敌触发 -> 回合战斗 -> 结算返回探索”的可玩闭环 MVP。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775864637
|
||||
- [2026-04-11 07:43:57]
|
||||
- **执行原因**: 用户继续要求推进可玩版本，目标提升战斗系统可扩展性与切场体验。
|
||||
- **执行过程**:
|
||||
1. 新增 battleData 配置文件，将敌人与技能参数改为数据驱动。
|
||||
2. 重构 game state，引入 sceneMode（explore/battleTransition/battle）并加入战斗切入过渡状态机。
|
||||
3. 新增 TransitionOverlay 过渡组件并接入 App，完成探索-切场-战斗流程联动与构建验证。
|
||||
- **执行结果**: 已完成数据驱动战斗基础与切场过渡表现，后续可直接扩充敌人/技能配置并接任务或场景系统。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775865108
|
||||
- [2026-04-11 07:51:48]
|
||||
- **执行原因**: 用户继续要求推进，目标增加 NPC 交互与任务链闭环。
|
||||
- **执行过程**:
|
||||
1. 扩展输入系统，增加按键单次触发能力（用于 E 键交互）。
|
||||
2. 在全局状态中加入任务模块，实现接取、战斗击杀计数、任务完成与奖励交付逻辑。
|
||||
3. 在探索场景添加 NPC 模型与互动提示，接入 E 键对话，并更新状态面板展示任务进度。
|
||||
- **执行结果**: 已形成第一条任务链闭环（接任务 -> 打怪累积 -> 回 NPC 交付），并通过构建验证。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775865869
|
||||
- [2026-04-11 08:04:29]
|
||||
- **执行原因**: 用户要求将战斗系统改为俯视角 RPG 回合战斗场景风格。
|
||||
- **执行过程**:
|
||||
1. 重构 BattlePanel，接入 Three.js 俯视战场（相机、地形、单位、回合高亮、受击反馈）。
|
||||
2. 保留并整合原有回合指令 HUD（攻击/技能/防御/道具）与日志结算区。
|
||||
3. 增加战斗场景资源生命周期管理（进入初始化、退出释放），并完成构建验证。
|
||||
- **执行结果**: 战斗已从纯 UI 面板升级为俯视角战斗场景，形成“3D 战场 + 回合指令 HUD”的可玩表现。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775866460
|
||||
- [2026-04-11 08:14:20]
|
||||
- **执行原因**: 用户继续要求优化战斗体验，目标增加俯视战斗的战术交互感。
|
||||
- **执行过程**:
|
||||
1. 在 BattlePanel 中加入网格化战场表现与俯视镜头，增强回合战斗场景感。
|
||||
2. 增加目标选择流程：攻击/技能进入待选目标状态，点击敌方单位后执行指令。
|
||||
3. 新增技能/攻击范围环提示、HUD 引导文案和资源释放逻辑，完成构建验证。
|
||||
- **执行结果**: 战斗场景已具备基础战术交互（目标选择+范围提示），体验更接近俯视角 RPG 回合战斗。
|
||||
|
||||
# 任务执行摘要
|
||||
|
||||
## 会话 ID: 1775868509
|
||||
- [2026-04-11 08:48:29]
|
||||
- **执行原因**: 用户要求补齐战斗演出：攻击/受击动画、敌方不同攻击节奏、伤害飘字滚动与颜色区分。
|
||||
- **执行过程**:
|
||||
1. 扩展敌人配置，新增攻击总时长、命中延迟、MP 打击概率等参数，支持不同敌人差异化反馈时序。
|
||||
2. 重构战斗状态机为事件驱动（attack/hit/popup），将命中与结算从瞬时执行改为时序执行，并加入暴击、MP 伤害与恢复事件。
|
||||
3. 在俯视战场中接入攻击位移动画、受击闪烁动画和飘字系统（随机滚动到最终值、暴击/MP/治疗颜色区分）。
|
||||
- **执行结果**: 已实现完整战斗演出链路，反馈时机随敌人攻击动画参数变化，并通过构建验证。
|
||||
|
||||
13
index.html
13
index.html
|
|
@ -1,13 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>bof3-scaffold</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"name": "bof3-demo",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.180.0",
|
||||
"vue": "^3.5.32"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.12.2",
|
||||
"@types/three": "^0.183.1",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.0.4",
|
||||
"vue-tsc": "^3.2.6"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
|
|
@ -1,24 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.9 KiB |
23
src/App.vue
23
src/App.vue
|
|
@ -1,23 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ThreeScene from './game/ThreeScene.vue'
|
||||
import BattlePanel from './ui/BattlePanel.vue'
|
||||
import StatusPanel from './ui/StatusPanel.vue'
|
||||
import TransitionOverlay from './ui/TransitionOverlay.vue'
|
||||
import { gameConfig } from './data/gameConfig'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-shell">
|
||||
<header class="top-bar">
|
||||
<h1>{{ gameConfig.title }}</h1>
|
||||
<p>{{ gameConfig.tagline }}</p>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<StatusPanel />
|
||||
<ThreeScene />
|
||||
</main>
|
||||
<TransitionOverlay />
|
||||
<BattlePanel />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
export class KeyboardInput {
|
||||
private readonly pressed = new Set<string>()
|
||||
private readonly justPressed = new Set<string>()
|
||||
|
||||
private readonly onKeyDown = (event: KeyboardEvent) => {
|
||||
if (!this.pressed.has(event.code)) {
|
||||
this.justPressed.add(event.code)
|
||||
}
|
||||
this.pressed.add(event.code)
|
||||
}
|
||||
|
||||
private readonly onKeyUp = (event: KeyboardEvent) => {
|
||||
this.pressed.delete(event.code)
|
||||
}
|
||||
|
||||
start() {
|
||||
window.addEventListener('keydown', this.onKeyDown)
|
||||
window.addEventListener('keyup', this.onKeyUp)
|
||||
}
|
||||
|
||||
stop() {
|
||||
window.removeEventListener('keydown', this.onKeyDown)
|
||||
window.removeEventListener('keyup', this.onKeyUp)
|
||||
this.pressed.clear()
|
||||
this.justPressed.clear()
|
||||
}
|
||||
|
||||
getMoveAxis() {
|
||||
let x = 0
|
||||
let z = 0
|
||||
|
||||
if (this.pressed.has('KeyW') || this.pressed.has('ArrowUp')) z -= 1
|
||||
if (this.pressed.has('KeyS') || this.pressed.has('ArrowDown')) z += 1
|
||||
if (this.pressed.has('KeyA') || this.pressed.has('ArrowLeft')) x -= 1
|
||||
if (this.pressed.has('KeyD') || this.pressed.has('ArrowRight')) x += 1
|
||||
|
||||
return { x, z }
|
||||
}
|
||||
|
||||
consumePressed(code: string) {
|
||||
const hit = this.justPressed.has(code)
|
||||
if (hit) {
|
||||
this.justPressed.delete(code)
|
||||
}
|
||||
return hit
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
export class GameLoop {
|
||||
private frameId = 0
|
||||
private lastTime = 0
|
||||
private readonly tick: (dt: number) => void
|
||||
|
||||
constructor(tick: (dt: number) => void) {
|
||||
this.tick = tick
|
||||
}
|
||||
|
||||
start() {
|
||||
this.lastTime = performance.now()
|
||||
|
||||
const run = (now: number) => {
|
||||
const dt = Math.min((now - this.lastTime) / 1000, 0.05)
|
||||
this.lastTime = now
|
||||
this.tick(dt)
|
||||
this.frameId = requestAnimationFrame(run)
|
||||
}
|
||||
|
||||
this.frameId = requestAnimationFrame(run)
|
||||
}
|
||||
|
||||
stop() {
|
||||
cancelAnimationFrame(this.frameId)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
export interface EnemyDef {
|
||||
id: string
|
||||
name: string
|
||||
hp: number
|
||||
minAtk: number
|
||||
maxAtk: number
|
||||
attackAnimMs: number
|
||||
hitDelayMs: number
|
||||
mpStrikeChance: number
|
||||
rewardExp: [number, number]
|
||||
}
|
||||
|
||||
export interface SkillDef {
|
||||
id: string
|
||||
name: string
|
||||
mpCost: number
|
||||
minDamage: number
|
||||
maxDamage: number
|
||||
}
|
||||
|
||||
export const enemies: EnemyDef[] = [
|
||||
{
|
||||
id: 'plain-wolf',
|
||||
name: '平原狼',
|
||||
hp: 65,
|
||||
minAtk: 10,
|
||||
maxAtk: 18,
|
||||
attackAnimMs: 540,
|
||||
hitDelayMs: 280,
|
||||
mpStrikeChance: 0.05,
|
||||
rewardExp: [12, 20],
|
||||
},
|
||||
{
|
||||
id: 'cave-slime',
|
||||
name: '洞穴史莱姆',
|
||||
hp: 72,
|
||||
minAtk: 9,
|
||||
maxAtk: 16,
|
||||
attackAnimMs: 860,
|
||||
hitDelayMs: 520,
|
||||
mpStrikeChance: 0.35,
|
||||
rewardExp: [14, 22],
|
||||
},
|
||||
{
|
||||
id: 'mountain-lizard',
|
||||
name: '山地蜥蜴',
|
||||
hp: 78,
|
||||
minAtk: 11,
|
||||
maxAtk: 19,
|
||||
attackAnimMs: 680,
|
||||
hitDelayMs: 360,
|
||||
mpStrikeChance: 0.15,
|
||||
rewardExp: [16, 24],
|
||||
},
|
||||
]
|
||||
|
||||
export const skills: SkillDef[] = [
|
||||
{
|
||||
id: 'flame',
|
||||
name: '火焰术',
|
||||
mpCost: 6,
|
||||
minDamage: 24,
|
||||
maxDamage: 34,
|
||||
},
|
||||
]
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
export const gameConfig = {
|
||||
title: 'Breath of Fire-like RPG Demo',
|
||||
tagline: '里程碑 7: 攻击/受击动画 + 时序反馈 + 飘字系统',
|
||||
}
|
||||
|
|
@ -1,272 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import type { Mesh, Object3D } from 'three'
|
||||
import { GameLoop } from '../core/loop'
|
||||
import { KeyboardInput } from '../core/input'
|
||||
import { interactQuestNpc, startBattle, useGameState } from './state'
|
||||
|
||||
const root = ref<HTMLDivElement | null>(null)
|
||||
const gameState = useGameState()
|
||||
|
||||
let renderer: THREE.WebGLRenderer | null = null
|
||||
let camera: THREE.PerspectiveCamera | null = null
|
||||
let scene: THREE.Scene | null = null
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
let loop: GameLoop | null = null
|
||||
let keyboard: KeyboardInput | null = null
|
||||
|
||||
const playerRadius = 0.45
|
||||
const worldBound = 7.2
|
||||
let encounterTarget = 45
|
||||
|
||||
const obstacleDefs = [
|
||||
{ x: -2.4, z: 1.5, radius: 0.9 },
|
||||
{ x: 1.8, z: -2.2, radius: 1.1 },
|
||||
{ x: 3.1, z: 2.7, radius: 0.8 },
|
||||
]
|
||||
|
||||
const canMoveTo = (nextX: number, nextZ: number) => {
|
||||
if (Math.abs(nextX) > worldBound || Math.abs(nextZ) > worldBound) {
|
||||
return false
|
||||
}
|
||||
|
||||
for (const obstacle of obstacleDefs) {
|
||||
const dx = nextX - obstacle.x
|
||||
const dz = nextZ - obstacle.z
|
||||
const minDistance = playerRadius + obstacle.radius
|
||||
if (dx * dx + dz * dz < minDistance * minDistance) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
const updateArea = (x: number) => {
|
||||
if (x > 2.5) {
|
||||
gameState.area = '东侧坡道'
|
||||
return
|
||||
}
|
||||
|
||||
if (x < -2.5) {
|
||||
gameState.area = '西侧荒地'
|
||||
return
|
||||
}
|
||||
|
||||
gameState.area = '训练平原'
|
||||
}
|
||||
|
||||
const initScene = () => {
|
||||
if (!root.value) return
|
||||
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color('#121a1f')
|
||||
|
||||
camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100)
|
||||
camera.position.set(5, 5, 7)
|
||||
camera.lookAt(0, 0, 0)
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
root.value.appendChild(renderer.domElement)
|
||||
|
||||
const ambient = new THREE.AmbientLight('#89a2ff', 0.45)
|
||||
scene.add(ambient)
|
||||
|
||||
const sun = new THREE.DirectionalLight('#ffe8ad', 1.4)
|
||||
sun.position.set(4, 8, 3)
|
||||
scene.add(sun)
|
||||
|
||||
const ground = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(16, 16),
|
||||
new THREE.MeshStandardMaterial({ color: '#1f2a33' }),
|
||||
)
|
||||
ground.rotation.x = -Math.PI / 2
|
||||
scene.add(ground)
|
||||
|
||||
const hero = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(1, 1, 1),
|
||||
new THREE.MeshStandardMaterial({ color: '#5bc8af' }),
|
||||
)
|
||||
hero.position.y = 0.55
|
||||
scene.add(hero)
|
||||
|
||||
const portal = new THREE.Mesh(
|
||||
new THREE.TorusGeometry(0.75, 0.12, 16, 36),
|
||||
new THREE.MeshStandardMaterial({ color: '#5f9df7', emissive: '#27466f', emissiveIntensity: 0.65 }),
|
||||
)
|
||||
portal.position.set(5.3, 0.8, 5.3)
|
||||
portal.rotation.x = Math.PI / 2
|
||||
scene.add(portal)
|
||||
|
||||
const npc = new THREE.Mesh(
|
||||
new THREE.CapsuleGeometry(0.35, 0.8, 4, 8),
|
||||
new THREE.MeshStandardMaterial({ color: '#f4b45b' }),
|
||||
)
|
||||
npc.position.set(-5.2, 0.8, -4.8)
|
||||
scene.add(npc)
|
||||
|
||||
const npcMark = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(0.18, 16, 16),
|
||||
new THREE.MeshStandardMaterial({ color: '#ffe071', emissive: '#6c5617', emissiveIntensity: 0.7 }),
|
||||
)
|
||||
npcMark.position.set(-5.2, 1.95, -4.8)
|
||||
scene.add(npcMark)
|
||||
|
||||
for (const obstacle of obstacleDefs) {
|
||||
const stone = new THREE.Mesh(
|
||||
new THREE.CylinderGeometry(obstacle.radius, obstacle.radius, 1.2, 16),
|
||||
new THREE.MeshStandardMaterial({ color: '#4d5d69' }),
|
||||
)
|
||||
stone.position.set(obstacle.x, 0.6, obstacle.z)
|
||||
scene.add(stone)
|
||||
}
|
||||
|
||||
const grid = new THREE.GridHelper(16, 16, '#4e6878', '#24323c')
|
||||
scene.add(grid)
|
||||
|
||||
const resize = () => {
|
||||
if (!root.value || !renderer || !camera) return
|
||||
const width = root.value.clientWidth
|
||||
const height = root.value.clientHeight
|
||||
camera.aspect = width / height
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize(width, height)
|
||||
}
|
||||
|
||||
resizeObserver = new ResizeObserver(resize)
|
||||
resizeObserver.observe(root.value)
|
||||
resize()
|
||||
|
||||
keyboard = new KeyboardInput()
|
||||
keyboard.start()
|
||||
|
||||
const cameraOffset = new THREE.Vector3(4.5, 5.2, 6.2)
|
||||
|
||||
loop = new GameLoop((dt) => {
|
||||
if (gameState.sceneMode !== 'explore') {
|
||||
if (renderer && scene && camera) {
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const axis = keyboard?.getMoveAxis() ?? { x: 0, z: 0 }
|
||||
const hasMoveInput = axis.x !== 0 || axis.z !== 0
|
||||
|
||||
if (hasMoveInput) {
|
||||
const len = Math.hypot(axis.x, axis.z)
|
||||
const dirX = axis.x / len
|
||||
const dirZ = axis.z / len
|
||||
|
||||
const nextX = hero.position.x + dirX * gameState.moveSpeed * dt
|
||||
const nextZ = hero.position.z + dirZ * gameState.moveSpeed * dt
|
||||
|
||||
if (canMoveTo(nextX, nextZ)) {
|
||||
hero.position.x = nextX
|
||||
hero.position.z = nextZ
|
||||
|
||||
const movedDistance = Math.hypot(dirX * gameState.moveSpeed * dt, dirZ * gameState.moveSpeed * dt)
|
||||
gameState.encounterMeter += movedDistance * 13
|
||||
|
||||
if (gameState.encounterMeter >= encounterTarget) {
|
||||
gameState.encounterMeter = 0
|
||||
encounterTarget = 35 + Math.random() * 30
|
||||
startBattle('你在平原中前进')
|
||||
}
|
||||
} else {
|
||||
gameState.notice = '前方有障碍，无法通过'
|
||||
}
|
||||
|
||||
hero.rotation.y = Math.atan2(axis.x, axis.z)
|
||||
}
|
||||
|
||||
portal.rotation.z += dt
|
||||
npcMark.position.y = 1.95 + Math.sin(performance.now() * 0.004) * 0.12
|
||||
|
||||
if (hero.position.distanceTo(portal.position) < 1.1) {
|
||||
gameState.notice = '进入传送点（占位）：可切换场景'
|
||||
}
|
||||
|
||||
const npcDistance = hero.position.distanceTo(npc.position)
|
||||
if (npcDistance < 1.5) {
|
||||
gameState.notice = '按 E 与 NPC 对话'
|
||||
if (keyboard?.consumePressed('KeyE')) {
|
||||
interactQuestNpc()
|
||||
}
|
||||
}
|
||||
|
||||
updateArea(hero.position.x)
|
||||
gameState.positionText = `(${hero.position.x.toFixed(1)}, ${hero.position.z.toFixed(1)})`
|
||||
|
||||
if (camera) {
|
||||
const cameraTarget = hero.position.clone().add(cameraOffset)
|
||||
camera.position.lerp(cameraTarget, 0.06)
|
||||
camera.lookAt(hero.position.x, 0.5, hero.position.z)
|
||||
}
|
||||
|
||||
if (renderer && scene && camera) {
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
})
|
||||
|
||||
loop.start()
|
||||
}
|
||||
|
||||
const disposeScene = () => {
|
||||
loop?.stop()
|
||||
keyboard?.stop()
|
||||
resizeObserver?.disconnect()
|
||||
|
||||
if (root.value && renderer) {
|
||||
root.value.removeChild(renderer.domElement)
|
||||
}
|
||||
|
||||
scene?.traverse((object: Object3D) => {
|
||||
const mesh = object as Mesh
|
||||
if (mesh.geometry) mesh.geometry.dispose()
|
||||
|
||||
const material = mesh.material
|
||||
if (Array.isArray(material)) {
|
||||
material.forEach((m) => m.dispose())
|
||||
} else if (material) {
|
||||
material.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
renderer?.dispose()
|
||||
|
||||
renderer = null
|
||||
camera = null
|
||||
scene = null
|
||||
resizeObserver = null
|
||||
loop = null
|
||||
keyboard = null
|
||||
}
|
||||
|
||||
onMounted(initScene)
|
||||
onBeforeUnmount(disposeScene)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="scene-wrap">
|
||||
<div ref="root" class="scene-canvas" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.scene-wrap {
|
||||
min-height: 420px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #2c3d49;
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.scene-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 420px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,451 +0,0 @@
|
|||
import { reactive } from 'vue'
|
||||
import { enemies, skills, type EnemyDef } from '../data/battleData'
|
||||
|
||||
export type BattleAction = 'attack' | 'skill' | 'defend' | 'item'
|
||||
export type BattleTurn = 'player' | 'enemy' | 'resolved'
|
||||
export type SceneMode = 'explore' | 'battleTransition' | 'battle'
|
||||
|
||||
type QuestStatus = 'not_started' | 'in_progress' | 'completed' | 'turned_in'
|
||||
type UnitSide = 'player' | 'enemy'
|
||||
type PopupValueType = 'hp' | 'mp' | 'heal'
|
||||
|
||||
export interface BattleFxEvent {
|
||||
id: number
|
||||
kind: 'attack' | 'hit' | 'popup'
|
||||
actor?: UnitSide
|
||||
target?: UnitSide
|
||||
value?: number
|
||||
valueType?: PopupValueType
|
||||
crit?: boolean
|
||||
durationMs?: number
|
||||
hitDelayMs?: number
|
||||
}
|
||||
|
||||
interface QuestState {
|
||||
id: string
|
||||
title: string
|
||||
status: QuestStatus
|
||||
targetKills: number
|
||||
currentKills: number
|
||||
rewardPotions: number
|
||||
}
|
||||
|
||||
interface BattleState {
|
||||
active: boolean
|
||||
turn: BattleTurn
|
||||
enemyName: string
|
||||
enemyHp: number
|
||||
enemyMaxHp: number
|
||||
guarding: boolean
|
||||
victory: boolean | null
|
||||
message: string
|
||||
log: string[]
|
||||
enemyData: EnemyDef | null
|
||||
fxEvents: BattleFxEvent[]
|
||||
nextFxId: number
|
||||
}
|
||||
|
||||
interface PlayerState {
|
||||
hp: number
|
||||
maxHp: number
|
||||
mp: number
|
||||
maxMp: number
|
||||
potions: number
|
||||
}
|
||||
|
||||
interface GameState {
|
||||
hp: string
|
||||
mp: string
|
||||
level: number
|
||||
area: string
|
||||
positionText: string
|
||||
moveSpeed: number
|
||||
encounterMeter: number
|
||||
notice: string
|
||||
sceneMode: SceneMode
|
||||
player: PlayerState
|
||||
battle: BattleState
|
||||
quest: QuestState
|
||||
}
|
||||
|
||||
const state = reactive<GameState>({
|
||||
hp: '120 / 120',
|
||||
mp: '38 / 38',
|
||||
level: 1,
|
||||
area: '训练平原',
|
||||
positionText: '(0.0, 0.0)',
|
||||
moveSpeed: 3.2,
|
||||
encounterMeter: 0,
|
||||
notice: '按 WASD 或方向键移动',
|
||||
sceneMode: 'explore',
|
||||
player: {
|
||||
hp: 120,
|
||||
maxHp: 120,
|
||||
mp: 38,
|
||||
maxMp: 38,
|
||||
potions: 3,
|
||||
},
|
||||
battle: {
|
||||
active: false,
|
||||
turn: 'player',
|
||||
enemyName: '',
|
||||
enemyHp: 0,
|
||||
enemyMaxHp: 0,
|
||||
guarding: false,
|
||||
victory: null,
|
||||
message: '',
|
||||
log: [],
|
||||
enemyData: null,
|
||||
fxEvents: [],
|
||||
nextFxId: 1,
|
||||
},
|
||||
quest: {
|
||||
id: 'wolf-subjugation',
|
||||
title: '平原讨伐令',
|
||||
status: 'not_started',
|
||||
targetKills: 3,
|
||||
currentKills: 0,
|
||||
rewardPotions: 2,
|
||||
},
|
||||
})
|
||||
|
||||
let battleEnterTimer = 0
|
||||
const battleTimers: number[] = []
|
||||
|
||||
const scheduleBattle = (delayMs: number, task: () => void) => {
|
||||
const id = window.setTimeout(() => {
|
||||
const idx = battleTimers.indexOf(id)
|
||||
if (idx >= 0) battleTimers.splice(idx, 1)
|
||||
task()
|
||||
}, delayMs)
|
||||
battleTimers.push(id)
|
||||
}
|
||||
|
||||
const clearBattleTimers = () => {
|
||||
for (const id of battleTimers) {
|
||||
clearTimeout(id)
|
||||
}
|
||||
battleTimers.length = 0
|
||||
}
|
||||
|
||||
const addBattleLog = (line: string) => {
|
||||
state.battle.log.push(line)
|
||||
if (state.battle.log.length > 8) {
|
||||
state.battle.log.shift()
|
||||
}
|
||||
}
|
||||
|
||||
const emitFx = (event: Omit<BattleFxEvent, 'id'>) => {
|
||||
state.battle.fxEvents.push({
|
||||
id: state.battle.nextFxId++,
|
||||
...event,
|
||||
})
|
||||
|
||||
if (state.battle.fxEvents.length > 120) {
|
||||
state.battle.fxEvents.splice(0, state.battle.fxEvents.length - 120)
|
||||
}
|
||||
}
|
||||
|
||||
const roll = (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
const pickRandom = <T>(arr: T[]) => arr[roll(0, arr.length - 1)]
|
||||
|
||||
const updateDerivedBars = () => {
|
||||
state.hp = `${Math.max(0, state.player.hp)} / ${state.player.maxHp}`
|
||||
state.mp = `${Math.max(0, state.player.mp)} / ${state.player.maxMp}`
|
||||
}
|
||||
|
||||
const updateQuestProgressOnVictory = () => {
|
||||
if (state.quest.status !== 'in_progress') {
|
||||
return
|
||||
}
|
||||
|
||||
state.quest.currentKills += 1
|
||||
if (state.quest.currentKills >= state.quest.targetKills) {
|
||||
state.quest.status = 'completed'
|
||||
state.notice = `任务完成：请回 NPC 领取奖励（+${state.quest.rewardPotions} 药草）`
|
||||
} else {
|
||||
state.notice = `任务进度：${state.quest.currentKills}/${state.quest.targetKills}`
|
||||
}
|
||||
}
|
||||
|
||||
const resolveBattle = (victory: boolean) => {
|
||||
state.battle.turn = 'resolved'
|
||||
state.battle.victory = victory
|
||||
|
||||
if (victory) {
|
||||
const rewardRange = state.battle.enemyData?.rewardExp ?? [12, 20]
|
||||
const exp = roll(rewardRange[0], rewardRange[1])
|
||||
state.notice = `战斗胜利，获得 ${exp} 经验（占位）`
|
||||
state.battle.message = '胜利。点击“返回探索”继续。'
|
||||
addBattleLog(`你击败了 ${state.battle.enemyName}。`)
|
||||
updateQuestProgressOnVictory()
|
||||
} else {
|
||||
state.notice = '战斗失败（占位）：已自动复活到 60 HP'
|
||||
state.battle.message = '失败。点击“返回探索”继续。'
|
||||
addBattleLog('你被击倒了。')
|
||||
state.player.hp = 60
|
||||
state.player.mp = Math.max(state.player.mp, 10)
|
||||
updateDerivedBars()
|
||||
}
|
||||
|
||||
clearBattleTimers()
|
||||
}
|
||||
|
||||
const applyEnemyImpact = () => {
|
||||
const enemy = state.battle.enemyData
|
||||
if (!enemy || !state.battle.active || state.battle.turn !== 'enemy') return
|
||||
|
||||
const useMpStrike = Math.random() < enemy.mpStrikeChance && state.player.mp > 0
|
||||
|
||||
if (useMpStrike) {
|
||||
const mpDamage = roll(6, 13)
|
||||
const realDamage = Math.min(state.player.mp, mpDamage)
|
||||
state.player.mp -= realDamage
|
||||
updateDerivedBars()
|
||||
|
||||
emitFx({ kind: 'hit', target: 'player' })
|
||||
emitFx({ kind: 'popup', target: 'player', value: realDamage, valueType: 'mp', crit: false })
|
||||
addBattleLog(`${state.battle.enemyName} 施放抽魔，造成 ${realDamage} MP 损失。`)
|
||||
return
|
||||
}
|
||||
|
||||
const crit = Math.random() < 0.14
|
||||
const enemyDamage = roll(enemy.minAtk, enemy.maxAtk)
|
||||
const baseDamage = crit ? Math.floor(enemyDamage * 1.65) : enemyDamage
|
||||
const finalDamage = state.battle.guarding ? Math.floor(baseDamage * 0.55) : baseDamage
|
||||
|
||||
state.player.hp -= finalDamage
|
||||
state.battle.guarding = false
|
||||
updateDerivedBars()
|
||||
|
||||
emitFx({ kind: 'hit', target: 'player' })
|
||||
emitFx({ kind: 'popup', target: 'player', value: finalDamage, valueType: 'hp', crit })
|
||||
addBattleLog(`${state.battle.enemyName} 攻击造成 ${finalDamage} 点伤害${crit ? '（暴击）' : ''}。`)
|
||||
}
|
||||
|
||||
const enemyTurn = () => {
|
||||
if (!state.battle.active || state.battle.turn !== 'enemy') return
|
||||
|
||||
const enemy = state.battle.enemyData
|
||||
const totalAnimMs = enemy?.attackAnimMs ?? 640
|
||||
const hitDelayMs = Math.min(enemy?.hitDelayMs ?? 360, totalAnimMs - 80)
|
||||
|
||||
state.battle.message = `${state.battle.enemyName} 准备攻击...`
|
||||
emitFx({
|
||||
kind: 'attack',
|
||||
actor: 'enemy',
|
||||
durationMs: totalAnimMs,
|
||||
hitDelayMs,
|
||||
})
|
||||
|
||||
scheduleBattle(hitDelayMs, () => {
|
||||
if (!state.battle.active || state.battle.turn !== 'enemy') return
|
||||
|
||||
applyEnemyImpact()
|
||||
|
||||
if (state.player.hp <= 0) {
|
||||
resolveBattle(false)
|
||||
return
|
||||
}
|
||||
|
||||
const recovery = Math.max(120, totalAnimMs - hitDelayMs)
|
||||
scheduleBattle(recovery, () => {
|
||||
if (!state.battle.active || state.battle.turn === 'resolved') return
|
||||
state.battle.turn = 'player'
|
||||
state.battle.message = '你的回合：选择一个指令。'
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const launchPlayerAttack = (isSkill: boolean) => {
|
||||
const skill = skills[0]
|
||||
if (isSkill && !skill) return
|
||||
|
||||
if (isSkill && state.player.mp < (skill?.mpCost ?? 0)) {
|
||||
addBattleLog('MP 不足，技能释放失败。')
|
||||
state.battle.message = 'MP 不足，请重新选择。'
|
||||
return
|
||||
}
|
||||
|
||||
const totalAnimMs = isSkill ? 820 : 560
|
||||
const hitDelayMs = isSkill ? 460 : 260
|
||||
|
||||
state.battle.turn = 'enemy'
|
||||
state.battle.message = isSkill ? '你正在施放技能...' : '你正在攻击...'
|
||||
|
||||
emitFx({
|
||||
kind: 'attack',
|
||||
actor: 'player',
|
||||
durationMs: totalAnimMs,
|
||||
hitDelayMs,
|
||||
})
|
||||
|
||||
scheduleBattle(hitDelayMs, () => {
|
||||
if (!state.battle.active || state.battle.turn !== 'enemy') return
|
||||
|
||||
let damage = 0
|
||||
let crit = false
|
||||
|
||||
if (isSkill) {
|
||||
const castSkill = skills[0]
|
||||
if (!castSkill) return
|
||||
|
||||
state.player.mp -= castSkill.mpCost
|
||||
damage = roll(castSkill.minDamage, castSkill.maxDamage)
|
||||
crit = Math.random() < 0.2
|
||||
if (crit) {
|
||||
damage = Math.floor(damage * 1.7)
|
||||
}
|
||||
addBattleLog(`你使用${castSkill.name}，造成 ${damage} 点伤害${crit ? '（暴击）' : ''}。`)
|
||||
} else {
|
||||
damage = roll(14, 22)
|
||||
crit = Math.random() < 0.12
|
||||
if (crit) {
|
||||
damage = Math.floor(damage * 1.6)
|
||||
}
|
||||
addBattleLog(`你使用普通攻击，造成 ${damage} 点伤害${crit ? '（暴击）' : ''}。`)
|
||||
}
|
||||
|
||||
state.battle.enemyHp -= damage
|
||||
if (state.battle.enemyHp < 0) state.battle.enemyHp = 0
|
||||
updateDerivedBars()
|
||||
|
||||
emitFx({ kind: 'hit', target: 'enemy' })
|
||||
emitFx({ kind: 'popup', target: 'enemy', value: damage, valueType: 'hp', crit })
|
||||
|
||||
if (state.battle.enemyHp <= 0) {
|
||||
resolveBattle(true)
|
||||
return
|
||||
}
|
||||
|
||||
const recovery = Math.max(120, totalAnimMs - hitDelayMs)
|
||||
scheduleBattle(recovery + 180, () => {
|
||||
if (!state.battle.active || state.battle.turn === 'resolved') return
|
||||
enemyTurn()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export const interactQuestNpc = () => {
|
||||
if (state.sceneMode !== 'explore') {
|
||||
return
|
||||
}
|
||||
|
||||
if (state.quest.status === 'not_started') {
|
||||
state.quest.status = 'in_progress'
|
||||
state.quest.currentKills = 0
|
||||
state.notice = `接取任务：${state.quest.title}（击败 ${state.quest.targetKills} 个敌人）`
|
||||
return
|
||||
}
|
||||
|
||||
if (state.quest.status === 'in_progress') {
|
||||
state.notice = `任务进行中：${state.quest.currentKills}/${state.quest.targetKills}`
|
||||
return
|
||||
}
|
||||
|
||||
if (state.quest.status === 'completed') {
|
||||
state.quest.status = 'turned_in'
|
||||
state.player.potions += state.quest.rewardPotions
|
||||
state.player.mp = Math.min(state.player.maxMp, state.player.mp + 8)
|
||||
updateDerivedBars()
|
||||
state.notice = `任务已交付：获得 ${state.quest.rewardPotions} 药草，MP +8`
|
||||
return
|
||||
}
|
||||
|
||||
state.notice = 'NPC：谢谢你，平原暂时安全了。'
|
||||
}
|
||||
|
||||
export const startBattle = (reason = '遭遇野怪') => {
|
||||
if (state.battle.active || state.sceneMode === 'battleTransition') return
|
||||
|
||||
const enemy = pickRandom(enemies)
|
||||
state.sceneMode = 'battleTransition'
|
||||
state.notice = `遭遇 ${enemy.name}，准备进入战斗...`
|
||||
|
||||
clearTimeout(battleEnterTimer)
|
||||
battleEnterTimer = window.setTimeout(() => {
|
||||
state.battle.active = true
|
||||
state.sceneMode = 'battle'
|
||||
state.battle.turn = 'player'
|
||||
state.battle.enemyName = enemy.name
|
||||
state.battle.enemyHp = enemy.hp
|
||||
state.battle.enemyMaxHp = enemy.hp
|
||||
state.battle.guarding = false
|
||||
state.battle.victory = null
|
||||
state.battle.message = '你的回合：选择一个指令。'
|
||||
state.battle.log = [`${reason}，出现了 ${enemy.name}！`]
|
||||
state.battle.enemyData = enemy
|
||||
state.battle.fxEvents = []
|
||||
state.battle.nextFxId = 1
|
||||
state.encounterMeter = 0
|
||||
state.notice = `进入战斗：${enemy.name}`
|
||||
}, 450)
|
||||
}
|
||||
|
||||
export const actInBattle = (action: BattleAction) => {
|
||||
if (!state.battle.active || state.battle.turn !== 'player') return
|
||||
|
||||
if (action === 'attack') {
|
||||
launchPlayerAttack(false)
|
||||
return
|
||||
}
|
||||
|
||||
if (action === 'skill') {
|
||||
launchPlayerAttack(true)
|
||||
return
|
||||
}
|
||||
|
||||
if (action === 'defend') {
|
||||
state.battle.guarding = true
|
||||
addBattleLog('你进入防御姿态，下一次受伤降低。')
|
||||
state.battle.turn = 'enemy'
|
||||
state.battle.message = '你进入防御，敌方即将行动...'
|
||||
scheduleBattle(260, () => {
|
||||
if (!state.battle.active || state.battle.turn === 'resolved') return
|
||||
enemyTurn()
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
if (action === 'item') {
|
||||
if (state.player.potions <= 0) {
|
||||
addBattleLog('没有可用药草。')
|
||||
state.battle.message = '道具不足，请重新选择。'
|
||||
return
|
||||
}
|
||||
|
||||
state.player.potions -= 1
|
||||
const heal = 30
|
||||
state.player.hp = Math.min(state.player.maxHp, state.player.hp + heal)
|
||||
updateDerivedBars()
|
||||
emitFx({ kind: 'popup', target: 'player', value: heal, valueType: 'heal', crit: false })
|
||||
addBattleLog(`你使用药草，恢复 ${heal} HP。`)
|
||||
|
||||
state.battle.turn = 'enemy'
|
||||
state.battle.message = '你使用道具后，敌方即将行动...'
|
||||
scheduleBattle(300, () => {
|
||||
if (!state.battle.active || state.battle.turn === 'resolved') return
|
||||
enemyTurn()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export const closeBattle = () => {
|
||||
if (!state.battle.active || state.battle.turn !== 'resolved') return
|
||||
|
||||
clearBattleTimers()
|
||||
|
||||
state.battle.active = false
|
||||
state.battle.message = ''
|
||||
state.battle.log = []
|
||||
state.battle.enemyName = ''
|
||||
state.battle.enemyData = null
|
||||
state.battle.fxEvents = []
|
||||
state.sceneMode = 'explore'
|
||||
state.notice = '战斗结束，继续探索。'
|
||||
}
|
||||
|
||||
export const useGameState = () => state
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
:root {
|
||||
color: #d7e0e6;
|
||||
background-color: #0d1419;
|
||||
font-family: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background: radial-gradient(circle at 20% 20%, #1f2a33, #0d1419 60%);
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: linear-gradient(180deg, #1a2630, #152029);
|
||||
border: 1px solid #2a3b47;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.top-bar h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.top-bar p {
|
||||
margin: 6px 0 0;
|
||||
color: #97b1c1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,675 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { actInBattle, closeBattle, useGameState, type BattleFxEvent } from '../game/state'
|
||||
|
||||
interface DamagePopup {
|
||||
id: number
|
||||
target: 'player' | 'enemy'
|
||||
value: number
|
||||
display: number
|
||||
valueType: 'hp' | 'mp' | 'heal'
|
||||
crit: boolean
|
||||
startMs: number
|
||||
durationMs: number
|
||||
x: number
|
||||
y: number
|
||||
offsetX: number
|
||||
}
|
||||
|
||||
const gameState = useGameState()
|
||||
const viewport = ref<HTMLDivElement | null>(null)
|
||||
const popups = ref<DamagePopup[]>([])
|
||||
|
||||
let renderer: THREE.WebGLRenderer | null = null
|
||||
let scene: THREE.Scene | null = null
|
||||
let camera: THREE.PerspectiveCamera | null = null
|
||||
let resizeObserver: ResizeObserver | null = null
|
||||
let frameId = 0
|
||||
let playerUnit: THREE.Mesh | null = null
|
||||
let enemyUnit: THREE.Mesh | null = null
|
||||
let playerAura: THREE.Mesh | null = null
|
||||
let enemyAura: THREE.Mesh | null = null
|
||||
let rangeRing: THREE.Mesh | null = null
|
||||
|
||||
let playerAttackFx: { startMs: number; endMs: number } | null = null
|
||||
let enemyAttackFx: { startMs: number; endMs: number } | null = null
|
||||
let playerHitUntilMs = 0
|
||||
let enemyHitUntilMs = 0
|
||||
let lastFxId = 0
|
||||
|
||||
const raycaster = new THREE.Raycaster()
|
||||
const pointer = new THREE.Vector2()
|
||||
|
||||
const pendingAction = ref<'attack' | 'skill' | null>(null)
|
||||
const hudHint = ref('')
|
||||
|
||||
const playerBase = new THREE.Vector3(-2, 0.55, 2)
|
||||
const enemyBase = new THREE.Vector3(2, 0.7, -2)
|
||||
|
||||
const resetPendingAction = () => {
|
||||
pendingAction.value = null
|
||||
hudHint.value = ''
|
||||
}
|
||||
|
||||
const runAction = (action: 'attack' | 'skill' | 'defend' | 'item') => {
|
||||
if (gameState.battle.turn !== 'player') return
|
||||
|
||||
if (action === 'attack' || action === 'skill') {
|
||||
pendingAction.value = action
|
||||
hudHint.value = action === 'attack' ? '请选择攻击目标' : '请选择技能目标'
|
||||
return
|
||||
}
|
||||
|
||||
resetPendingAction()
|
||||
actInBattle(action)
|
||||
}
|
||||
|
||||
const onPointerDown = (event: PointerEvent) => {
|
||||
if (!renderer || !camera || !enemyUnit || !pendingAction.value) return
|
||||
if (gameState.battle.turn !== 'player') return
|
||||
|
||||
const rect = renderer.domElement.getBoundingClientRect()
|
||||
pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
|
||||
pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
|
||||
|
||||
raycaster.setFromCamera(pointer, camera)
|
||||
const hits = raycaster.intersectObject(enemyUnit, false)
|
||||
if (hits.length === 0) return
|
||||
|
||||
actInBattle(pendingAction.value)
|
||||
resetPendingAction()
|
||||
}
|
||||
|
||||
const processFxEvent = (fx: BattleFxEvent) => {
|
||||
const now = performance.now()
|
||||
|
||||
if (fx.kind === 'attack') {
|
||||
const total = fx.durationMs ?? 600
|
||||
if (fx.actor === 'player') {
|
||||
playerAttackFx = { startMs: now, endMs: now + total }
|
||||
}
|
||||
if (fx.actor === 'enemy') {
|
||||
enemyAttackFx = { startMs: now, endMs: now + total }
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (fx.kind === 'hit') {
|
||||
if (fx.target === 'player') playerHitUntilMs = now + 240
|
||||
if (fx.target === 'enemy') enemyHitUntilMs = now + 240
|
||||
return
|
||||
}
|
||||
|
||||
if (fx.kind === 'popup' && fx.target && fx.value && fx.valueType) {
|
||||
popups.value.push({
|
||||
id: fx.id,
|
||||
target: fx.target,
|
||||
value: fx.value,
|
||||
display: fx.value,
|
||||
valueType: fx.valueType,
|
||||
crit: Boolean(fx.crit),
|
||||
startMs: now,
|
||||
durationMs: 940,
|
||||
x: 0,
|
||||
y: 0,
|
||||
offsetX: (Math.random() - 0.5) * 30,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const updatePopupPositions = (nowMs: number) => {
|
||||
if (!camera || !renderer || !playerUnit || !enemyUnit) return
|
||||
|
||||
const cam = camera
|
||||
const pUnit = playerUnit
|
||||
const eUnit = enemyUnit
|
||||
const width = renderer.domElement.clientWidth
|
||||
const height = renderer.domElement.clientHeight
|
||||
|
||||
const project = (worldPos: THREE.Vector3) => {
|
||||
const p = worldPos.clone().project(cam)
|
||||
return {
|
||||
x: ((p.x + 1) / 2) * width,
|
||||
y: ((-p.y + 1) / 2) * height,
|
||||
}
|
||||
}
|
||||
|
||||
popups.value = popups.value
|
||||
.map((popup) => {
|
||||
const elapsed = nowMs - popup.startMs
|
||||
const progress = elapsed / popup.durationMs
|
||||
|
||||
const anchor = popup.target === 'player' ? pUnit.position : eUnit.position
|
||||
const topPos = project(new THREE.Vector3(anchor.x, anchor.y + 1.35, anchor.z))
|
||||
|
||||
let display = popup.value
|
||||
const rollPhase = 420
|
||||
if (elapsed < rollPhase) {
|
||||
const min = Math.max(1, Math.floor(popup.value * 0.45))
|
||||
const max = Math.max(min + 1, Math.floor(popup.value * 1.45))
|
||||
display = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
}
|
||||
|
||||
return {
|
||||
...popup,
|
||||
display,
|
||||
x: topPos.x + popup.offsetX,
|
||||
y: topPos.y - progress * 42,
|
||||
}
|
||||
})
|
||||
.filter((popup) => nowMs - popup.startMs < popup.durationMs)
|
||||
}
|
||||
|
||||
const popupText = (popup: DamagePopup) => {
|
||||
if (popup.valueType === 'heal') return `+${popup.display}`
|
||||
if (popup.valueType === 'mp') return `-${popup.display} MP`
|
||||
return `-${popup.display}`
|
||||
}
|
||||
|
||||
const popupClass = (popup: DamagePopup) => {
|
||||
return {
|
||||
crit: popup.crit,
|
||||
hp: popup.valueType === 'hp',
|
||||
mp: popup.valueType === 'mp',
|
||||
heal: popup.valueType === 'heal',
|
||||
}
|
||||
}
|
||||
|
||||
const popupStyle = (popup: DamagePopup) => {
|
||||
const elapsed = performance.now() - popup.startMs
|
||||
const progress = Math.min(1, elapsed / popup.durationMs)
|
||||
const alpha = Math.max(0, 1 - progress)
|
||||
|
||||
return {
|
||||
transform: `translate(${popup.x.toFixed(1)}px, ${popup.y.toFixed(1)}px) scale(${(1 + (popup.crit ? 0.1 : 0)).toFixed(2)})`,
|
||||
opacity: alpha.toFixed(2),
|
||||
}
|
||||
}
|
||||
|
||||
const initScene = async () => {
|
||||
await nextTick()
|
||||
if (!viewport.value || renderer) return
|
||||
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color('#0f1720')
|
||||
|
||||
camera = new THREE.PerspectiveCamera(52, 1, 0.1, 80)
|
||||
camera.position.set(0, 10.5, 5.8)
|
||||
camera.lookAt(0, 0, 0)
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
renderer.domElement.style.touchAction = 'none'
|
||||
renderer.domElement.addEventListener('pointerdown', onPointerDown)
|
||||
viewport.value.appendChild(renderer.domElement)
|
||||
|
||||
const hemi = new THREE.HemisphereLight('#b3e0ff', '#1b2631', 0.7)
|
||||
scene.add(hemi)
|
||||
|
||||
const keyLight = new THREE.DirectionalLight('#fff3ce', 1.15)
|
||||
keyLight.position.set(4, 8, 2)
|
||||
scene.add(keyLight)
|
||||
|
||||
const arenaBase = new THREE.Mesh(
|
||||
new THREE.CylinderGeometry(5.8, 6.4, 0.4, 48),
|
||||
new THREE.MeshStandardMaterial({ color: '#293847' }),
|
||||
)
|
||||
arenaBase.position.y = -0.22
|
||||
scene.add(arenaBase)
|
||||
|
||||
const arenaGrid = new THREE.GridHelper(10, 10, '#58758a', '#2b3d4d')
|
||||
arenaGrid.position.y = 0.01
|
||||
scene.add(arenaGrid)
|
||||
|
||||
const tileMaterialA = new THREE.MeshStandardMaterial({ color: '#1a2a37', metalness: 0.1, roughness: 0.9 })
|
||||
const tileMaterialB = new THREE.MeshStandardMaterial({ color: '#223543', metalness: 0.1, roughness: 0.9 })
|
||||
for (let x = -4; x <= 4; x += 2) {
|
||||
for (let z = -4; z <= 4; z += 2) {
|
||||
const tile = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(2, 2),
|
||||
(Math.abs(x + z) / 2) % 2 === 0 ? tileMaterialA : tileMaterialB,
|
||||
)
|
||||
tile.rotation.x = -Math.PI / 2
|
||||
tile.position.set(x, 0, z)
|
||||
scene.add(tile)
|
||||
}
|
||||
}
|
||||
|
||||
playerUnit = new THREE.Mesh(
|
||||
new THREE.CapsuleGeometry(0.42, 1.0, 4, 10),
|
||||
new THREE.MeshStandardMaterial({ color: '#68d8c3' }),
|
||||
)
|
||||
playerUnit.position.copy(playerBase)
|
||||
scene.add(playerUnit)
|
||||
|
||||
enemyUnit = new THREE.Mesh(
|
||||
new THREE.ConeGeometry(0.55, 1.35, 14),
|
||||
new THREE.MeshStandardMaterial({ color: '#ef8f6b' }),
|
||||
)
|
||||
enemyUnit.position.copy(enemyBase)
|
||||
enemyUnit.rotation.x = Math.PI
|
||||
scene.add(enemyUnit)
|
||||
|
||||
playerAura = new THREE.Mesh(
|
||||
new THREE.RingGeometry(0.55, 0.76, 24),
|
||||
new THREE.MeshBasicMaterial({ color: '#86ffdf', transparent: true, opacity: 0.7 }),
|
||||
)
|
||||
playerAura.rotation.x = -Math.PI / 2
|
||||
playerAura.position.set(playerBase.x, 0.02, playerBase.z)
|
||||
scene.add(playerAura)
|
||||
|
||||
enemyAura = new THREE.Mesh(
|
||||
new THREE.RingGeometry(0.55, 0.76, 24),
|
||||
new THREE.MeshBasicMaterial({ color: '#ffb193', transparent: true, opacity: 0.7 }),
|
||||
)
|
||||
enemyAura.rotation.x = -Math.PI / 2
|
||||
enemyAura.position.set(enemyBase.x, 0.02, enemyBase.z)
|
||||
scene.add(enemyAura)
|
||||
|
||||
rangeRing = new THREE.Mesh(
|
||||
new THREE.RingGeometry(1.1, 1.28, 40),
|
||||
new THREE.MeshBasicMaterial({ color: '#e2f078', transparent: true, opacity: 0.8 }),
|
||||
)
|
||||
rangeRing.rotation.x = -Math.PI / 2
|
||||
rangeRing.position.set(enemyBase.x, 0.03, enemyBase.z)
|
||||
rangeRing.visible = false
|
||||
scene.add(rangeRing)
|
||||
|
||||
const resize = () => {
|
||||
if (!viewport.value || !renderer || !camera) return
|
||||
const width = viewport.value.clientWidth
|
||||
const height = viewport.value.clientHeight
|
||||
camera.aspect = width / height
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize(width, height)
|
||||
}
|
||||
|
||||
resizeObserver = new ResizeObserver(resize)
|
||||
resizeObserver.observe(viewport.value)
|
||||
resize()
|
||||
|
||||
lastFxId = 0
|
||||
|
||||
const tick = () => {
|
||||
frameId = requestAnimationFrame(tick)
|
||||
|
||||
if (!scene || !camera || !renderer || !playerUnit || !enemyUnit || !playerAura || !enemyAura || !rangeRing) return
|
||||
if (!gameState.battle.active) return
|
||||
|
||||
for (const fx of gameState.battle.fxEvents) {
|
||||
if (fx.id > lastFxId) {
|
||||
processFxEvent(fx)
|
||||
lastFxId = fx.id
|
||||
}
|
||||
}
|
||||
|
||||
const nowMs = performance.now()
|
||||
const now = nowMs * 0.001
|
||||
|
||||
let playerAtkOffset = 0
|
||||
if (playerAttackFx && nowMs < playerAttackFx.endMs) {
|
||||
const p = (nowMs - playerAttackFx.startMs) / (playerAttackFx.endMs - playerAttackFx.startMs)
|
||||
playerAtkOffset = Math.sin(Math.PI * Math.max(0, Math.min(1, p))) * 1.1
|
||||
} else {
|
||||
playerAttackFx = null
|
||||
}
|
||||
|
||||
let enemyAtkOffset = 0
|
||||
if (enemyAttackFx && nowMs < enemyAttackFx.endMs) {
|
||||
const p = (nowMs - enemyAttackFx.startMs) / (enemyAttackFx.endMs - enemyAttackFx.startMs)
|
||||
enemyAtkOffset = Math.sin(Math.PI * Math.max(0, Math.min(1, p))) * 1.05
|
||||
} else {
|
||||
enemyAttackFx = null
|
||||
}
|
||||
|
||||
playerUnit.position.set(
|
||||
playerBase.x + playerAtkOffset,
|
||||
playerBase.y + Math.sin(now * 3.1) * 0.06,
|
||||
playerBase.z - playerAtkOffset * 0.2,
|
||||
)
|
||||
|
||||
enemyUnit.position.set(
|
||||
enemyBase.x - enemyAtkOffset,
|
||||
enemyBase.y + Math.sin(now * 2.5 + 0.8) * 0.07,
|
||||
enemyBase.z + enemyAtkOffset * 0.2,
|
||||
)
|
||||
|
||||
const enemyHpRatio = gameState.battle.enemyMaxHp ? gameState.battle.enemyHp / gameState.battle.enemyMaxHp : 1
|
||||
enemyUnit.scale.setScalar(0.86 + enemyHpRatio * 0.2)
|
||||
|
||||
const playerTurn = gameState.battle.turn === 'player'
|
||||
const enemyTurn = gameState.battle.turn === 'enemy'
|
||||
|
||||
;(playerAura.material as THREE.MeshBasicMaterial).opacity = playerTurn ? 0.95 : 0.38
|
||||
;(enemyAura.material as THREE.MeshBasicMaterial).opacity = enemyTurn ? 0.95 : 0.38
|
||||
|
||||
const playerIsHit = nowMs < playerHitUntilMs
|
||||
const enemyIsHit = nowMs < enemyHitUntilMs
|
||||
|
||||
;(playerUnit.material as THREE.MeshStandardMaterial).emissive.setHex(playerIsHit ? 0x6a2323 : 0x0)
|
||||
;(enemyUnit.material as THREE.MeshStandardMaterial).emissive.setHex(enemyIsHit ? 0x6a2323 : 0x0)
|
||||
|
||||
if (pendingAction.value === 'attack') {
|
||||
rangeRing.visible = true
|
||||
rangeRing.scale.setScalar(1)
|
||||
;(rangeRing.material as THREE.MeshBasicMaterial).color.set('#e2f078')
|
||||
;(rangeRing.material as THREE.MeshBasicMaterial).opacity = 0.82
|
||||
} else if (pendingAction.value === 'skill') {
|
||||
rangeRing.visible = true
|
||||
rangeRing.scale.setScalar(1.35)
|
||||
;(rangeRing.material as THREE.MeshBasicMaterial).color.set('#f5897c')
|
||||
;(rangeRing.material as THREE.MeshBasicMaterial).opacity = 0.9
|
||||
} else {
|
||||
rangeRing.visible = false
|
||||
}
|
||||
|
||||
rangeRing.position.y = 0.03 + Math.sin(now * 5) * 0.01
|
||||
|
||||
updatePopupPositions(nowMs)
|
||||
|
||||
camera.lookAt(0, 0, 0)
|
||||
renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
tick()
|
||||
}
|
||||
|
||||
const disposeScene = () => {
|
||||
cancelAnimationFrame(frameId)
|
||||
resizeObserver?.disconnect()
|
||||
|
||||
if (renderer) {
|
||||
renderer.domElement.removeEventListener('pointerdown', onPointerDown)
|
||||
}
|
||||
|
||||
if (viewport.value && renderer && viewport.value.contains(renderer.domElement)) {
|
||||
viewport.value.removeChild(renderer.domElement)
|
||||
}
|
||||
|
||||
scene?.traverse((object) => {
|
||||
const mesh = object as THREE.Mesh
|
||||
if (mesh.geometry) mesh.geometry.dispose()
|
||||
|
||||
const material = mesh.material
|
||||
if (Array.isArray(material)) {
|
||||
material.forEach((m) => m.dispose())
|
||||
} else if (material) {
|
||||
material.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
renderer?.dispose()
|
||||
|
||||
renderer = null
|
||||
scene = null
|
||||
camera = null
|
||||
resizeObserver = null
|
||||
playerUnit = null
|
||||
enemyUnit = null
|
||||
playerAura = null
|
||||
enemyAura = null
|
||||
rangeRing = null
|
||||
playerAttackFx = null
|
||||
enemyAttackFx = null
|
||||
popups.value = []
|
||||
playerHitUntilMs = 0
|
||||
enemyHitUntilMs = 0
|
||||
resetPendingAction()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => gameState.battle.active,
|
||||
async (active) => {
|
||||
if (active) {
|
||||
await initScene()
|
||||
} else {
|
||||
disposeScene()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
() => gameState.battle.turn,
|
||||
(turn) => {
|
||||
if (turn !== 'player') {
|
||||
resetPendingAction()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
if (gameState.battle.active) {
|
||||
await initScene()
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(disposeScene)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="gameState.battle.active" class="battle-overlay">
|
||||
<section class="battle-stage">
|
||||
<div class="battle-viewport-wrap">
|
||||
<div ref="viewport" class="battle-viewport" />
|
||||
|
||||
<div class="popup-layer">
|
||||
<div
|
||||
v-for="popup in popups"
|
||||
:key="popup.id"
|
||||
class="damage-popup"
|
||||
:class="popupClass(popup)"
|
||||
:style="popupStyle(popup)"
|
||||
>
|
||||
{{ popupText(popup) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="battle-hud">
|
||||
<header class="battle-head">
|
||||
<h2>俯视战斗：{{ gameState.battle.enemyName }}</h2>
|
||||
<p>{{ gameState.battle.message }}</p>
|
||||
<p v-if="hudHint" class="hint">{{ hudHint }}（点击敌方单位）</p>
|
||||
</header>
|
||||
|
||||
<div class="bars">
|
||||
<div>
|
||||
<strong>我方</strong>
|
||||
<p>HP {{ gameState.hp }} | MP {{ gameState.mp }} | 药草 {{ gameState.player.potions }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<strong>敌方</strong>
|
||||
<p>HP {{ gameState.battle.enemyHp }} / {{ gameState.battle.enemyMaxHp }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions" v-if="gameState.battle.turn !== 'resolved'">
|
||||
<button :disabled="gameState.battle.turn !== 'player'" @click="runAction('attack')">攻击</button>
|
||||
<button :disabled="gameState.battle.turn !== 'player'" @click="runAction('skill')">技能</button>
|
||||
<button :disabled="gameState.battle.turn !== 'player'" @click="runAction('defend')">防御</button>
|
||||
<button :disabled="gameState.battle.turn !== 'player'" @click="runAction('item')">道具</button>
|
||||
</div>
|
||||
|
||||
<div class="result" v-else>
|
||||
<p>{{ gameState.battle.victory ? '战斗胜利' : '战斗失败' }}</p>
|
||||
<button @click="closeBattle">返回探索</button>
|
||||
</div>
|
||||
|
||||
<ul class="log">
|
||||
<li v-for="(line, index) in gameState.battle.log" :key="`${index}-${line}`">{{ line }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.battle-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
background: radial-gradient(circle at center, rgba(14, 21, 28, 0.86), rgba(5, 9, 12, 0.95));
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.battle-stage {
|
||||
width: min(1060px, 100%);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(260px, 58vh) auto;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.battle-viewport-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.battle-viewport {
|
||||
border: 1px solid #3b556a;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
|
||||
background: #101a22;
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.popup-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.damage-popup {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate(0, 0);
|
||||
font-weight: 700;
|
||||
font-size: 23px;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
|
||||
white-space: nowrap;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
.damage-popup.hp {
|
||||
color: #ffb07e;
|
||||
}
|
||||
|
||||
.damage-popup.mp {
|
||||
color: #6fcbff;
|
||||
}
|
||||
|
||||
.damage-popup.heal {
|
||||
color: #7ef7a6;
|
||||
}
|
||||
|
||||
.damage-popup.crit {
|
||||
color: #ffe26a;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.battle-hud {
|
||||
border: 1px solid #304758;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #13212c, #0f1a23);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.battle-head h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.battle-head p {
|
||||
margin: 4px 0 0;
|
||||
color: #9ec1d8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.battle-head .hint {
|
||||
color: #ffd988;
|
||||
}
|
||||
|
||||
.bars {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bars > div {
|
||||
border: 1px solid #304758;
|
||||
border-radius: 8px;
|
||||
padding: 8px 10px;
|
||||
background: #162734;
|
||||
}
|
||||
|
||||
.bars p {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #44657e;
|
||||
border-radius: 8px;
|
||||
background: #1e3546;
|
||||
color: #d7e0e6;
|
||||
padding: 9px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.log {
|
||||
margin: 10px 0 0;
|
||||
border: 1px solid #304758;
|
||||
border-radius: 8px;
|
||||
background: #0f1b24;
|
||||
padding: 10px 12px;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
max-height: 140px;
|
||||
overflow: auto;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.battle-stage {
|
||||
grid-template-rows: minmax(230px, 48vh) auto;
|
||||
}
|
||||
|
||||
.bars {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useGameState } from '../game/state'
|
||||
|
||||
const stats = useGameState()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="panel">
|
||||
<h2>调试状态</h2>
|
||||
<ul>
|
||||
<li>Lv. {{ stats.level }}</li>
|
||||
<li>HP: {{ stats.hp }}</li>
|
||||
<li>MP: {{ stats.mp }}</li>
|
||||
<li>药草: {{ stats.player.potions }}</li>
|
||||
<li>区域: {{ stats.area }}</li>
|
||||
<li>坐标: {{ stats.positionText }}</li>
|
||||
<li>移速: {{ stats.moveSpeed.toFixed(1) }}</li>
|
||||
<li>遇敌计量: {{ stats.encounterMeter.toFixed(0) }}</li>
|
||||
<li>场景状态: {{ stats.sceneMode }}</li>
|
||||
<li>战斗状态: {{ stats.battle.active ? '战斗中' : '未战斗' }}</li>
|
||||
<li>任务: {{ stats.quest.title }}</li>
|
||||
<li>任务状态: {{ stats.quest.status }}</li>
|
||||
<li>任务进度: {{ stats.quest.currentKills }} / {{ stats.quest.targetKills }}</li>
|
||||
</ul>
|
||||
<p class="notice">{{ stats.notice }}</p>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
background: linear-gradient(180deg, #1e2b33, #172127);
|
||||
border: 1px solid #2c3d49;
|
||||
border-radius: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin: 10px 0 0;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
background: #20313d;
|
||||
color: #9bc2da;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import { useGameState } from '../game/state'
|
||||
|
||||
const gameState = useGameState()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="gameState.sceneMode === 'battleTransition'" class="overlay">
|
||||
<div class="flash" />
|
||||
<p>Encounter...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 45;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15), rgba(8, 12, 16, 0.95));
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
.flash {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
-30deg,
|
||||
rgba(255, 255, 255, 0.06) 0px,
|
||||
rgba(255, 255, 255, 0.06) 6px,
|
||||
transparent 6px,
|
||||
transparent 18px
|
||||
);
|
||||
animation: stripeMove 0.7s linear infinite;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
letter-spacing: 1px;
|
||||
color: #e6eef4;
|
||||
text-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
@keyframes stripeMove {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "esnext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
})
|
||||
60
计划清单.md
60
计划清单.md
|
|
@ -1,60 +0,0 @@
|
|||
# BOF3 风格 RPG 开发计划清单
|
||||
|
||||
## 使用说明
|
||||
- [ ] 每完成一项就勾选，优先保证“可玩闭环”。
|
||||
- [ ] 所有系统尽量数据驱动（配置文件），减少硬编码。
|
||||
- [ ] 每周结束至少产出一个可运行版本。
|
||||
|
||||
## 里程碑 0：项目初始化（第 1 周）
|
||||
- [ ] 初始化前端工程（Vue 3 + TypeScript + Vite）。
|
||||
- [ ] 集成 Three.js，跑通基础 3D 场景。
|
||||
- [ ] 建立目录结构（`src/core`、`src/game`、`src/ui`、`src/data`）。
|
||||
- [ ] 建立状态管理（玩家状态、场景状态、战斗状态）。
|
||||
- [ ] 接入输入系统（键盘/手柄映射预留）。
|
||||
- [ ] 完成主循环基础（update/render 分离）。
|
||||
- [ ] 输出一个“可移动角色 + 固定相机”的最小场景。
|
||||
|
||||
## 里程碑 1：探索玩法（第 2 周）
|
||||
- [ ] 搭建一个小地图（城镇或迷宫二选一）。
|
||||
- [ ] 实现角色移动、碰撞、触发器。
|
||||
- [ ] 实现 NPC 对话框系统（支持多段文本）。
|
||||
- [ ] 实现传送点/场景切换。
|
||||
- [ ] 实现随机遇敌触发（可配置概率）。
|
||||
- [ ] 场景 UI：小地图/状态栏（HP、MP）。
|
||||
|
||||
## 里程碑 2：回合制战斗 MVP（第 3 周）
|
||||
- [ ] 战斗场景切入/切出流程。
|
||||
- [ ] 行动顺序系统（速度或时间条机制）。
|
||||
- [ ] 指令菜单：攻击、技能、道具、防御。
|
||||
- [ ] 目标选择逻辑（单体/群体）。
|
||||
- [ ] 伤害与命中公式（先做简化版）。
|
||||
- [ ] 胜负判定与战斗结算。
|
||||
- [ ] 至少 3 种敌人、3 个技能可用。
|
||||
|
||||
## 里程碑 3：成长与存档（第 4 周）
|
||||
- [ ] 经验与升级逻辑。
|
||||
- [ ] 角色属性成长（力量、防御、速度等）。
|
||||
- [ ] 装备系统（武器/防具基础版）。
|
||||
- [ ] 物品背包与消耗品效果。
|
||||
- [ ] 本地存档（IndexedDB 或 localStorage）。
|
||||
- [ ] 读档恢复场景与角色状态。
|
||||
|
||||
## 里程碑 4：内容整合与打磨（第 5-6 周）
|
||||
- [ ] 完成 10~20 分钟可玩流程。
|
||||
- [ ] 至少 1 个短任务链（接任务->战斗->回报）。
|
||||
- [ ] 补齐音效与基础 BGM 切换。
|
||||
- [ ] 增加战斗反馈（受击闪烁、技能特效、数字飘字）。
|
||||
- [ ] 关键性能优化（减少 draw call、纹理压缩、对象池）。
|
||||
- [ ] 基础设置菜单（音量、按键、画质档位）。
|
||||
|
||||
## 技术债与风险清单（持续跟踪）
|
||||
- [ ] 资源版权检查（严禁直接使用原作素材）。
|
||||
- [ ] 战斗与探索状态切换稳定性。
|
||||
- [ ] 数据配置版本兼容（旧存档升级策略）。
|
||||
- [ ] 移动端/低端设备帧率监控。
|
||||
|
||||
## 验收标准（Demo）
|
||||
- [ ] 玩家能完成“探索 -> 遇敌 -> 战斗 -> 结算 -> 存档/读档”全链路。
|
||||
- [ ] 连续游玩 15 分钟无阻断性 Bug。
|
||||
- [ ] 平均帧率达到目标（例如桌面端 60 FPS、低端设备 30 FPS）。
|
||||
- [ ] 主要系统可通过配置扩展内容（怪物、技能、道具）。
|
||||
Loading…
Reference in New Issue