From 823e4c5090666fe1936a40075b60fdde5ad015f1 Mon Sep 17 00:00:00 2001
From: zwt13703 <zwt13703@gmail.com>
Date: Sat, 11 Apr 2026 00:43:13 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E8=A7=92=E8=89=B2=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=EF=BC=9AWASD/=E6=96=B9=E5=90=91=E9=94=AE=20=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E3=80=82=20=20=202.=20=E7=A2=B0=E6=92=9E?=
 =?UTF-8?q?=E9=99=90=E5=88=B6=EF=BC=9A=E5=9C=B0=E5=9B=BE=E8=BE=B9=E7=95=8C?=
 =?UTF-8?q?=20+=20=E9=9A=9C=E7=A2=8D=E7=89=A9=E7=A2=B0=E6=92=9E=E9=98=BB?=
 =?UTF-8?q?=E6=8C=A1=E3=80=82=20=20=203.=20=E5=8C=BA=E5=9F=9F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=EF=BC=9A=E6=A0=B9=E6=8D=AE=E4=BD=8D=E7=BD=AE=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8C=BA=E5=9F=9F=E5=90=8D=EF=BC=88=E8=AE=AD=E7=BB=83?=
 =?UTF-8?q?=E5=B9=B3=E5=8E=9F/=E4=B8=9C=E4=BE=A7=E5=9D=A1=E9=81=93/?=
 =?UTF-8?q?=E8=A5=BF=E4=BE=A7=E8=8D=92=E5=9C=B0=EF=BC=89=E3=80=82=20=20=20?=
 =?UTF-8?q?4.=20=E4=BA=8B=E4=BB=B6=E5=8D=A0=E4=BD=8D=EF=BC=9A=E4=BC=A0?=
 =?UTF-8?q?=E9=80=81=E7=82=B9=E6=8E=A5=E8=A7=A6=E6=8F=90=E7=A4=BA=E3=80=81?=
 =?UTF-8?q?=E9=9A=8F=E6=9C=BA=E9=81=87=E6=95=8C=E8=AE=A1=E9=87=8F=E4=B8=8E?=
 =?UTF-8?q?=E8=A7=A6=E5=8F=91=E6=8F=90=E7=A4=BA=EF=BC=88=E4=B8=BA=E5=90=8E?=
 =?UTF-8?q?=E7=BB=AD=E6=88=98=E6=96=97=E5=88=87=E5=85=A5=E9=A2=84=E7=95=99?=
 =?UTF-8?q?=EF=BC=89=E3=80=82=20=20=205.=20UI=E8=81=94=E5=8A=A8=EF=BC=9A?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E9=9D=A2=E6=9D=BF=E5=AE=9E=E6=97=B6=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=9D=90=E6=A0=87=E3=80=81=E7=A7=BB=E9=80=9F=E3=80=81?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E3=80=81=E9=81=87=E6=95=8C=E8=AE=A1=E9=87=8F?=
 =?UTF-8?q?=E5=92=8C=E6=8F=90=E7=A4=BA=E4=BF=A1=E6=81=AF=E3=80=82=20=20=20?=
 =?UTF-8?q?6.=20=E6=9E=84=E5=BB=BA=E9=AA=8C=E8=AF=81=EF=BC=9Anpm=20run=20b?=
 =?UTF-8?q?uild=20=E5=B7=B2=E9=80=9A=E8=BF=87=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/tasks/task_detail_2026_04_11.md |  11 +++
 src/core/input.ts                    |  34 ++++++++
 src/data/gameConfig.ts               |   2 +-
 src/game/ThreeScene.vue              | 119 ++++++++++++++++++++++++++-
 src/game/state.ts                    |  14 ++++
 src/ui/StatusPanel.vue               |  22 +++--
 6 files changed, 191 insertions(+), 11 deletions(-)
 create mode 100644 src/core/input.ts
 create mode 100644 src/game/state.ts

diff --git a/docs/tasks/task_detail_2026_04_11.md b/docs/tasks/task_detail_2026_04_11.md
index 89309fe..a02c3cf 100644
--- a/docs/tasks/task_detail_2026_04_11.md
+++ b/docs/tasks/task_detail_2026_04_11.md
@@ -42,3 +42,14 @@
     3. 安装依赖并修复 TypeScript 构建问题，完成生产构建验证。
 - **执行结果**: 项目已可运行并可构建，页面可显示基础 3D 场景与 RPG 调试面板，作为后续探索/战斗系统开发起点。
 
