@shijiu/jsview-vue-samples 2.3.0 → 2.3.728-alpha.0

package/FreeMove/TestScene1.vue

@@ -0,0 +1,260 @@
+<template>
+  <jsv-focus-block name="TestScene1" :onAction="onActionObj">
+    <div :style="style.sceneRoot">
+      <div :style="style.tipText">Press OK to pause/resume</div>
+      <div :style="style.horizontalBoundaryLeftMark"></div>
+      <div :style="style.horizontalBoundaryRightMark"></div>
+      <jsv-free-move-actor ref="horizontalActorRef" :top="HORIZONTAL_ACTOR_TOP" :left="0" :width="ACTOR_SIZE" :height="ACTOR_SIZE">
+        <div :style="style.horizontalBox"></div>
+      </jsv-free-move-actor>
+      <div :style="style.verticalBoundaryTopMark"></div>
+      <div :style="style.verticalBoundaryBottomMark"></div>
+      <jsv-free-move-actor ref="verticalActorRef" :top="0" :left="0" :width="ACTOR_SIZE" :height="ACTOR_SIZE">
+        <div :style="style.verticalBox"></div>
+      </jsv-free-move-actor>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveActor, FreeMoveApis, useFocusHub } from "jsview";
+import { shallowRef, onMounted, nextTick } from "vue";
+
+// 横向与纵向分别使用独立边界和速度，避免同节奏撞边
+const HORIZONTAL_MIN_X = 100;
+const HORIZONTAL_MAX_X = 460;
+const FIXED_X = 620;
+const VERTICAL_MIN_Y = 100;
+const VERTICAL_MAX_Y = 500;
+const HORIZONTAL_SPEED = 7;
+const VERTICAL_SPEED = 4;
+const HORIZONTAL_ACTOR_TOP = 220;
+const ACTOR_SIZE = 80;
+
+// 在script中定义style比 style scoped 执行速度更快
+const style = {
+  sceneRoot: {
+    width: 1280,
+    height: 720,
+    backgroundColor: "#102030",
+  },
+  tipText: {
+    left: 60,
+    top: 80,
+    width: 420,
+    height: 40,
+    lineHeight: 40,
+    fontSize: 30,
+    color: "#ffffff",
+  },
+  horizontalBoundaryLeftMark: {
+    left: HORIZONTAL_MIN_X - 6,
+    top: HORIZONTAL_ACTOR_TOP - 10,
+    width: 6,
+    height: 100,
+    backgroundColor: "#ffd666",
+  },
+  horizontalBoundaryRightMark: {
+    left: HORIZONTAL_MAX_X,
+    top: HORIZONTAL_ACTOR_TOP - 10,
+    width: 6,
+    height: 100,
+    backgroundColor: "#ffd666",
+  },
+  verticalBoundaryTopMark: {
+    left: FIXED_X - 10,
+    top: VERTICAL_MIN_Y - 6,
+    width: 100,
+    height: 6,
+    backgroundColor: "#95de64",
+  },
+  verticalBoundaryBottomMark: {
+    left: FIXED_X - 10,
+    top: VERTICAL_MAX_Y,
+    width: 100,
+    height: 6,
+    backgroundColor: "#95de64",
+  },
+  horizontalBox: {
+    width: 80,
+    height: 80,
+    backgroundColor: "#ff7a45",
+  },
+  verticalBox: {
+    width: 80,
+    height: 80,
+    backgroundColor: "#36cfc9",
+  },
+};
+
+const horizontalActorRef = shallowRef(null);
+const verticalActorRef = shallowRef(null);
+const paused = shallowRef(false);
+const focusHub = useFocusHub();
+let horizontalActorControl = null;
+let verticalActorControl = null;
+
+// 自定义事件总线：用于集中控制所有 actor 的暂停/恢复
+// 一个事件可以同时控制两个actor, 当然也可以分开控制
+const pauseNexus = FreeMoveApis.newNexus();
+const resumeNexus = FreeMoveApis.newNexus();
+
+// 预制条件名称, 用于区分不同方向的resume条件
+const RESUME_POS_X_SPEC = "resume-pos-x";
+const RESUME_NEG_X_SPEC = "resume-neg-x";
+const RESUME_POS_Y_SPEC = "resume-pos-y";
+const RESUME_NEG_Y_SPEC = "resume-neg-y";
+
+const setupHorizontalLoopConditions = () => {
+  horizontalActorControl.run((cmds) => [
+    // 先清空旧条件，避免重复注册造成逻辑叠加
+    cmds.state().clearAllConditions(),
+    // 到达右边界后反向向左移动
+    cmds
+      .condition({ multiTimes: true })
+      .positionWall("right", HORIZONTAL_MAX_X - ACTOR_SIZE) // 边界位置指的是actor左上角, 所以减去actor尺寸避免穿模
+      .then([
+        cmds.state().alignPosition(), // 校准位置到边界, 避免穿模
+        cmds.action().setSpeed(-HORIZONTAL_SPEED, 0),
+        cmds.state().deactiveCondition(undefined, RESUME_POS_X_SPEC),
+        cmds.state().activeCondition(undefined, RESUME_NEG_X_SPEC),
+      ]),
+    // 到达左边界后反向向右移动
+    cmds
+      .condition({ multiTimes: true })
+      .positionWall("left", HORIZONTAL_MIN_X)
+      .then([
+        cmds.state().alignPosition(), // 校准位置到边界, 避免穿模
+        cmds.action().setSpeed(HORIZONTAL_SPEED, 0),
+        cmds.state().deactiveCondition(undefined, RESUME_NEG_X_SPEC),
+        cmds.state().activeCondition(undefined, RESUME_POS_X_SPEC),
+      ]),
+    // 监听统一暂停事件
+    cmds
+      .condition({ multiTimes: true })
+      .onCustomNexus(pauseNexus)
+      .then([
+        cmds.action().stopMoving(false),
+      ]),
+    // resume 预制方案A：向右运动（默认激活）
+    cmds
+      .condition({ multiTimes: true, specName: RESUME_POS_X_SPEC })
+      .onCustomNexus(resumeNexus)
+      .then([cmds.action().setSpeed(HORIZONTAL_SPEED, 0)]),
+    // resume 预制方案B：向左运动（初始关闭）
+    cmds
+      .condition({ multiTimes: true, specName: RESUME_NEG_X_SPEC })
+      .onCustomNexus(resumeNexus)
+      .then([cmds.action().setSpeed(-HORIZONTAL_SPEED, 0)]),
+    cmds.state().deactiveCondition(undefined, RESUME_NEG_X_SPEC),
+  ]);
+};
+
+const setupVerticalLoopConditions = () => {
+  verticalActorControl.run((cmds) => [
+    cmds.state().clearAllConditions(),
+    // 到达下边界后反向向上移动
+    cmds
+      .condition({ multiTimes: true })
+      .positionWall("bottom", VERTICAL_MAX_Y - ACTOR_SIZE) // 边界位置指的是actor左上角, 所以减去actor尺寸避免穿模
+      .then([
+        cmds.state().alignPosition(), // 校准位置到边界, 避免穿模
+        cmds.action().setSpeed(0, -VERTICAL_SPEED),
+        cmds.state().deactiveCondition(undefined, RESUME_POS_Y_SPEC),
+        cmds.state().activeCondition(undefined, RESUME_NEG_Y_SPEC),
+      ]),
+    // 到达上边界后反向向下移动
+    cmds
+      .condition({ multiTimes: true })
+      .positionWall("top", VERTICAL_MIN_Y)
+      .then([
+        cmds.state().alignPosition(), // 校准位置到边界, 避免穿模
+        cmds.action().setSpeed(0, VERTICAL_SPEED),
+        cmds.state().deactiveCondition(undefined, RESUME_NEG_Y_SPEC),
+        cmds.state().activeCondition(undefined, RESUME_POS_Y_SPEC),
+      ]),
+    // 监听统一暂停事件
+    cmds
+      .condition({ multiTimes: true })
+      .onCustomNexus(pauseNexus)
+      .then([
+        cmds.action().stopMoving(false),
+      ]),
+    // resume 预制方案A：向下运动（默认激活）
+    cmds
+      .condition({ multiTimes: true, specName: RESUME_POS_Y_SPEC })
+      .onCustomNexus(resumeNexus)
+      .then([cmds.action().setSpeed(0, VERTICAL_SPEED)]),
+    // resume 预制方案B：向上运动（初始关闭）
+    cmds
+      .condition({ multiTimes: true, specName: RESUME_NEG_Y_SPEC })
+      .onCustomNexus(resumeNexus)
+      .then([cmds.action().setSpeed(0, -VERTICAL_SPEED)]),
+    cmds.state().deactiveCondition(undefined, RESUME_NEG_Y_SPEC),
+  ]);
+};
+
+const startLoopMotion = () => {
+  // 水平 actor 从左侧起点开始向右移动
+  horizontalActorControl.run((cmds) => [
+    cmds.state().setStartPos(HORIZONTAL_MIN_X, 0),
+    cmds.action().setSpeed(HORIZONTAL_SPEED, 0),
+  ]);
+  // 垂直 actor 在固定 X 上从上侧起点开始向下移动
+  verticalActorControl.run((cmds) => [
+    cmds.state().setStartPos(FIXED_X, VERTICAL_MIN_Y),
+    cmds.action().setSpeed(0, VERTICAL_SPEED),
+  ]);
+  paused.value = false;
+};
+
+const pauseMotion = () => {
+  // 广播暂停事件，让已绑定该 nexus 的 actor 一起停下
+  FreeMoveApis.fireCustomNexus(pauseNexus);
+  paused.value = true;
+};
+
+const resumeMotion = () => {
+  // 方向由预制 condition 的激活态决定，不依赖响应式变量
+  FreeMoveApis.fireCustomNexus(resumeNexus);
+  paused.value = false;
+};
+
+const togglePause = () => {
+  // 检查控制器是否存在，避免在组件挂载前调用
+  if (!horizontalActorControl || !verticalActorControl) {
+    return;
+  }
+  
+  // 根据暂停状态决定是暂停还是恢复
+  if (paused.value) {
+    resumeMotion();
+  } else {
+    pauseMotion();
+  }
+};
+
+const onKeyDown = (ev) => {
+  // 13 为 OK 键：切换暂停/恢复
+  if (ev.keyCode === 13) {
+    togglePause();
+    return true;
+  }
+  return false;
+};
+
+const onActionObj = {
+  onKeyDown,
+};
+
+onMounted(() => {
+  focusHub.setFocus("TestScene1");
+  
+  // 组件挂载后获取控制器并初始化条件，再启动循环运动
+  horizontalActorControl = horizontalActorRef.value.control;
+  verticalActorControl = verticalActorRef.value.control;
+  setupHorizontalLoopConditions();
+  setupVerticalLoopConditions();
+  startLoopMotion();
+});
+</script>

