@shijiu/jsview-vue-samples 2.1.200 → 2.1.340-test.0

package/ImpactStop/App.vue

@@ -1,50 +1,176 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-08-31 10:17:26
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-08-31 11:17:20
- * @Description: file content
--->
+<template>
+  <div>
+    <!-- 测试卡帧 -->
+    <div
+      class="test"
+      :style="{
+        animation: 'impact-stop-anim-rotate 1s infinite linear',
+      }"
+    >
+      {{ "测试卡帧" }}
+    </div>
+    <jsv-focus-block autoFocus :onAction="onActionObj">
+      <div :style="{ width: 1280, height: 720, backgroundColor: '#000000' }">
+        <!-- 滑块 -->
+        <jsv-free-move-actor
+          ref="actorRef"
+          :top="520 - 30 + 1"
+          :left="40"
+          :width="30"
+          :height="30"
+        >
+          <div
+            :style="{
+              width: 30,
+              height: 30,
+              backgroundColor: actorColor,
+            }"
+          ></div>
+        </jsv-free-move-actor>
+
+        <!-- 左边跳板 -->
+        <jsv-env-blocker
+          :top="520"
+          :left="40"
+          :width="400"
+          :height="5"
+          :topGID="1"
+          :bottomGID="2"
+          :leftGID="3"
+          :rightGID="4"
+        >
+          <div
+            :style="{
+              width: 400,
+              height: 5,
+              backgroundColor: 'rgba(255,255,0,1)',
+            }"
+          ></div>
+        </jsv-env-blocker>
+
+        <!-- 中间跳板 -->
+        <jsv-env-blocker
+          :top="320"
+          :left="540"
+          :width="200"
+          :height="5"
+          :topGID="1"
+          :bottomGID="2"
+          :leftGID="3"
+          :rightGID="4"
+        >
+          <div
+            :style="{
+              width: 200,
+              height: 5,
+              backgroundColor: 'rgba(255,255,0,1)',
+            }"
+          ></div>
+        </jsv-env-blocker>
+
+        <!-- 右边跳板 -->
+        <jsv-env-blocker
+          :top="520"
+          :left="840"
+          :width="400"
+          :height="5"
+          :topGID="1"
+          :bottomGID="2"
+          :leftGID="3"
+          :rightGID="4"
+        >
+          <div
+            :style="{
+              width: 400,
+              height: 5,
+              backgroundColor: 'rgba(255,255,0,1)',
+            }"
+          ></div>
+        </jsv-env-blocker>
+
+        <!-- 底板 -->
+        <jsv-env-blocker
+          :top="620"
+          :left="40"
+          :width="1200"
+          :height="5"
+          :topGID="1"
+          :bottomGID="2"
+          :leftGID="3"
+          :rightGID="4"
+        >
+          <div
+            :style="{
+              width: 1200,
+              height: 5,
+              backgroundColor: '#F0FFF0',
+            }"
+          ></div>
+        </jsv-env-blocker>
+
+        <!-- 标题区域 -->
+        <div
+          :style="{
+            textAlign: 'center',
+            fontSize: 30,
+            lineHeight: 50,
+            color: '#ffffff',
+            left: 100,
+            top: 20,
+            width: 1280 - 200,
+            height: 50,
+            backgroundColor: 'rgba(27,38,151,0.8)',
+          }"
+        >
+          JsView环境下不会穿透模型
+        </div>
+
+        <!-- 大多数设备的文字宽度时405, 但某些android 9.0设备上文字宽度是407 -->
+        <div
+          key="PrecisionGuideText"
+          class="text"
+          :style="{ top: 528, left: 40, width: 407, height: 40 }"
+        >
+          JSV下,立刻起跳会精确到边缘
+        </div>
+
+        <!-- 提示文字 -->
+        <div
+          key="GuideText1"
+          class="text"
+          :style="{ top: 625, left: 370, width: 540, height: 40 }"
+        >
+          左右键调整跳跃起点，按OK键进行跳跃
+        </div>
+
+        <!-- 方向提示 -->
+        <div
+          key="DirectText"
+          class="text"
+          :style="{ top: 150, left: 425, width: 430, height: 40 }"
+        >
+          {{ `当前方向:${direction > 0 ? "->" : "<-"}` }}
+        </div>
+      </div>
+    </jsv-focus-block>
+  </div>
+</template>
+
 <script setup>
 import {
-  JsvActorMoveControl,
-  JsvActorMove,
-  createImpactTracer,
-  createImpactCallback,
-  createImpactAutoFroze,
+  JsvFreeMoveActor,
+  FreeMoveDef,
+  JsvEnvBlocker,
+  FreeMoveFunc,
 } from "jsview";