+# 任务执行摘要
+
+## 会话 ID: 1775839250
+- [2026-04-11 00:40:50]
+- **执行原因**: 用户要求“继续完成”，希望在现有骨架上推进可玩功能。
+- **执行过程**:
+    1. 新增输入系统与共享游戏状态，支持键盘移动与状态同步展示。
+    2. 扩展 Three.js 场景逻辑，加入角色移动、边界与障碍碰撞、区域切换、传送点占位和随机遇敌计量。
+    3. 更新状态面板为实时数据显示，并执行构建验证确保可编译运行。
+- **执行结果**: 已完成探索层 MVP，玩家可在 3D 场景中移动并获得基础 RPG 反馈，项目继续可在此基础上对接战斗系统。
+
diff --git a/src/core/input.ts b/src/core/input.ts
new file mode 100644
index 0000000..b28dd6e
--- /dev/null
+++ b/src/core/input.ts
@@ -0,0 +1,34 @@
+export class KeyboardInput {
+  private readonly pressed = new Set<string>()
+
+  private readonly onKeyDown = (event: KeyboardEvent) => {
+    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()
+  }
+
+  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 }
+  }
+}
diff --git a/src/data/gameConfig.ts b/src/data/gameConfig.ts
index c8a99c7..e3bf8e8 100644
--- a/src/data/gameConfig.ts
+++ b/src/data/gameConfig.ts
@@ -1,4 +1,4 @@
 export const gameConfig = {
   title: 'Breath of Fire-like RPG Demo',
-  tagline: '里程碑 0: Vue + TypeScript + WebGL 基础骨架',
+  tagline: '里程碑 1: 可移动探索 + 碰撞 + 遇敌占位',
 }
diff --git a/src/game/ThreeScene.vue b/src/game/ThreeScene.vue
index e82d775..1d5fb8b 100644
--- a/src/game/ThreeScene.vue
+++ b/src/game/ThreeScene.vue
@@ -1,16 +1,61 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as THREE from 'three'
-import type { Object3D } from 'three'
+import type { Mesh, Object3D } from 'three'
 import { GameLoop } from '../core/loop'
+import { KeyboardInput } from '../core/input'
+import { 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
@@ -47,6 +92,23 @@ const initScene = () => {
   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)
+
+  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)
 
@@ -63,9 +125,56 @@ const initScene = () => {
   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) => {
-    hero.rotation.y += dt * 0.8
-    hero.position.y = 0.55 + Math.sin(performance.now() * 0.002) * 0.1
+    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
+          gameState.notice = '触发遇敌（占位）：可切入战斗场景'
+        }
+      } else {
+        gameState.notice = '前方有障碍，无法通过'
+      }
+
+      hero.rotation.y = Math.atan2(axis.x, axis.z)
+    }
+
+    portal.rotation.z += dt
+
+    if (hero.position.distanceTo(portal.position) < 1.1) {
+      gameState.notice = '进入传送点（占位）：可切换场景'
+    }
+
+    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)
@@ -77,6 +186,7 @@ const initScene = () => {
 
 const disposeScene = () => {
   loop?.stop()
+  keyboard?.stop()
   resizeObserver?.disconnect()
 
   if (root.value && renderer) {
@@ -84,7 +194,7 @@ const disposeScene = () => {
   }
 
   scene?.traverse((object: Object3D) => {
-    const mesh = object as THREE.Mesh
+    const mesh = object as Mesh
     if (mesh.geometry) mesh.geometry.dispose()
 
     const material = mesh.material
@@ -102,6 +212,7 @@ const disposeScene = () => {
   scene = null
   resizeObserver = null
   loop = null
+  keyboard = null
 }
 
 onMounted(initScene)
diff --git a/src/game/state.ts b/src/game/state.ts
new file mode 100644
index 0000000..37e7911
--- /dev/null
+++ b/src/game/state.ts
@@ -0,0 +1,14 @@
+import { reactive } from 'vue'
+
+const state = reactive({
+  hp: '120 / 120',
+  mp: '38 / 38',
+  level: 1,
+  area: '训练平原',
+  positionText: '(0.0, 0.0)',
+  moveSpeed: 3.2,
+  encounterMeter: 0,
+  notice: '按 WASD 或方向键移动',
+})
+
+export const useGameState = () => state
diff --git a/src/ui/StatusPanel.vue b/src/ui/StatusPanel.vue
index c7d41d0..b72c87f 100644
--- a/src/ui/StatusPanel.vue
+++ b/src/ui/StatusPanel.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-const stats = {
-  hp: '120 / 120',
-  mp: '38 / 38',
-  level: 1,
-  area: '训练平原',
-}
+import { useGameState } from '../game/state'
+
+const stats = useGameState()
 </script>
 
 <template>
@@ -15,7 +12,11 @@ const stats = {
       <li>HP: {{ stats.hp }}</li>
       <li>MP: {{ stats.mp }}</li>
       <li>区域: {{ stats.area }}</li>
+      <li>坐标: {{ stats.positionText }}</li>
+      <li>移速: {{ stats.moveSpeed.toFixed(1) }}</li>
+      <li>遇敌计量: {{ stats.encounterMeter.toFixed(0) }}</li>
     </ul>
+    <p class="notice">{{ stats.notice }}</p>
   </aside>
 </template>
 
@@ -40,4 +41,13 @@ ul {
   gap: 6px;
   font-size: 14px;
 }
+
+.notice {
+  margin: 10px 0 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: #20313d;
+  color: #9bc2da;
+  font-size: 12px;
+}
 </style>