package/FreeMove/TestScene3.vue

@@ -0,0 +1,431 @@
+<template>
+  <jsv-focus-block name="TestScene3">
+    <div :style="style.sceneRoot">
+      <div :style="style.tipText">
+        Test updateBaseOffset: hit walls and rebuild boundary continuously
+      </div>
+
+      <div :style="leftBoundaryStyle"></div>
+      <div :style="rightBoundaryStyle"></div>
+      <div :style="reachMarkerStyle">
+        {{  "重合后+1" }}
+      </div>
+      <div :style="topBoundaryStyle"></div>
+      <div :style="bottomBoundaryStyle"></div>
+      <div :style="verticalReachMarkerStyle">
+        {{ "重合后+1" }}
+      </div>
+
+      <jsv-free-move-div ref="freeMoveRef" :style="freeMoveContainerStyle">
+        <div :style="style.actorBody">{{ hitCounter }}</div>
+      </jsv-free-move-div>
+      <jsv-free-move-div
+        ref="verticalFreeMoveRef"
+        :style="verticalFreeMoveContainerStyle"
+      >
+        <div :style="style.verticalActorBody">{{ verticalHitCounter }}</div>
+      </jsv-free-move-div>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<script setup>
+import { JsvFreeMoveDiv, useFocusHub, FreeMoveDef } from "jsview";
+import { computed, onMounted, shallowRef } from "vue";
+
+const ORIGIN_LEFT = 420;
+const ORIGIN_TOP = 300;
+const TRACK_SPAN = 420;
+const ACTOR_SIZE = 80;
+// 初始时让 actor 处于左右边界中点
+const INITIAL_GAP = (TRACK_SPAN - ACTOR_SIZE) / 2;
+const SPEED_X = 8;
+const VERTICAL_ORIGIN_LEFT = 860;
+// 720 高度下，80 尺寸 actor 的 top 居中位置是 (720 - 80) / 2 = 320
+const VERTICAL_ORIGIN_TOP = 320;
+const SPEED_Y = 8;
+const LEFT_BOUNDARY_NAME = "boundary-left";
+const RIGHT_BOUNDARY_NAME = "boundary-right";
+const TOP_BOUNDARY_NAME = "boundary-top";
+const BOTTOM_BOUNDARY_NAME = "boundary-bottom";
+// 中点 reach 条件的名字，后续不参与撞边重建流程
+const REACH_POSITION_NAME = "reach-position-middle";
+const VERTICAL_REACH_POSITION_NAME = "reach-position-middle-vertical";
+// FreeMove 的局部坐标中，起点就是 (0,0)，这里用 x=0 作为“中点穿越”监听线
+const REACH_X = 0;
+const REACH_Y = 0;
+
+const freeMoveRef = shallowRef(null);
+const verticalFreeMoveRef = shallowRef(null);
+const focusHub = useFocusHub();
+let freeMoveControl = null;
+let verticalFreeMoveControl = null;
+
+const containerLeft = shallowRef(ORIGIN_LEFT);
+const containerTop = shallowRef(ORIGIN_TOP);
+const leftGap = shallowRef(INITIAL_GAP);
+const rightGap = shallowRef(INITIAL_GAP);
+const verticalContainerLeft = shallowRef(VERTICAL_ORIGIN_LEFT);
+const verticalContainerTop = shallowRef(VERTICAL_ORIGIN_TOP);
+const topGap = shallowRef(INITIAL_GAP);
+const bottomGap = shallowRef(INITIAL_GAP);
+// 命中中点时进行 1~10 循环计数
+const hitCounter = shallowRef(1);
+const verticalHitCounter = shallowRef(1);
+
+const style = {
+  sceneRoot: {
+    width: 1280,
+    height: 720,
+    backgroundColor: "#0b1a2c",
+  },
+  tipText: {
+    left: 48,
+    top: 72,
+    width: 980,
+    height: 40,
+    lineHeight: 40,
+    fontSize: 28,
+    color: "#fefefe",
+  },
+  actorBody: {
+    width: ACTOR_SIZE,
+    height: ACTOR_SIZE,
+    backgroundColor: "#ff9c6e",
+    color: "#112244",
+    fontSize: 32,
+    fontWeight: "bold",
+    textAlign: "center",
+    lineHeight: ACTOR_SIZE,
+  },
+  verticalActorBody: {
+    width: ACTOR_SIZE,
+    height: ACTOR_SIZE,
+    backgroundColor: "#69c0ff",
+    color: "#112244",
+    fontSize: 32,
+    fontWeight: "bold",
+    textAlign: "center",
+    lineHeight: ACTOR_SIZE,
+  },
+};
+
+const freeMoveContainerStyle = computed(() => ({
+  left: containerLeft.value,
+  top: containerTop.value,
+  width: ACTOR_SIZE,
+  height: ACTOR_SIZE,
+}));
+const verticalFreeMoveContainerStyle = computed(() => ({
+  left: verticalContainerLeft.value,
+  top: verticalContainerTop.value,
+  width: ACTOR_SIZE,
+  height: ACTOR_SIZE,
+}));
+
+// 左右边界是固定的
+const leftBoundaryStyle = {
+  left: containerLeft.value - leftGap.value - 6,
+  top: containerTop.value - 10,
+  width: 6,
+  height: ACTOR_SIZE + 20,
+  backgroundColor: "#ffd666",
+};
+const rightBoundaryStyle = {
+  left: containerLeft.value + rightGap.value + ACTOR_SIZE,
+  top: containerTop.value - 10,
+  width: 6,
+  height: ACTOR_SIZE + 20,
+  backgroundColor: "#ffd666",
+};
+const reachMarkerStyle = {
+  // 标记块固定绘制在初始中心位置，用于和 actor 视觉比对
+  left: ORIGIN_LEFT,
+  top: ORIGIN_TOP,
+  width: ACTOR_SIZE,
+  height: ACTOR_SIZE,
+  lineHeight: ACTOR_SIZE,
+  fontSize: 16,
+  fontWeight: "bold",
+  textAlign: "center",
+  borderWidth: 3,
+  borderStyle: "dashed",
+  borderColor: "#52c41a",
+  backgroundColor: "rgba(82, 196, 26, 0.18)",
+};
+const topBoundaryStyle = computed(() => ({
+  left: verticalContainerLeft.value - 10,
+  top: verticalContainerTop.value - topGap.value - 6,
+  width: ACTOR_SIZE + 20,
+  height: 6,
+  backgroundColor: "#73d13d",
+}));
+const bottomBoundaryStyle = computed(() => ({
+  left: verticalContainerLeft.value - 10,
+  top: verticalContainerTop.value + bottomGap.value + ACTOR_SIZE,
+  width: ACTOR_SIZE + 20,
+  height: 6,
+  backgroundColor: "#73d13d",
+}));
+const verticalReachMarkerStyle = {
+  // 标记块固定绘制在竖直运动的初始中心位置，用于和 actor 视觉比对
+  left: VERTICAL_ORIGIN_LEFT,
+  top: VERTICAL_ORIGIN_TOP,
+  width: ACTOR_SIZE,
+  height: ACTOR_SIZE,
+  lineHeight: ACTOR_SIZE,
+  fontSize: 16,
+  fontWeight: "bold",
+  textAlign: "center",
+  borderWidth: 3,
+  borderStyle: "dashed",
+  borderColor: "#13c2c2",
+  backgroundColor: "rgba(19, 194, 194, 0.18)",
+};
+
+const increaseCounter = () => {
+  // 计数器始终保持在 1~10 区间
+  hitCounter.value = hitCounter.value >= 10 ? 1 : hitCounter.value + 1;
+};
+const increaseVerticalCounter = () => {
+  // 计数器始终保持在 1~10 区间
+  verticalHitCounter.value =
+    verticalHitCounter.value >= 10 ? 1 : verticalHitCounter.value + 1;
+};
+
+const getStateXY = (stateInfo) => {
+  const x = stateInfo.xPos;
+  const y = stateInfo.yPos;
+  return { x, y };
+};
+
+const getLocalWallPos = () => {
+  return {
+    left: -leftGap.value,
+    right: rightGap.value,
+  };
+};
+const getLocalVerticalWallPos = () => {
+  return {
+    top: -topGap.value,
+    bottom: bottomGap.value,
+  };
+};
+
+// 撞边后的统一处理：
+// 1) 响应式更新容器left/top
+// 2) 用 updateBaseOffset 同步新基准
+// 3) 只清理并重建“对边”condition，本边保留到到达对面再清理
+// 注意：速度反转不在这里做，而是在 condition.then 内同步执行 scaleSpeed
+const applyBaseOffsetAndRebuild = (nextDirection, stateInfo) => {
+  if (!freeMoveControl) {
+    return;
+  }
+
+  // 获取当前actor的坐标(相对于当前div的top,left的相对坐标)
+  const { x: stateX, y: stateY } = getStateXY(stateInfo);
+
+  // 命中墙后，按当前x位移重建左右gap：向左时x为负，向右时x为正
+  leftGap.value += stateX;
+  rightGap.value -= stateX;
+
+  // 更新container的left坐标
+  containerLeft.value += stateX;
+
+  // offset 以 condition.then 回调里的 state.x/state.y 为准
+  const offsetX = stateX;
+  const localWalls = getLocalWallPos();
+
+  freeMoveControl.run((cmds) => [
+    // 关键校验点：style坐标变化后(通过containerLeft.value更新)，
+    // 必须同步到FreeMove内部基准系
+    cmds.state().updateBaseOffset(offsetX, 0),
+    // 单次只删除对边，本边保留（直到抵达对面再删除）
+    ...(nextDirection > 0
+      ? [
+          // 下次往右移动，只重建右墙；中点 reach 条件保持不变
+          cmds.state().removeConditionByName(RIGHT_BOUNDARY_NAME),
+          buildRightWallCondition(cmds, localWalls.right),
+        ]
+      : [
+          // 下次往左移动，只重建左墙；中点 reach 条件保持不变
+          cmds.state().removeConditionByName(LEFT_BOUNDARY_NAME),
+          buildLeftWallCondition(cmds, localWalls.left),
+        ]),
+  ]);
+};
+const applyVerticalBaseOffsetAndRebuild = (nextDirection, stateInfo) => {
+  if (!verticalFreeMoveControl) {
+    return;
+  }
+
+  // 获取当前actor的坐标(相对于当前div的top,left的相对坐标)
+  const { y: stateY } = getStateXY(stateInfo);
+
+  // 命中墙后，按当前y位移重建上下gap：向上时y为负，向下时y为正
+  topGap.value += stateY;
+  bottomGap.value -= stateY;
+
+  // 更新container的top坐标
+  verticalContainerTop.value += stateY;
+
+  // offset 以 condition.then 回调里的 state.x/state.y 为准
+  const offsetY = stateY;
+  const localWalls = getLocalVerticalWallPos();
+
+  verticalFreeMoveControl.run((cmds) => [
+    // 关键校验点：style坐标变化后(通过verticalContainerTop.value更新)，
+    // 必须同步到FreeMove内部基准系
+    cmds.state().updateBaseOffset(0, offsetY),
+    // 单次只删除对边，本边保留（直到抵达对面再删除）
+    ...(nextDirection > 0
+      ? [
+          // 下次往下移动，只重建下墙；中点 reach 条件保持不变
+          cmds.state().removeConditionByName(BOTTOM_BOUNDARY_NAME),
+          buildBottomWallCondition(cmds, localWalls.bottom),
+        ]
+      : [
+          // 下次往上移动，只重建上墙；中点 reach 条件保持不变
+          cmds.state().removeConditionByName(TOP_BOUNDARY_NAME),
+          buildTopWallCondition(cmds, localWalls.top),
+        ]),
+  ]);
+};
+
+const buildLeftWallCondition = (cmds, wallPos) => {
+  return cmds
+    .condition({ multiTimes: true, specName: LEFT_BOUNDARY_NAME })
+    .positionWall("left", wallPos)
+    .then([
+      cmds.state().alignPosition(),
+      // 反转速度放在then命令里同步执行，避免JS回调异步导致延迟
+      cmds.action(FreeMoveDef.KeepFlags.XY).scaleSpeed(-1, undefined),
+      (stateInfo) => {
+        // 命中左墙后重建基准和边界
+        applyBaseOffsetAndRebuild(1, stateInfo);
+      },
+    ]);
+};
+
+const buildRightWallCondition = (cmds, wallPos) => {
+  return cmds
+    .condition({ multiTimes: true, specName: RIGHT_BOUNDARY_NAME })
+    .positionWall("right", wallPos)
+    .then([
+      cmds.state().alignPosition(),
+      // 反转速度放在then命令里同步执行，避免JS回调异步导致延迟
+      cmds.action(FreeMoveDef.KeepFlags.XY).scaleSpeed(-1, undefined),
+      (stateInfo) => {
+        // 命中右墙后重建基准和边界
+        applyBaseOffsetAndRebuild(-1, stateInfo);
+      },
+    ]);
+};
+
+const buildReachCondition = (cmds) => {
+  return cmds
+    .condition({ multiTimes: true, specName: REACH_POSITION_NAME })
+    // 仅监听 x=0 的穿越，y 不限制
+    .reachPosition(REACH_X, undefined)
+    .then([
+      () => {
+        // 触达中点后回调 JS，测试 updateBaseOffset 对既有 condition 的影响
+        increaseCounter();
+      },
+    ]);
+};
+const buildTopWallCondition = (cmds, wallPos) => {
+  return cmds
+    .condition({ multiTimes: true, specName: TOP_BOUNDARY_NAME })
+    .positionWall("top", wallPos)
+    .then([
+      cmds.state().alignPosition(),
+      // 反转速度放在then命令里同步执行，避免JS回调异步导致延迟
+      cmds.action(FreeMoveDef.KeepFlags.XY).scaleSpeed(undefined, -1),
+      (stateInfo) => {
+        // 命中上墙后重建基准和边界
+        applyVerticalBaseOffsetAndRebuild(1, stateInfo);
+      },
+    ]);
+};
+const buildBottomWallCondition = (cmds, wallPos) => {
+  return cmds
+    .condition({ multiTimes: true, specName: BOTTOM_BOUNDARY_NAME })
+    .positionWall("bottom", wallPos)
+    .then([
+      cmds.state().alignPosition(),
+      // 反转速度放在then命令里同步执行，避免JS回调异步导致延迟
+      cmds.action(FreeMoveDef.KeepFlags.XY).scaleSpeed(undefined, -1),
+      (stateInfo) => {
+        // 命中下墙后重建基准和边界
+        applyVerticalBaseOffsetAndRebuild(-1, stateInfo);
+      },
+    ]);
+};
+const buildVerticalReachCondition = (cmds) => {
+  return cmds
+    .condition({ multiTimes: true, specName: VERTICAL_REACH_POSITION_NAME })
+    // 仅监听 y=0 的穿越，x 不限制
+    .reachPosition(undefined, REACH_Y)
+    .then([
+      () => {
+        // 触达中点后回调 JS，测试 updateBaseOffset 对既有 condition 的影响
+        increaseVerticalCounter();
+      },
+    ]);
+};
+
+// 初始只注册一套左右墙条件；后续由撞边回调动态重建
+const setupConditions = () => {
+  const localWalls = getLocalWallPos();
+  freeMoveControl.run((cmds) => [
+    // 场景重启时统一清理一次，再按“中点 + 左右墙”完整初始化
+    cmds.state().clearAllConditions(),
+    // 中点 reach 条件只在这里创建一次，后续撞边流程不删除/不重建
+    buildReachCondition(cmds),
+    buildLeftWallCondition(cmds, localWalls.left),
+    buildRightWallCondition(cmds, localWalls.right),
+  ]);
+};
+const setupVerticalConditions = () => {
+  const localWalls = getLocalVerticalWallPos();
+  verticalFreeMoveControl.run((cmds) => [
+    // 场景重启时统一清理一次，再按“中点 + 上下墙”完整初始化
+    cmds.state().clearAllConditions(),
+    // 中点 reach 条件只在这里创建一次，后续撞边流程不删除/不重建
+    buildVerticalReachCondition(cmds),
+    buildTopWallCondition(cmds, localWalls.top),
+    buildBottomWallCondition(cmds, localWalls.bottom),
+  ]);
+};
+
+const startMotion = () => {
+  freeMoveControl.run((cmds) => [
+    // 起始时左右gap相等，从中点出发
+    cmds.state().setStartPos(leftGap.value, 0),
+    cmds.action().setSpeed(-SPEED_X, 0),
+  ]);
+};
+const startVerticalMotion = () => {
+  verticalFreeMoveControl.run((cmds) => [
+    // 起始时上下gap相等，从中点出发
+    cmds.state().setStartPos(0, topGap.value),
+    cmds.action().setSpeed(0, -SPEED_Y),
+  ]);
+};
+
+onMounted(() => {
+  // 保证当前 scene 拿到焦点，便于直接测试键控/运动行为
+  focusHub.setFocus("TestScene3");
+  freeMoveControl = freeMoveRef.value?.control;
+  verticalFreeMoveControl = verticalFreeMoveRef.value?.control;
+  if (!freeMoveControl || !verticalFreeMoveControl) {
+    return;
+  }
+
+  setupConditions();
+  setupVerticalConditions();
+  startMotion();
+  startVerticalMotion();
+});
+</script>