-import { shallowRef, computed, onMounted, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
-const router = useRouter();
-const CONST_BOARD_LEFT = 0;
-const CONST_BOARD_RIGHT = 1;
-const CONST_BOARD_MID = 2;
-
-const CONST_BOX_WIDTH = 30;
-const CONST_BOX_HEIGHT = 30;
-
-const horizontalControl = new JsvActorMoveControl();
-const verticalControl = new JsvActorMoveControl();
-
-const boxLeft = shallowRef(null);
-const boxMid = shallowRef(null);
-const boxRight = shallowRef(null);
-const actor = shallowRef(null);
-
-let actorVertical = shallowRef(null);
-let actorHorizontal = shallowRef(null);
-
-let viewsAutoFroze = null;
-let sensorList = [];
-let onBoard = CONST_BOARD_LEFT;
-let keyPressed = false;
-const actorState = {
-  jumping: false,
-  hMoving: false,
-};
-const showPrecisionGuild = shallowRef(true);
+import { shallowRef, computed, onMounted } from "vue";
+let actorControl = null;
+let actorRef = shallowRef(null);
 const direction = shallowRef(1);
 const bodyState = shallowRef(0);
+let board = "left";
+let jumping = false;
+const actEvents = FreeMoveDef.ActEventDefine;
 
 const actorColor = computed(() => {
   switch (bodyState.value) {
@@ -58,378 +184,211 @@ const actorColor = computed(() => {
       return "#FFFFFF";
   }
 });
+//键盘事件
+const procKeyDown = (ev) => {
+  if (jumping) {
+    // 跳跃中，键盘锁定
+    return true;
+  }
+  switch (ev.keyCode) {
+    case 13:
+      jumping = true;
+
+      let interactNexus = FreeMoveFunc.newNexus();
+
+      actorControl.run([
+        actorControl.state().clearAllConditions(),
+        actorControl
+          .condition()
+          .onNextTick(1)
+          .then([
+            () => {
+              bodyState.value = 1;
+            },
+            actorControl
+              .condition()
+              .onHitBlock(1)
+              .then([
+                () => {
+                  console.log("LudlDebug on hit 1");
+                  bodyState.value = 0;
+                },
+                actorControl.state().revertWithHitBlock(),
+                actorControl.action().stopMoving(),
+                (a) => {
+                  jumping = false;
+
+                  console.log("LudlDebug on hit 1~", a);
+
+                  if (a.yPos <= -200) {
+                    board = "middle";
+                  } else if (a.yPos <= 0) {
+                    if (a.xPos < 440) {
+                      board = "left";
+                      direction.value = 1;
+                    } else {
+                      board = "right";
+                      direction.value = 0;
+                    }
+                  } else {
+                    reset();
+                  }
+                },
+              ]),
+          ]),
+      ]);
+
+      if (direction.value) {
+        actorControl.run([
+          actorControl
+            .action(0, 0, interactNexus)
+            .setSpdAndAccel(7.9, -24, undefined, 1, null, () => {}),
+          actorControl
+            .condition()
+            .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
+            .then([
+              () => {
+                bodyState.value = 2;
+              },
+            ]),
+        ]);
+      } else {
+        actorControl.run([
+          actorControl
+            .action(0, 0, interactNexus)
+            .setSpdAndAccel(-7.9, -24, undefined, 1, null, () => {}),
+          actorControl
+            .condition()
+            .onNexusEvent(interactNexus, actEvents.SpeedRevertY)
+            .then([
+              () => {
+                bodyState.value = 2;
+              },
+            ]),
+        ]);
+      }
 
-const onImpact = (impact_type) => {
-  // 根据碰撞层来调整滑块的状态(接触板信息)
-  console.log(`On impacted type=${impact_type}`);
-  bodyState.value = 0;
-  onBoard = impact_type;
-  switch (impact_type) {
-    case CONST_BOARD_MID:
-      verticalControl.jumpTo(0, -200); // jumpTo处理微小穿模的复位，-200为中间层和起始位置的高度差
-      horizontalControl.pause();
       break;
-    case CONST_BOARD_LEFT:
-      verticalControl.jumpTo(0, 0);
-      horizontalControl.pause();
-      direction.value = 1;
+    case 37:
+      if (board == "left") {
+        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(0, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      } else if (board == "right") {
+        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(840 - 40, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      } else if (board == "middle") {
+        actorControl.run([actorControl.action().setSpeed(-5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(540 - 40, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      }
       break;
-    case CONST_BOARD_RIGHT:
-      verticalControl.jumpTo(0, 0);
-      horizontalControl.pause();
-      direction.value = -1; // 反向
-      break;
-    default:
+    case 39:
+      if (board == "left") {
+        actorControl.run([actorControl.action().setSpeed(5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(410 - 40, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      } else if (board == "right") {
+        actorControl.run([actorControl.action().setSpeed(5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(1240 - 30 - 40, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      } else if (board == "middle") {
+        actorControl.run([actorControl.action().setSpeed(5, 0)]);
+        actorControl.run([
+          actorControl.state().clearAllConditions(),
+          actorControl
+            .condition()
+            .reachPosition(740 - 40 - 30, undefined)
+            .then([actorControl.action().stopMoving()]),
+        ]);
+      }
       break;
   }
-  actorState.jumping = false;
-};
-
-const onLanding = () => {
-  // 滑块未与左中右任何一个板发生碰撞，落在了地板的时候
-  console.log("On landing");
-  bodyState.value = 0;
-  actorState.jumping = false;
-  reset();
-};
-
-const reset = () => {
-  console.log("On reset");
-  // 将两个运动都停止后再进行jumpTo，以保证两个jumpTo动作在同一帧完成
-  verticalControl.pause(() => {
-    horizontalControl.pause(() => {
-      verticalControl.jumpTo(0, 0);
-      horizontalControl.jumpTo(0, 0);
-      onBoard = CONST_BOARD_LEFT;
-      showPrecisionGuild.value = true;
-      direction.value = 1;
-    });
-  });
 };
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  if (actorState.jumping) {
+const procKeyUp = (ev) => {
+  if (jumping) {
     // 跳跃中，键盘锁定
     return true;
   }
+  switch (ev.keyCode) {
+    case 37:
+      actorControl.run([actorControl.action().stopMoving()]);
+      break;
+    case 39:
+      actorControl.run([actorControl.action().stopMoving()]);
+      break;
 
-  if (keyPressed) {
-    // KeyPress控制按键连点
-    return true;
-  }
-
-  // 控制按键按下时，键盘锁定
-  keyPressed = true;
-
-  // 滑块位置可能发生变更，所以消除动画精度测试的描素文字
-  if (showPrecisionGuild.value) {
-    showPrecisionGuild.value = false;
-  }
-
-  if (ev.keyCode === 13) {
-    // 滑块跳跃(纵向和横向的配置值都是计算过的，为了进行第一跳的精度测试)
-    actorState.jumping = true;
-    // 垂直方向抛物运动
-    bodyState.value = 1;
-    verticalControl.throwAlongY(
-      -1000,
-      2450,
-      { type: "catch", position: 100, direction: 1 },
-      () => {
-        onLanding();
-      }, // 未碰撞落地时，对滑块位置进行重置
-      () => {
-        bodyState.value = 2;
-      } // 调整成落下状态
-    );
-    // 水平方向，按照direction的值，移动到屏幕两端
-    if (direction.value > 0) {
-      horizontalControl.moveToX(1200 - CONST_BOX_WIDTH, 400, null);
-    } else {
-      horizontalControl.moveToX(0, 400, null);
-    }
-  } else if (ev.keyCode === 37) {
-    // 滑块向左移动
-    actorState.hMoving = true;
-    // 分三个区域设定移动范围
-    let target_x = 0;
-    if (onBoard === CONST_BOARD_LEFT) {
-      target_x = 0;
-    } else if (onBoard === CONST_BOARD_MID) {
-      target_x = 500;
-    } else if (onBoard === CONST_BOARD_RIGHT) {
-      target_x = 800;
-    }
-    horizontalControl.moveToX(target_x, 300, null);
-  } else if (ev.keyCode === 39) {
-    // 滑块向右移动
-    actorState.hMoving = true;
-    // 分三个区域设定移动范围
-    let target_x = 0;
-    if (onBoard === CONST_BOARD_LEFT) {
-      target_x = 396 - CONST_BOX_WIDTH;
-    } else if (onBoard === CONST_BOARD_MID) {
-      target_x = 699 - CONST_BOX_WIDTH;
-    } else if (onBoard === CONST_BOARD_RIGHT) {
-      target_x = 1199 - CONST_BOX_WIDTH;
-    }
-    horizontalControl.moveToX(target_x, 350, null);
+    default:
+      break;
   }
-  return true;
 };
-
-const onKeyUp = () => {
-  keyPressed = false;
-
-  if (actorState.hMoving) {
-    // 停止用户通过左右键发起的水平移动
-    horizontalControl.pause(null);
-    actorState.hMoving = false;
-  }
+const onActionObj = {
+  onKeyDown: procKeyDown,
+  onKeyUp: procKeyUp,
 };
 
+//掉到最下面一层的地板则重新定位
+const reset = () => {
+  board = "left";
+  direction.value = 1;
+  actorControl.run([actorControl.action().teleportTo(0, 0)]);
+};
 onMounted(() => {
-  /* 关联碰撞体处理要在didMount中进行 */
-
-  /* 将碰撞发生后要停止动画的元素打包 */
-  viewsAutoFroze = createImpactAutoFroze(
-    [actorVertical.value.mainDiv, actorHorizontal.value.mainDiv],
-    null
-  ); // 此句柄最好保留，未来可以通过此句柄统一进行views list更新
-
-  /* 构建左边碰撞区 */
-  sensorList.push(
-    createImpactTracer(
-      actor.value,
-      boxLeft.value,
-      createImpactCallback(() => {
-        onImpact(CONST_BOARD_LEFT);
-      }, null),
-      viewsAutoFroze
-    )
-  );
-
-  /* 构建中间碰撞区 */
-  sensorList.push(
-    createImpactTracer(
-      actor.value,
-      boxMid.value,
-      createImpactCallback(() => {
-        onImpact(CONST_BOARD_MID);
-      }, null),
-      viewsAutoFroze
-    )
-  );
-
-  /* 构建右边碰撞区 */
-  sensorList.push(
-    createImpactTracer(
-      actor.value,
-      boxRight.value,
-      createImpactCallback(() => {
-        onImpact(CONST_BOARD_RIGHT);
-      }, null),
-      viewsAutoFroze
-    )
-  );
-
-  reset();
-});
-
-onBeforeUnmount(() => {
-  /* 重要! 退出后应该释放所有碰撞监听者 */
-  for (const sensor of sensorList) {
-    sensor.Recycle();
-  }
-  viewsAutoFroze?.Recycle();
+  actorControl = actorRef.value.control;
 });
 </script>
 
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown,
-      onKeyUp,
-    }"
-    :style="{ width: 1280, height: 720, backgroundColor: '#000000' }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#ffffff',
-        left: 100,
-        top: 20,
-        width: 1280 - 200,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
-      JsView环境下不会穿透模型(PC上会穿模)
-    </div>
-
-    <div
-      key="bottomWall"
-      :style="{
-        top: 620,
-        left: 40,
-        width: 1200,
-        height: 5,
-        backgroundColor: '#F0FFF0',
-      }"
-    />
-
-    <div
-      key="leftFloor"
-      :style="{
-        top: 520,
-        left: 40,
-        width: 397,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-
-    <!-- 碰撞体的高度要比每帧移动距离大，因为碰撞判断是每帧内进行判断，并不连续，距离太小可能穿模 -->
-
-    <div
-      key="leftFloorImp"
-      ref="boxLeft"
-      :style="{
-        top: 520,
-        left: 40,
-        width: 397,
-        height: 15,
-        backgroundColor: 'rgba(255,255,255,0.2)',
-      }"
-    />
-
-    <div
-      key="midFloor"
-      :style="{
-        top: 320,
-        left: 540,
-        width: 200,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="midFloorImp"
-      ref="boxMid"
-      :style="{
-        top: 320,
-        left: 540,
-        width: 200,
-        height: 15,
-        backgroundColor: 'rgba(0,0,0,0)',
-      }"
-    />
-
-    <div
-      key="rightFloor"
-      :style="{
-        top: 520,
-        left: 840,
-        width: 400,
-        height: 5,
-        backgroundColor: '#F0F000',
-      }"
-    />
-    <div
-      key="rightFloorImp"
-      ref="boxRight"
-      :style="{
-        top: 520,
-        left: 820,
-        width: 400,
-        height: 15,
-        backgroundColor: 'rgba(0,0,0,0)',
-      }"
-    />
-
-    <!-- 大多数设备的文字宽度时405, 但某些android 9.0设备上文字宽度是407 -->
-    <div
-      v-if="showPrecisionGuild"
-      key="PrecisionGuideText"
-      class="text"
-      :style="{ top: 528, left: 40, width: 407, height: 40 }"
-    >
-      JSV下,立刻起跳会精确到边缘
-    </div>
-
-    <div
-      key="GuideText1"
-      class="text"
-      :style="{ top: 625, left: 370, width: 540, height: 40 }"
-    >
-      左右键调整跳跃起点，按OK键进行跳跃
-    </div>
-    <div
-      key="DirectText"
-      class="text"
-      :style="{ top: 150, left: 425, width: 430, height: 40 }"
-    >
-      {{ `当前方向:${direction > 0 ? "->" : "<-"}` }}
-    </div>
-
-    <div key="actor" :style="{ top: 520 - CONST_BOX_HEIGHT - 2, left: 40 }">
-      <jsv-actor-move
-        key="horizontal"
-        ref="actorHorizontal"
-        :control="horizontalControl"
-      >
-        <jsv-actor-move
-          key="vertical"
-          ref="actorVertical"
-          :control="verticalControl"
-        >
-          <div
-            ref="actor"
-            :style="{
-              backgroundColor: actorColor,
-              width: CONST_BOX_WIDTH,
-              height: CONST_BOX_HEIGHT,
-            }"
-          ></div>
-        </jsv-actor-move>
-      </jsv-actor-move>
-    </div>
-
-    <!-- 一个无限动画元素，来测试卡顿 -->
-    <div
-      :style="{
-        top: 100,
-        left: 50,
-        height: 150,
-        width: 150,
-        backgroundColor: '#334455',
-        animation: 'impact-stop-anim-rotate 1s infinite linear',
-      }"
-    />
-  </jsv-focus-block>
-</template>
-
 <style scoped>
+.test {
+  top: 100;
+  left: 50;
+  height: 150;
+  width: 150;
+  background-color: #334455;
+  text-align: center;
+  line-height: 150;
+  font-size: 30;
+  color: #ffffff;
+  z-index: 999;
+}
 @keyframes impact-stop-anim-rotate {
   from {
-    transform: rotate3d(0, 0, 1, 270deg);
+    transform: rotate3d(0, 0, 1, 360deg);
   }
   to {
     transform: rotate3d(0, 0, 1, 0deg);
   }
 }
-
 .text {
   font-size: 30;
   color: #73665c;
   line-height: 40;
-  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   text-align: center;