秦汉
1 month ago
8 changed files with 428 additions and 5 deletions
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 934 B |
|
Before Width: | Height: | Size: 304 B After Width: | Height: | Size: 6.4 KiB |
@ -0,0 +1,318 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, onMounted } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { useCharacterStore } from '@/stores/character' |
||||
|
import Particles from '@/components/Particles/Particles.vue' |
||||
|
import TextType from '@/components/TextType/TextType.vue' |
||||
|
import StarBorder from '@/components/StarBorder/StarBorder.vue' |
||||
|
|
||||
|
const router = useRouter() |
||||
|
const characterStore = useCharacterStore() |
||||
|
|
||||
|
const currentPage = ref(0) |
||||
|
|
||||
|
interface TutorialPage { |
||||
|
title: string |
||||
|
content: string[] |
||||
|
} |
||||
|
|
||||
|
const tutorialPages: TutorialPage[] = [ |
||||
|
{ |
||||
|
title: '世界观', |
||||
|
content: [ |
||||
|
'天地未开，混沌一片。', |
||||
|
'亿万年前，域外天魔入侵，引发了远古神战。', |
||||
|
'战神以身化道，封印天魔于无尽虚空。', |
||||
|
'天地灵气开始复苏，修炼之道由此大兴。', |
||||
|
'玩家降临此界，将踏上修炼之路，寻求成仙之道。' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
title: '装备系统', |
||||
|
content: [ |
||||
|
'装备分为三大类：武器、防具、饰品。', |
||||
|
'武器增加攻击，如飞剑、长刀、长枪等。', |
||||
|
'防具增加防御和生命，如铠甲、法袍等。', |
||||
|
'饰品附加特殊属性，如戒指、项链、玉佩等。', |
||||
|
'装备品质分为：凡品、上品、精品、极品、仙器、神器。', |
||||
|
'高品质装备可通过锻造、掉落或交易获得。' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
title: '丹药系统', |
||||
|
content: [ |
||||
|
'丹药是修炼者不可或缺的资源。', |
||||
|
'修炼类：聚气丹、破境丹，帮助快速提升修为。', |
||||
|
'战斗类：回血丹、爆发丹，战斗时使用。', |
||||
|
'辅助类：隐身丹、传送符，特殊场合使用。', |
||||
|
'丹药可通过炼丹炉炼制，或击杀怪物掉落。', |
||||
|
'高品质丹药需要珍稀药材才能炼制。' |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
title: '境界体系', |
||||
|
content: [ |
||||
|
'修炼境界分为：炼气、筑基、金丹、元婴、化神、大乘、飞升。', |
||||
|
'每境界有九层，需积累足够经验才能突破。', |
||||
|
'突破需要满足境界条件，如修为、丹药等。', |
||||
|
'境界越高，属性加成越高，能力越强。', |
||||
|
'达到飞升境界，即可飞升仙界，寻求更高的道。' |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const totalPages = computed(() => tutorialPages.length) |
||||
|
const currentPageData = computed(() => tutorialPages[currentPage.value]) |
||||
|
const isLastPage = computed(() => currentPage.value === tutorialPages.length - 1) |
||||
|
|
||||
|
const goToNextPage = () => { |
||||
|
if (currentPage.value < tutorialPages.length - 1) { |
||||
|
currentPage.value++ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const goToPrevPage = () => { |
||||
|
if (currentPage.value > 0) { |
||||
|
currentPage.value-- |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const skipTutorial = () => { |
||||
|
localStorage.setItem('has_seen_tutorial', 'true') |
||||
|
router.push('/game') |
||||
|
} |
||||
|
|
||||
|
const startGame = () => { |
||||
|
localStorage.setItem('has_seen_tutorial', 'true') |
||||
|
router.push('/game') |
||||
|
} |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
await characterStore.fetchCharacters() |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="tutorial-page"> |
||||
|
<Particles :particle-count="50" :particle-colors="['#ffffff', '#cccccc']" class="particles-bg" /> |
||||
|
|
||||
|
<div class="tutorial-container"> |
||||
|
<div class="page-header"> |
||||
|
<TextType |
||||
|
:key="`title-${currentPage}`" |
||||
|
:text="[currentPageData.title]" |
||||
|
:typingSpeed="80" |
||||
|
:pauseDuration="1500" |
||||
|
:showCursor="false" |
||||
|
class="page-title" |
||||
|
/> |
||||
|
<span class="page-indicator">{{ currentPage + 1 }} / {{ totalPages }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="content-area"> |
||||
|
<div v-for="(line, lineIndex) in currentPageData.content" :key="`${currentPage}-${lineIndex}`" class="content-line"> |
||||
|
<TextType |
||||
|
:text="[line]" |
||||
|
:typingSpeed="30" |
||||
|
:pauseDuration="1000" |
||||
|
:initialDelay="lineIndex * 300" |
||||
|
:showCursor="false" |
||||
|
class="content-text" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pagination"> |
||||
|
<div class="page-dots"> |
||||
|
<span |
||||
|
v-for="(_, index) in tutorialPages" |
||||
|
:key="index" |
||||
|
class="dot" |
||||
|
:class="{ active: index === currentPage }" |
||||
|
@click="currentPage = index" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="page-actions"> |
||||
|
<button |
||||
|
class="nav-btn prev-btn" |
||||
|
:disabled="currentPage === 0" |
||||
|
@click="goToPrevPage" |
||||
|
> |
||||
|
上一页 |
||||
|
</button> |
||||
|
|
||||
|
<StarBorder as="div" color="#22c55e" speed="5s" :thickness="2"> |
||||
|
<button |
||||
|
v-if="isLastPage" |
||||
|
class="start-btn" |
||||
|
@click="startGame" |
||||
|
> |
||||
|
开始游戏 |
||||
|
</button> |
||||
|
<button |
||||
|
v-else |
||||
|
class="skip-btn" |
||||
|
@click="skipTutorial" |
||||
|
> |
||||
|
跳过 |
||||
|
</button> |
||||
|
</StarBorder> |
||||
|
|
||||
|
<button |
||||
|
class="nav-btn next-btn" |
||||
|
:disabled="currentPage === totalPages - 1" |
||||
|
@click="goToNextPage" |
||||
|
> |
||||
|
下一页 |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
.tutorial-page { |
||||
|
min-height: 100vh; |
||||
|
background: #000000; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.particles-bg { |
||||
|
position: fixed !important; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100% !important; |
||||
|
height: 100% !important; |
||||
|
} |
||||
|
|
||||
|
.tutorial-container { |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
padding: 40px 20px; |
||||
|
min-height: 100vh; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.page-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 32px; |
||||
|
} |
||||
|
|
||||
|
.page-title { |
||||
|
font-size: 1.5rem; |
||||
|
font-weight: bold; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.page-indicator { |
||||
|
color: #888888; |
||||
|
font-size: 0.875rem; |
||||
|
} |
||||
|
|
||||
|
.content-area { |
||||
|
flex: 1; |
||||
|
padding: 20px 0; |
||||
|
} |
||||
|
|
||||
|
.content-line { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.content-text { |
||||
|
font-size: 1rem; |
||||
|
line-height: 1.8; |
||||
|
color: #cccccc; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 24px 0; |
||||
|
} |
||||
|
|
||||
|
.page-dots { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
} |
||||
|
|
||||
|
.dot { |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(255, 255, 255, 0.2); |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.dot:hover { |
||||
|
background: rgba(255, 255, 255, 0.4); |
||||
|
} |
||||
|
|
||||
|
.dot.active { |
||||
|
background: #22c55e; |
||||
|
transform: scale(1.2); |
||||
|
} |
||||
|
|
||||
|
.page-actions { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
.nav-btn { |
||||
|
padding: 12px 20px; |
||||
|
background: rgba(255, 255, 255, 0.05); |
||||
|
border: 1px solid rgba(255, 255, 255, 0.1); |
||||
|
border-radius: 10px; |
||||
|
color: #888888; |
||||
|
font-size: 0.9rem; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
min-width: 80px; |
||||
|
} |
||||
|
|
||||
|
.nav-btn:hover:not(:disabled) { |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
border-color: rgba(255, 255, 255, 0.2); |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
|
||||
|
.nav-btn:disabled { |
||||
|
opacity: 0.3; |
||||
|
cursor: not-allowed; |
||||
|
} |
||||
|
|
||||
|
.start-btn, |
||||
|
.skip-btn { |
||||
|
padding: 12px 32px; |
||||
|
background: transparent; |
||||
|
border: none; |
||||
|
border-radius: 10px; |
||||
|
font-size: 1rem; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.start-btn { |
||||
|
color: #22c55e; |
||||
|
} |
||||
|
|
||||
|
.skip-btn { |
||||
|
color: #888888; |
||||
|
} |
||||
|
|
||||
|
.start-btn:hover, |
||||
|
.skip-btn:hover { |
||||
|
transform: translateY(-2px); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,74 @@ |
|||||
|
# 游戏教程功能设计 |
||||
|
|
||||
|
## 概述 |
||||
|
|
||||
|
创建一个游戏教程/介绍界面，在玩家创建角色后自动弹出，展示游戏世界观、装备系统、丹药系统、境界等级等信息，采用分页展示，使用 TextType 组件逐字显示文字。 |
||||
|
|
||||
|
## 功能需求 |
||||
|
|
||||
|
1. **自动触发**：玩家创建角色成功后自动弹出教程 |
||||
|
2. **手动触发**：游戏主界面有"游戏指南"按钮可再次查看 |
||||
|
3. **全屏弹窗**：覆盖整个屏幕的模态窗口 |
||||
|
4. **分页展示**：多个页面分别为世界观、装备、丹药、境界等 |
||||
|
5. **退出方式**：底部"跳过"按钮关闭 |
||||
|
|
||||
|
## UI/UX 设计 |
||||
|
|
||||
|
### 布局 |
||||
|
|
||||
|
- 全屏覆盖弹窗（`position: fixed`） |
||||
|
- 顶部：页面标题 + 页码指示器（如 1/4） |
||||
|
- 中间：内容区域，支持滚动 |
||||
|
- 底部："跳过"按钮 |
||||
|
|
||||
|
### 分页结构 |
||||
|
|
||||
|
1. **第一页：世界观** |
||||
|
- 游戏背景介绍 |
||||
|
- 修炼体系说明 |
||||
|
|
||||
|
2. **第二页：装备系统** |
||||
|
- 装备分类（武器、防具、饰品等） |
||||
|
- 装备品质说明 |
||||
|
|
||||
|
3. **第三页：丹药系统** |
||||
|
- 各类丹药介绍 |
||||
|
- 丹药用途 |
||||
|
|
||||
|
4. **第四页：境界等级** |
||||
|
- 境界划分 |
||||
|
- 修炼路线 |
||||
|
|
||||
|
### 交互 |
||||
|
|
||||
|
- 左右滑动或按钮切换页面 |
||||
|
- TextType 组件逐字显示文字 |
||||
|
- 最后一页显示"开始游戏"按钮 |
||||
|
|
||||
|
## 技术实现 |
||||
|
|
||||
|
### 文件结构 |
||||
|
|
||||
|
``` |
||||
|
Build_God_Game/src/views/TutorialView.vue # 新建 |
||||
|
Build_God_Game/src/router/index.ts # 修改 |
||||
|
``` |
||||
|
|
||||
|
### 路由 |
||||
|
|
||||
|
- 路径：`/tutorial` |
||||
|
- 需要认证：`requiresAuth: true` |
||||
|
|
||||
|
### 组件设计 |
||||
|
|
||||
|
- 使用 TextType 组件显示文字 |
||||
|
- 使用分页组件管理多页内容 |
||||
|
- 支持键盘/按钮导航 |
||||
|
|
||||
|
## 验收标准 |
||||
|
|
||||
|
1. 创建角色后自动跳转到教程页面 |
||||
|
2. 教程使用 TextType 动画显示文字 |
||||
|
3. 可通过分页按钮切换页面 |
||||
|
4. 点击"跳过"或"开始游戏"进入游戏主界面 |
||||
|
5. GameView 有"游戏指南"按钮可重新查看 |
||||
Loading…
Reference in new issue